搞定文件流下载：vue项目的两种方案

如何在 Vue 项目中实现文件下载：两种方法

简介

在 Vue 项目中，从后端请求接口返回文件流并进行下载是一个常见需求。本文将介绍两种实现该功能的方法：使用 a 标签的特性 和下载文件流的方式 。

方法一：使用 a 标签的特性

原理

该方法利用 a 标签的特性。a 标签有一个 href 属性，可以指定一个链接地址。当用户点击 a 标签时，浏览器将向该链接地址发送一个 GET 请求。如果链接地址指向一个文件，则浏览器将下载该文件。

步骤

1. 创建链接： 在 Vue 项目中，使用 a 标签创建一个链接。
2. 绑定点击事件： 在 a 标签上绑定一个点击事件，该事件将创建另一个 a 标签并模拟点击，触发下载。
3. 设置链接属性： 为新创建的 a 标签设置 href 和 download 属性，指定下载的文件地址和文件名。

注意事项

• 确保后端接口正确返回文件流。
• 确保浏览器支持 a 标签的 download 属性。
• 确保下载的文件名与后端返回的文件名一致。

方法二：下载文件流的方式

原理

该方法使用 fetch API 下载文件流。fetch API 是现代浏览器提供的一种 API，用于发送 HTTP 请求并接收响应。

步骤

1. 发送请求： 使用 fetch API 发送一个 GET 请求到后端接口。
2. 获取文件流： 从响应中获取文件流。
3. 创建链接： 创建一个 a 标签并设置 href 属性，指向创建的对象 URL。
4. 模拟点击： 模拟点击 a 标签，触发下载。
5. 释放对象 URL： 下载完成后，释放创建的对象 URL。

注意事项

• 确保后端接口正确返回文件流。
• 确保浏览器支持 fetch API。
• 确保下载的文件名与后端返回的文件名一致。

代码示例

方法一：使用 a 标签的特性

<a id="downloadLink" href="http://example.com/file.zip" download>下载文件</a>

<script>
  document.getElementById("downloadLink").addEventListener("click", function(event) {
    event.preventDefault();
    var newLink = document.createElement("a");
    newLink.href = "http://example.com/file.zip";
    newLink.download = "file.zip";
    newLink.click();
  });
</script>

方法二：下载文件流的方式

fetch("http://example.com/file.zip")
  .then(response => {
    if (response.status !== 200) {
      throw new Error("服务器错误");
    }
    return response.blob();
  })
  .then(blob => {
    var newLink = document.createElement("a");
    newLink.href = URL.createObjectURL(blob);
    newLink.download = "file.zip";
    newLink.click();
    URL.revokeObjectURL(newLink.href);
  })
  .catch(error => {
    // 处理错误
  });

结论

通过本文介绍的两种方法，可以在 Vue 项目中实现从后端请求接口返回文件流并进行下载。选择合适的方法取决于项目的需求和浏览器支持。

常见问题解答

• 如何确保下载的文件名与后端返回的文件名一致？
  • 在 download 属性中设置与后端返回的文件名相同的值。
• 为什么使用 createObjectURL？
  • 浏览器无法直接访问文件流，因此需要使用 createObjectURL 创建一个指向文件流的对象 URL。
• 为什么需要释放对象 URL？
  • 对象 URL 是临时资源，在下载完成后需要释放，以避免资源泄漏。
• 如何处理下载错误？
  • 在方法二中，可以使用 .catch() 处理器来处理下载错误。
• 哪种方法更适合我的项目？
  • 如果浏览器支持 fetch API，则方法二更灵活和高效。如果浏览器不支持 fetch API，则可以使用方法一。