前端文件导出遭遇Blob难题？一文读懂Blob奥秘！

2023-01-23 21:17:23

文件导出的利器：Blob 对象的巧妙运用

作为一名前端开发者，你是否曾遇到过需要导出表格数据、图片或 PDF 文档的需求？如果没有可靠的方法，导出文件可能会是一项棘手的任务。然而，有一种鲜为人知的工具可以轻松解决这个问题，这就是 Blob 对象。

Blob 对象：二进制数据的容器

Blob 对象是浏览器提供的二进制大对象，能够存储各种二进制数据，包括文件数据。它的独特之处在于，它既包含了文件内容，又独立于文件系统。因此，我们可以在不实际创建文件的情况下，处理和导出数据。

利用 Fetch API 导出文件

Fetch API 是现代浏览器中的一种强大工具，可用于进行 HTTP 请求。当我们想要导出文件时，可以使用 Fetch API 来获取响应，并设置 responseType 为 Blob。这将指示浏览器将响应内容作为 Blob 对象返回，而不是文本或 JSON。

fetch('/export.php', {
  responseType: 'blob'
})
.then(response => {
  // 后续处理 Blob 对象
});

获取文件信息

Blob 对象本身并不包含有关文件的信息，例如文件名或文件类型。这些信息需要从 HTTP 响应头中获取。我们可以使用 Content-Disposition 头来提取这些信息：

const contentDisposition = response.headers.get('Content-Disposition');
const filename = contentDisposition.match(/filename=(.+)/)[1];
const filetype = contentDisposition.match(/filename=.+\.(.+)/)[1];

获取导出状态

导出文件成功与否可以通过 HTTP 状态码来判断。200 表示导出成功，而 404 或 500 等状态码表示导出失败。根据状态码，我们可以执行不同的操作：

如果导出成功，我们可以使用 Blob 对象的 arrayBuffer() 方法获取二进制数据，并将其保存到本地文件。
如果导出失败，我们可以使用 Blob 对象的 text() 方法获取错误信息。

if (response.status === 200) {
  // 保存文件
  saveAs(blob, filename);
} else {
  // 获取错误信息
  blob.text().then(text => {
    const error = JSON.parse(text);
    console.log(error.code, error.msg);
  });
}