前端通过new Blob下载文档流（下载zip或excel）

在前端开发中，下载功能是常见的需求之一。特别是在处理文档流（如ZIP文件或Excel文件）时，利用Blob对象来实现文件下载，是一种非常高效且方便的方法。本文将探讨如何通过Blob对象来下载ZIP或Excel文件，并提供代码示例。

什么是Blob

Blob（Binary Large Object）是一种用于表示二进制数据的类。在Web中，Blob可以用于存储文件或数据流，支持存储文本及二进制数据。利用Blob，我们可以很方便地创建文件并触发下载。

实现文件下载的步骤

我们实现文件下载通常分为以下几个步骤： 1. 从服务器获取文件流。 2. 创建Blob对象。 3. 创建一个链接（<a>标签）并设置其href属性为Blob URL。 4. 触发点击事件，从而开始下载。

代码示例

以下是一个使用fetch API从服务器获取Excel或ZIP文件，并通过Blob下载的示例代码：

function downloadFile(url, fileName) {
  // 第一步：使用fetch请求文件流
  fetch(url)
    .then(response => {
      // 检查响应状态
      if (!response.ok) {
        throw new Error('网络错误：' + response.statusText);
      }
      return response.blob(); // 第二步：将响应转为Blob对象
    })
    .then(blob => {
      // 第三步：创建Blob URL
      const blobUrl = URL.createObjectURL(blob);

      // 第四步：创建<a>标签并触发下载
      const a = document.createElement('a');
      a.href = blobUrl;
      a.download = fileName; // 设置下载文件名称
      document.body.appendChild(a); // 将<a>添加到body中
      a.click(); // 触发点击事件下载文件
      a.remove(); // 下载后移除<a>

      // 释放Blob URL
      URL.revokeObjectURL(blobUrl);
    })
    .catch(error => {
      console.error('下载文件失败:', error);
    });
}

// 使用示例
const downloadButton = document.getElementById('downloadButton');
downloadButton.addEventListener('click', () => {
  const url = 'https://example.com/path/to/your/file.zip'; // 替换为你的文件路径
  const fileName = 'example.zip'; // 指定下载文件名
  downloadFile(url, fileName);
});

代码解析

1. fetch(url): 我们使用fetch API来发送HTTP请求，获取文件流。url是待下载文件的地址。

2. response.blob(): 将获取的响应对象转换为Blob。该方法返回一个Promise， resolves为Blob对象。

3. URL.createObjectURL(blob): 创建一个指向Blob对象的URL，使得用户能够下载它。

4. 创建并点击: 我们动态创建一个<a>标签，并设置其href属性为刚才创建的Blob URL，同时设置download属性以指定下载文件的名称。通过调用a.click()来触发下载。

5. URL.revokeObjectURL(blobUrl): 下载完成后，使用revokeObjectURL释放Blob URL，以避免内存泄漏。