Blob 是 JavaScript 中表示不可变原始二进制数据的容器，用于安全高效地处理文件、图片等资源；支持通过 new Blob() 创建、URL.createObjectURL() 生成临时 URL 下载，并需手动 revoke 释放内存。
Blob 对象是 JavaScript 中用于表示**不可变的、原始二进制数据**的容器，常用于处理文件、图片、音频、PDF 等二进制内容。它不直接暴露数据本身，而是提供一种安全、高效的方式去读取、传输或下载二进制资源。
什么是 Blob 对象
Blob（Binary Large Object）本质是一个“数据块”，可以由字符串、ArrayBuffer、TypedArray、FormData 等创建。它的特点是：
- 只读，无法修改内部数据
- 支持按类型（
type）声明 MIME 类型（如"text/plain"、"image/png"） - 可通过
URL.createObjectURL()转为临时 URL，用于下载、预览或作为<img>/<audio>的 src - 需手动调用
URL.revokeObjectURL()释放内存（尤其在大量生成时）
如何创建 Blob 对象
使用 new Blob(parts, options) 构造函数：
-
parts：数组，可包含字符串、
ArrayBuffer、Uint8Array、其他Blob等 -
options：对象，常用
{ type: "mime/type" }
示例：
立即学习“Java免费学习笔记（深入）”；
const text = "Hello, 下载测试！";
const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
const json = JSON.stringify({ name: "张三", score: 95 });
const jsonBlob = new Blob([json], { type: "application/json;charset=utf-8" });
// 从 ArrayBuffer 创建（如 fetch 后的 arrayBuffer()）
fetch("/api/data.bin")
.then(res => res.arrayBuffer())
.then(buf => {
const binBlob = new Blob([buf], { type: "application/octet-stream" });
});
如何实现点击下载 Blob 内容
核心步骤：创建 Blob → 生成临时 URL → 创建并触发隐藏链接下载 → 清理 URL
- 用
URL.createObjectURL(blob)获取可访问的临时地址 - 动态创建
<a>标签，设置href和download属性（后者指定下载文件名） - 调用
.click()触发下载 - 下载完成后尽快调用
URL.revokeObjectURL(url)避免内存泄漏
封装一个通用下载函数：
function downloadBlob(blob, filename) {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 立即释放
}
// 使用示例
const content = "这是一份导出的文本";
const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
downloadBlob(blob, "report.txt");
常见注意事项
- 中文文件名在部分浏览器（如 Safari）可能乱码：建议用英文或拼音命名，或服务端配合处理
-
大文件不要一次性转成字符串再建 Blob：优先用
ArrayBuffer或流式处理（如ReadableStream+TransformStream） - 不能跨域直接下载 Blob URL：Blob URL 是同源的，仅限当前页面使用，无需担心跨域问题
-
移动端 Safari 对
download属性支持有限：此时可引导用户长按链接保存，或改用 iframe 方案（兼容性更广但略复杂）
基本上就这些。Blob 是前端做文件生成、导出、离线缓存的基础能力，掌握它就能灵活应对各种下载和二进制操作场景。
