从入门到精通，解析Excel下载难题

2022-12-11 20:48:11

前端文件下载详解：轻松应对纯文本和 Excel 下载

作为一名前端开发者，你可能经常需要从客户端下载各种类型文件，例如纯文本、Excel 或其他格式。本文将深入探讨前端文件下载的奥秘，帮助你轻松完成这些任务，并解决下载的 Excel 文件无法打开等常见问题。

前端下载纯文本

下载纯文本是最简单的文件下载操作，有两种常见的方法：

1. 字符串下载

// 字符串内容
const text = "Hello, World!";

// 创建 Blob 对象
const blob = new Blob([text], { type: "text/plain" });

// 创建下载链接
const url = URL.createObjectURL(blob);

// 触发下载
window.location.href = url;

2. URL 下载

// 字符串内容
const text = "Hello, World!";

// 使用 encodeURIComponent 进行编码
const encodedText = encodeURIComponent(text);

// 创建下载链接
const url = `data:text/plain;charset=utf-8,${encodedText}`;

// 触发下载
window.location.href = url;

前端下载 Excel

下载 Excel 与纯文本类似，但需要使用特定的文件类型：

// Excel 内容
const data = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

// 使用 XLSX 库生成 Excel 文件
const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(workbook, worksheet);

// 生成 Blob 对象
const blob = new Blob([XLSX.write(workbook, { type: "binary" })], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });

// 创建下载链接
const url = URL.createObjectURL(blob);

// 触发下载
window.location.href = url;