一招鲜，吃遍天：JS下载/导出csv、excel、txt、img等文件方法总结

2024-01-09 08:18:20

绪论

在今天的数字世界中，我们经常需要处理各种格式的文件，从文本文件到电子表格，从图像到视频。JavaScript作为一门强大的编程语言，可以帮助我们轻松地下载和导出这些文件。

方法

1. 使用锚标签

使用锚标签是下载文件的传统方法，但它仍然是一种简单而有效的方法。只需创建一个带有href属性的a标签，并将href属性设置为要下载的文件的URL即可。浏览器将自动开始下载该文件。

<a href="path/to/file.txt" download>Download File</a>

2. 创建Blob URL

创建Blob URL是另一种下载文件的有效方法。Blob URL是一个指向Blob对象的URL，Blob对象包含了要下载的数据。要创建Blob URL，首先需要创建一个Blob对象，然后使用URL.createObjectURL()方法来创建Blob URL。最后，可以使用锚标签或window.location.href属性来下载该文件。

const blob = new Blob(["Hello, world!"], {type: "text/plain"});
const blobURL = URL.createObjectURL(blob);

// 使用锚标签
const a = document.createElement("a");
a.href = blobURL;
a.download = "file.txt";
a.click();

// 使用 window.location.href
window.location.href = blobURL;

3. 使用HTML5文件API

HTML5文件API提供了一些新的方法来下载和导出文件。这些方法包括：

FileSaver.js：FileSaver.js是一个JavaScript库，可以帮助您轻松地保存文件。它支持各种文件类型，包括文本文件、电子表格、图像和视频。
FileReader：FileReader API允许您读取文件中的数据。您可以使用FileReader API将文件中的数据读入内存，然后使用其他方法将其保存到本地磁盘。
FileWriter：FileWriter API允许您将数据写入文件。您可以使用FileWriter API将数据从内存写入到本地磁盘。