在前端开发过程中，我们经常需要处理文件，比如用户上传图片、视频下载、导出 Excel 或 PDF 等等。而这些操作背后的关键技术之一就是：Blob（Binary Large Object）。如果你还没彻底理解它的机制与用法，那这篇文章一定能帮你打通任督二脉。

📌 目录

  1. 什么是 Blob？
  2. Blob 的创建方式
  3. Blob 与 File 的区别
  4. Blob 的常见用途
  5. 使用 URL.createObjectURL 创建下载链接
  6. Blob 与 fetch/axios 配合使用
  7. Blob 转 base64、ArrayBuffer 等格式
  8. 实战示例：导出文件与文件上传
  9. 浏览器兼容性与注意事项
  10. 总结：掌握 Blob，让你前端能力更进一步

1. 什么是 Blob？

Blob 是 Binary Large Object 的缩写，中文常译为“二进制大对象”。它用于表示不可变的类文件原始数据对象，在 JavaScript 中是通过 Blob 构造函数创建的。

**简单理解：**Blob 就是前端操作“文件”和“二进制数据”的抽象对象。

const blob = new Blob(["Hello, world!"], { type: "text/plain" });

2. Blob 的创建方式

我们可以使用 new Blob() 创建一个 Blob 对象：

const textBlob = new Blob(["这是一段文字"], { type: "text/plain" });
const jsonBlob = new Blob([JSON.stringify({ name: "ChatGPT" })], { type: "application/json" });
const imageBlob = new Blob([arrayBufferData], { type: "image/png" });

参数说明：

  • 第一个参数是一个数组，元素可以是字符串、ArrayBuffer、TypedArray、Blob 等；
  • 第二个参数是 type，指定 MIME 类型（可选但建议设置）。

3. Blob 与 File 的区别

对比点BlobFile
可写性只读只读
是否有文件名❌ 无✅ 有
创建方式new Blob()new File()
主要用途下载、网络传输、中间处理数据表单上传、File API 处理用户文件

可以用 new File() 创建一个 File 对象，但它本质上继承自 Blob。

4. Blob 的常见用途

Blob 用途非常广泛，是前端操作文件和网络传输的基础：

  • 文件下载（PDF、图片、CSV 等）
  • 图片预览（例如拖拽上传预览）
  • 接收后端传来的二进制数据（例如流媒体、导出 Excel）
  • 使用 canvas 生成图片 Blob
  • 将用户操作保存为文件（如绘图板）

5. 使用 URL.createObjectURL 创建下载链接

我们常通过 URL.createObjectURL 把 Blob 对象变成一个可以访问的临时链接，用于下载或显示图片：

const blob = new Blob(["这是一段导出的文本"], { type: "text/plain" });
const url = URL.createObjectURL(blob);

const a = document.createElement("a");
a.href = url;
a.download = "example.txt";
a.click();

URL.revokeObjectURL(url); // 手动释放内存

6. Blob 与 fetch/axios 配合使用

后端返回文件流时，前端用 response.blob() 解析：

fetch("/download")
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    window.open(url);
  });

在 axios 中设置响应类型为 blob：

axios.get("/download", { responseType: "blob" })
  .then(res => {
    const blob = res.data;
    const url = URL.createObjectURL(blob);
    window.open(url);
  });

7. Blob 转换其他格式

Blob ➜ base64

function blobToBase64(blob) {
  return new Promise(resolve => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

Blob ➜ ArrayBuffer

blob.arrayBuffer().then(buffer => {
  // 进一步处理
});

8. 实战示例：文件导出

例如导出一个 JSON 文件：

function exportJSON(data, filename = "data.json") {
  const blob = new Blob([JSON.stringify(data)], { type: "application/json" });
  const url = URL.createObjectURL(blob);
  
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  a.click();

  URL.revokeObjectURL(url);
}

或者上传文件转 Blob：

document.querySelector('input[type="file"]').addEventListener('change', e => {
  const file = e.target.files[0];
  const blob = new Blob([file], { type: file.type });
  // 上传到服务器
});

9. 浏览器兼容性与注意事项

大多数现代浏览器（Chrome、Firefox、Safari、Edge）均完全支持 Blob、URL.createObjectURL、FileReader 等相关 API。

注意：

  • 创建完 Blob URL 一定要使用 URL.revokeObjectURL 手动释放；
  • Blob 不支持直接读取内容，需搭配 FileReader 或转换成其他格式；
  • 跨域资源加载文件需处理 Access-Control-Allow-Origin。

10. 总结

掌握 Blob 的使用，可以让你在前端开发中如虎添翼，特别是在涉及文件处理、导出下载、图像处理、用户输入等场景。无论是上传照片，还是生成用户报表、Excel、PDF，你都会发现 Blob 是一个必不可少的好帮手。

🔗 参考资料

如果你希望深入学习 Blob 与前端文件处理的实战案例，可以留言，我将继续更新系列文章。