Vue文件流下载：小白也能学会的文件下载功能

使用 new Blob 二进制进行 Vue 文件下载

作为一名 Vue 开发者，你可能面临过下载文件流的场景。无论是导出报表、图片还是其他类型的文件，本文将全面讲解如何利用 new Blob 二进制轻松实现文件下载功能。

文件流下载简介

文件流下载是一种直接从服务器下载文件并将文件内容输出到浏览器中的方法。这种方式避免了将文件保存到本地磁盘，从而节省了存储空间并加快了下载速度。

使用 new Blob 二进制下载文件

1. 创建 Blob 对象

const blob = new Blob([fileData], { type: 'application/octet-stream' });

• fileData：要下载的文件数据。
• type：文件的 MIME 类型。常见类型包括：
  • application/octet-stream：二进制数据
  • text/plain：纯文本
  • text/html：HTML 文件
  • image/jpeg：JPEG 图片
  • image/png：PNG 图片

2. 创建 URL 对象

const url = URL.createObjectURL(blob);

3. 创建 a 标签

<a href="#" download="filename.txt">下载</a>

• href：指向 URL 对象的链接。
• download：指定下载的文件名。

4. 将 a 标签添加到 DOM 中

document.body.appendChild(a);

5. 触发 a 标签的点击事件

a.click();

更改下载文件类型

只需更改 new Blob() 中的 type 即可。例如，要下载文本文件，将 type 设置为 text/plain。

从 Vue 后台获取文件流

1. 使用 axios 发送请求

axios.get('/download', { responseType: 'blob' })
  .then((response) => {
    const blob = response.data;
    // ...
  });

2. 使用 fetch 发送请求

fetch('/download')
  .then((response) => {
    const blob = response.blob();
    // ...
  });

常见问题解答

1. 如何在 Vue 中触发文件下载？

使用 new Blob 创建文件数据，并将其分配给 a 标签的 href 属性。

2. 除了通过 a 标签，还有其他触发下载的方法吗？

是的，可以通过编程方式使用 URL.createObjectURL() 和 window.open() 方法。

3. 我可以在下载时隐藏下载提示吗？

是的，通过将 a 标签的 download 属性设置为文件名的同时，将其 display 属性设置为 none。

4. 如何避免下载的文件被缓存？

在文件名中添加时间戳或其他动态元素以避免缓存。

5. 是否可以设置下载文件的大小限制？

可以，使用 Blob 的 slice() 方法根据需要裁剪文件大小。

总结

本文提供了全面指南，指导 Vue 开发者使用 new Blob 二进制轻松实现文件下载功能。通过遵循本文的步骤，你可以轻松下载文件流，并优化下载体验以满足用户的需求。