JavaScript中用Blob配合URL.createObjectURL()实现文件下载，需先创建Blob对象并生成临时URL，再通过动态a标签触发下载，最后调用URL.revokeObjectURL()释放内存。
在JavaScript中，用 Blob 配合 URL.createObjectURL() 实现文件下载，是前端生成并导出文件（如文本、JSON、CSV、PDF等）最常用且兼容性良好的方式。关键在于：先构造 Blob 对象，再创建临时 URL，最后触发下载。
1. 创建 Blob 并生成可下载的 URL
Blob 表示不可变的原始数据对象，适合封装字符串、数组缓冲区等内容。创建后调用 URL.createObjectURL() 会返回一个指向该 Blob 的唯一、临时的本地 URL（形如 blob:https://example.com/xxx）。
示例：下载一段 JSON 字符串
const data = { name: "张三", score: 95 };
const blob = new Blob([JSON.stringify(data, null, 2)], {
type: "application/json;charset=utf-8"
});
const url = URL.createObjectURL(blob); // 创建临时 URL
2. 触发下载（兼容主流浏览器）
通过动态创建 <a> 标签并模拟点击实现下载。注意设置 download 属性指定文件名，否则浏览器可能只打开内容而不下载。
立即学习“Java免费学习笔记（深入）”；
- 必须设置
href为上一步生成的 blob URL -
download属性值即为保存的文件名（如"info.json"） - 添加到页面后立即点击，再移除元素（避免内存残留）
const a = document.createElement("a");
a.href = url;
a.download = "info.json";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
3. 使用后及时释放 URL（重要！）
每次调用 createObjectURL() 都会保留对 Blob 的引用，不手动释放会导致内存泄漏，尤其在频繁下载时明显。
应在下载完成后（或不再需要该 URL 时），调用 URL.revokeObjectURL(url) 清理：
// 在 a.click() 后添加
setTimeout(() => {
URL.revokeObjectURL(url);
}, 100);
也可放在 a.ontransitionend 或 click 回调里，但简单场景用 setTimeout 已足够可靠。
4. 处理二进制数据（如 Excel、图片）
若数据来自 ArrayBuffer、Uint8Array 或 fetch 响应，直接传入 Blob 构造函数即可，无需转字符串：
- 从 fetch 下载后端返回的 Excel 文件：
fetch("/api/export")
.then(res => res.arrayBuffer())
.then(buffer => {
const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "report.xlsx";
a.click();
URL.revokeObjectURL(url);
});
注意 MIME 类型要准确，否则浏览器可能无法正确识别文件类型或默认保存为 .bin。
