教你在浏览器如何通过JS下载文件

164次阅读

共计 1160 个字符，预计需要花费 3 分钟才能阅读完成。

文件下载是一个非常常见的需求，但由于浏览器的安全策略的限制，我们通常只能通过一个额外的页面，访问某个文件的 url 来实现下载功能，但是这种用户体验非常不好。

幸好，HTML 5 里面为 <a> 标签添加了一个 download 的属性，我们可以轻易的利用它来实现下载功能，再也不需要用以前的方法了。

要用 js 下载文件，我们需要先创建一个 Blob 对象，它是一个可以存储二进制数据的对象，可以用来表示任意类型的文件。我们可以用 Blob 构造函数来创建一个 Blob 对象，传入一个数组作为参数，数组中的每个元素都是一个 ArrayBuffer、ArrayBufferView、Blob、DOMString 等类型的对象。

接下来，我们需要创建一个 URL 对象，它是一个可以表示任意资源的地址的对象。我们可以用 URL.createObjectURL() 方法来创建一个 URL 对象，传入一个 Blob 对象作为参数。

最后，我们需要创建一个 <a> 标签，并设置它的 href 属性为 URL 对象，并设置它的 download 属性为想要保存的文件名。然后调用它的 click() 方法来触发下载。

为了方便使用，我们可以把上述步骤封装成一个函数，接受三个参数：data、type 和 filename。data是要下载的文件内容，type是文件的 MIME 类型，filename是文件名。函数的实现如下：

function downloadFile(data, type, filename) {
  // 创建 Blob 对象
  const blob = new Blob([data], {type: type});
  // 创建 URL 对象
  const url = URL.createObjectURL(blob);
  // 创建 a 标签
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  // 触发下载
  a.click();
  // 释放内存
  URL.revokeObjectURL(url);
}

这样，我们就可以用这个函数来下载不同类型的文件了。这里下载 pdf 用到了npm 库。

// 下载 txt 文件
downloadFile("Hello World", "text/plain", "hello.txt");
// 下载 csv 文件
downloadFile("Name,Age\nAlice,20\nBob,21", "text/csv", "data.csv");
// 下载 pdf 文件
const doc = new jsPDF();
doc.text("Hello World", 10, 10);
const data = doc.output();
downloadFile(data, "application/pdf", "hello.pdf");

以上就是如何用 js 下载 txt、表格、pdf 文件的方法。希望对你有帮助。

正文完