Blob对象入门：前端处理二进制数据的必备知识

你肯定遇到过这样的场景：想在前端把一段文本转成文件下载，或者把一个图片预览一下。

以前我们可能觉得，这还不简单？用 window.open 或者简单的 标签搞定。

它包含两个核心属性：一个是 type，表示 MIME 类型（比如 text/plain 或 image/png）；另一个是 size，表示字节长度。 制数据

你可以把它看作是一个只读的容器，专门用来存放原始数据。

创建方式也很简单，一行代码就能搞定：

const blob = new Blob(["你好，世界"], { type: "text/plain;charset=utf-8" });

这里的关键在于，你传入的是一个数组，即使里面只有一个字符串，也要写成数组形式。

这样做的好处是，你可以轻松地把多个部分拼接在一起。

比如，先创建一个 HTML 片段，再追加一段 CSS，最后把它们合并成一个完整的 HTML Blob。

这种拼接能力在处理复杂数据组装时非常实用。

为什么你需要知道它？

很多新手会问，既然有 FormData，有 fetch，为什么还要折腾 Blob？

因为有些操作，其他 API 搞不定，或者效率太低。

最典型的场景就是：前端生成文件并下载。

假设你要做一个报表导出功能，数据都在浏览器里算好了，怎么让用户下载成一个 Excel 文件？

用 Blob 可以把这些内存中的数据瞬间变成一个虚拟的文件对象。

然后配合 URL.createObjectURL()，你就能得到一个临时的 URL。

把这个 URL 赋给 标签的 href，点击即可触发下载。

ArrayBuffer 更像是一个底层的缓冲区，它本身不能直接读写内容，你需要借助 TypedArray（如 Uint8Array）来查看或修改里面的字节。 前端处理二进制数据的必备知识指南

它适合用于底层的数据处理，比如加密算法、WebSocket 的二进制通信，或者与 Canvas 像素操作打交道。

而 Blob 更偏向于应用层。

它自带 MIME 类型信息，可以直接被浏览器识别为文件。

你想把数据发给后端上传？用 Blob。

你想让浏览器下载一个文件？用 Blob。

你想把图片显示在页面上？用 Blob URL。

简单来说，ArrayBuffer 是给程序员看的，Blob 是给浏览器看的。

在实际开发中，你可能经常需要在两者之间转换。

比如，从 ArrayBuffer 转成 Blob，只需要把它作为参数传给 Blob 构造函数即可：

const arrayBuffer = ... // 假设你有二进制数据
const blob = new Blob([arrayBuffer], { type: "image/jpeg" });

反之，如果你想读取 Blob 的内容为 ArrayBuffer，可以使用 blob.arrayBuffer() 方法，这是一个返回 Promise 的异步操作。 前端处理二进

这种互操作性让前端数据流转变得非常灵活。

实战：如何优雅地生成文件

让我们来看一个具体的例子。

假设你要生成一个 CSV 文件，内容是从数据库拉取的用户列表。

你不能让用户手动复制粘贴，那样太原始了。

你需要在浏览器里生成一个文件。

第一步，构造 CSV 字符串。

const csvContent = "姓名,年龄\n张三,25\n李四,30";

第二步，创建 Blob 对象。

const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });

注意这里的 charset，如果不指定 UTF-8，中文可能会乱码。

第三步，生成临时 URL。

const link = document.createElement("a");
link.href = URL.createObjectURL(blob);

第四步，设置文件名并触发下载。

link.download = "users.csv";
link.click();

第五步，也是容易被忽略的一步，释放内存。

URL.revokeObjectURL(link.href);

为什么要释放？因为 createObjectURL 会在内存中创建一个引用，如果不撤销，随着时间推移，内存占用会越来越高，可能导致页面卡顿甚至崩溃。

特别是在循环生成大量文件预览图的场景中，记得及时清理。

这个过程看似简单，却涵盖了 Blob 使用的核心流程：创建、链接、下载、释放。

掌握了这个模板，你可以轻松应对大多数前端文件生成需求。

无论是生成 JSON 配置文件，还是打包 ZIP 文件（配合 JSZip 库），原理都是一样的。

进阶技巧：分片上传与断点续传

Blob 的威力不止于此，它在处理大文件时更是大展身手。

当用户上传几个 GB 的视频时，直接一次性上传不仅耗时，还容易因网络波动失败。

这时候，我们可以利用 Blob 的 slice 方法，将大文件切成小块。

const chunkSize = 1024 * 1024 * 5; // 5MB per chunk
const start = 0;
const end = Math.min(chunkSize, file.size);
const firstChunk = file.slice(start, end);

这里 file 本身就是 Blob 的子类，所以可以直接调用 slice。

切片后，你可以单独上传每一个 chunk，并记录每个块的进度。

如果上传中断，下次可以从上一次成功的块继续，这就是断点续传的原理。

服务端收到所有块后，再按顺序合并成一个完整文件。

这种技术极大地提升了用户体验，也让前端具备了处理重型任务的能力。

除此之外，Blob 还可以与 fetch API 结合，实现 POST 请求发送二进制数据。

比如，你想通过 AJAX 发送一张图片到服务器，而不使用传统的

fetch("/upload", {
  method: "POST",
  body: new Blob([imageData], { type: "image/png" })
});