JavaScript原生实现文件下载：Blob与URL.createObjectURL用法

在前端应用中，直接在浏览器端生成并导出文本、报表或配置文件的需求十分常见。实现这种纯前端文件下载的核心技术组合是 Blob 对象与 URL.createObjectURL 方法：通过 Blob 将内存中的数据封装为不可变的文件形态，再通过 URL.createObjectURL 生成一个临时的引用标识，最后结合隐藏的 <a> 标签触发浏览器的原生下载机制。这种做法无需后端中转即可完成即时文件生成与导出。

一、整体实现机制与交互流程

利用纯前端技术触发浏览器下载的过程，本质上是模拟用户点击超链接并激活其下载行为。整个过程由四个有序环节组成：数据封装、生成内存链接、挂载并模拟点击链接、清理临时资源。

二、核心 API 语法详解

1. Blob 对象构造

Blob（Binary Large Object）表示不可变的类似文件对象的原始数据。其语法定义如下：

const blob = new Blob(blobParts[, options]);

• blobParts：由 ArrayBuffer、TypedArray、DataView、Blob 或纯字符串组成的数组。
• options.type：字符串，表示数据的 MIME 类型（如 text/plain;charset=utf-8 或 application/json）。如果未指定，默认为空字符串。
• options.endings：字符串，指定换行符处理规则，默认为 transparent（保持不变），可选 native（转换为宿主系统的换行符）。

2. URL.createObjectURL 与 URL.revokeObjectURL

URL.createObjectURL(blob) 是一个静态方法，它创建一个包含 URL 的字符串，其形式通常为：

blob:https://example.com/3f7a621e-1234-4567-89ab-cdef01234567

这个 URL 的生命周期与创建它的窗口 document 绑定。只要当前页面不刷新，浏览器就会在内存中维护对该 Blob 对象的引用，这意味着垃圾回收器（GC）无法回收底层的内存空间。因此，当文件已经触发下载或不再使用时，必须显式调用 URL.revokeObjectURL(url) 撤销链接，解除对底层数据的锁定。

三、通用下载函数实现与完整示例

在实际工程中，建议将文件下载逻辑封装成一个通用函数，支持直接传入文本字符串或已经构建好的 Blob 对象。为了保证在各类现代浏览器中正常派发事件，将临时创建的 <a> 标签挂载到 document.body 后再执行 click() 是最稳妥的实践。

/**
 * 触发纯前端文件下载
 * @param {string|Blob} content - 下载内容（字符串或已有 Blob 对象）
 * @param {string} filename - 保存到本地的文件名
 * @param {string} [mimeType='text/plain;charset=utf-8'] - 文件的 MIME 类型
 */
function downloadFile(content, filename, mimeType = 'text/plain;charset=utf-8') {
  // 1. 判断并获取 Blob 实例
  const blob = content instanceof Blob 
    ? content 
    : new Blob([content], { type: mimeType });

  // 2. 生成内存指向 URL
  const objectUrl = URL.createObjectURL(blob);

  // 3. 创建隐藏的 a 标签并配置下载参数
  const link = document.createElement('a');
  link.href = objectUrl;
  link.download = filename;
  link.style.display = 'none';

  // 4. 添加到 DOM、触发点击并移除
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);

  // 5. 延迟释放 URL 对象，确保下载任务已被浏览器正确调度
  setTimeout(() => {
    URL.revokeObjectURL(objectUrl);
  }, 1000);
}

实战调用示例

以下示例展示了导出 JSON 配置文件与 CSV 报表文件的调用方式：

// 示例 1：导出 JSON 文件
const userData = {
  id: 1001,
  username: "alex_dev",
  roles: ["admin", "editor"],
  createAt: new Date().toISOString()
};
downloadFile(
  JSON.stringify(userData, null, 2), 
  'user_config.json', 
  'application/json;charset=utf-8'
);

// 示例 2：导出 CSV 文件（加入 UTF-8 BOM 避免 Excel 中文乱码）
const csvHeader = '姓名,工号,部门\n';
const csvRows = '张三,A001,技术部\n李四,A002,市场部\n';
const bom = new Uint8Array([0xEF, 0xBB, 0xBF]); // UTF-8 BOM
const csvBlob = new Blob([bom, csvHeader, csvRows], { type: 'text/csv;charset=utf-8;' });

downloadFile(csvBlob, 'employee_list.csv');

四、关键差异对比：Blob URL 与 Data URL (Base64)

在前端处理本地数据导出时，除了 Blob + URL.createObjectURL，另一种常见思路是将数据转为 Base64 编码的 data: 协议 URI（如 data:text/plain;base64,5LiJ...）。二者在适用场景和底层机制上有显著差别：

从对比可以看出，对于小于几十 KB 的极简小文本，两种方式差异有限；但对于超过 1MB 的文件、图片生成或报表导出，Blob + URL.createObjectURL 在处理速度、内存使用与兼容性上均具有明显优势。

五、注意事项与常见问题

六、知识总结与应用指南

要牢固掌握前端原生下载，可以从对象职责、执行环节与防坑关键点三个维度进行系统梳理：

综上所述，结合 Blob、URL.createObjectURL 与 <a download>，前端开发者可以在不需要任何第三方库、不需要服务端接口介入的前提下，高效、稳定地完成各种文件的本地构建与下载导出。