前端文件下载新利器！vue3将二进制文件流转文件轻松下载到浏览器

2023-03-24 20:58:55

轻松实现前端文件下载：探索 Vue.js 强大的 fetch API

在现代 Web 开发中，从服务器下载文件是开发人员面临的常见任务。以往，传统的下载方式包括使用 <a> 标签的 download 属性或通过 AJAX 请求。然而，这些方法存在诸多限制，包括操作繁琐、无法控制下载进度以及实施复杂等。

Vue.js 中的文件下载革命

幸运的是，Vue.js 为前端文件下载带来了革命性的变革。它引入了 fetch API，一个强大的网络请求 API，让开发者能够以更简单、更灵活的方式进行文件下载。

使用 fetch API 下载文件

以下是如何使用 fetch API 在 Vue.js 中下载文件的步骤：

发送请求： 使用 fetch() 方法发送 GET 请求到包含要下载文件的 URL。
处理响应： 在 .then() 方法中处理响应对象。如果请求成功（状态码为 200），则可以提取文件数据。
获取二进制文件流： 使用 response.blob() 方法获取包含文件二进制数据的 Blob 对象。
创建 URL 对象： 使用 URL.createObjectURL() 方法创建表示 Blob 对象的 URL。
创建 <a> 标签： 创建一个 <a> 标签，并将 href 属性设置为 URL 对象。
设置 download 属性： 将 <a> 标签的 download 属性设置为要下载的文件名。
模拟点击： 使用 JavaScript 模拟点击 <a> 标签，以触发下载。
销毁 URL 对象： 下载完成后，使用 URL.revokeObjectURL() 方法销毁 URL 对象。

示例代码：

// 使用 fetch API 下载文件
fetch('http://example.com/file.bin')
  .then(response => {
    if (response.ok) {
      const blob = response.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'file.bin';
      a.click();
      URL.revokeObjectURL(url);
    } else {
      console.error('无法下载文件');
    }
  })
  .catch(error => {
    console.error('无法下载文件', error);
  });