用Blob解析二进制流：简化JS文件下载

2023-10-17 07:41:00

在现代网络应用中，文件下载是一个常见而必要的任务。虽然大多数情况下，我们都会使用后端处理文件下载，但这会给服务器带来额外的负担，尤其是当需要下载大量文件时。为了解决这个问题，我们可以利用Blob API解析后台响应的二进制流，实现快速且高效的JS文件下载功能。

Blob API 简介

Blob API允许我们使用JavaScript操作二进制数据。它提供了一个Blob对象，可以存储原始二进制数据，而无需将其转换为字符串或其他格式。此外，Blob API还提供了多种方法来操作Blob对象，包括切片、合并和生成URL。

实现JS文件下载

使用Blob API解析二进制流并实现JS文件下载功能非常简单，下面是详细步骤：

发起HTTP请求： 使用fetch()或XMLHttpRequest发起HTTP请求，并指定responseType为"blob"。
接收响应： 等待请求完成并接收响应。响应中的body属性将包含二进制文件流。
创建Blob对象： 使用new Blob()创建一个Blob对象，并将二进制文件流作为构造函数的参数。
获取文件名称： 从响应的头部获取文件名，通常存储在Content-Disposition头部中。
创建对象URL： 使用URL.createObjectURL()方法创建Blob对象的URL。这将创建一个临时URL，可以用来下载文件。
生成下载链接： 创建一个<a>元素，并将Blob对象的URL设置为它的href属性。
触发下载： 单击<a>元素以触发下载。

代码示例

以下是一个实现JS文件下载的代码示例：

async function downloadFile(url) {
  const response = await fetch(url, {
    responseType: "blob",
  });

  const blob = new Blob([await response.blob()]);
  const filename = response.headers.get("Content-Disposition").split(";")[1].split("=")[1];
  const objectURL = URL.createObjectURL(blob);

  const anchor = document.createElement("a");
  anchor.href = objectURL;
  anchor.download = filename;
  anchor.click();

  URL.revokeObjectURL(objectURL);
}