前言
在 Web 开发中，处理二进制数据是绕不开的话题。Blob（Binary Large Object）作为 JavaScript 中表示二进制数据的对象，其本质是一个不可变的、原始数据的类文件对象。虽然经常听到这个术语，但很多开发者对其具体原理和应用场景并不十分了解。本文结合实际项目经验，梳理 Blob 的核心用法与注意事项。
一、什么是 Blob？
Blob 可以存储大量的二进制数据，本质上是一个不可变的、原始数据的类文件对象。它允许我们像操作文件一样操作内存中的二进制流。
// 创建一个简单的 Blob 对象
const blob = new Blob(["Hello, world!"], { type: 'text/plain' });
二、Blob 的基本特性
- 不可变性：一旦创建，
Blob对象的内容无法直接修改，需通过切片或新建来改变。 - 类型标识：通过 MIME 类型标识数据格式，便于浏览器识别。
- 大小存储：支持存储大量二进制数据，适合大文件处理。
- 分片能力：可以被分割成更小的
Blob对象，利于网络传输优化。
三、Blob 的构造函数
Blob 构造函数接受两个参数，用于初始化对象。
new Blob(blobParts, options);
- blobParts：由
ArrayBuffer、ArrayBufferView、Blob、DOMString等对象构成的数组。 - options：可选参数，包含两个属性：
- type：Blob 内容的 MIME 类型。
- endings：指定包含行结束符
\n的字符串如何写入。
四、常见使用场景
1. 文件下载
利用 URL.createObjectURL() 将 Blob 转为临时链接，配合 <a> 标签触发下载。
function downloadFile(content, filename, type) {
const blob = new Blob([content], { type });
const url = URL.createObjectURL(blob);
a = .();
a. = url;
a. = filename;
a.();
.(url);
}
(, , );
