Blob与URL.createObjectURL文本导出方法

本文详解了如何利用 Blob 对象与 URL.createObjectURL 在纯前端环境下高效、可靠地实现文本导出功能：通过将字符串（支持 UTF-8 编码及中文等特殊字符）封装为 Blob，生成临时 blob URL，再借助动态创建并自动点击带 download 属性的 a 标签触发下载，全程无需后端参与；同时强调了编码设置、非法字符清理、资源及时释放等关键实践细节，附有简洁可运行的示例代码，让开发者轻松掌握零依赖、跨浏览器兼容的前端导出方案。

用 Blob 配合 URL.createObjectURL 实现前端文本导出，核心是把字符串转成二进制对象，再生成临时 URL 触发下载——整个过程不依赖后端，纯 JS 完成。

创建 Blob 对象封装文本内容

Blob 是浏览器中表示不可变原始数据的类文件对象。导出文本时，需指定正确的 MIME 类型（如 text/plain 或 text/csv），并注意编码兼容性：

• 中文等非 ASCII 字符建议显式指定 UTF-8 编码，方法是传入 { type: 'text/plain;charset=utf-8' }
• 字符串可直接传入 Blob 构造函数，无需手动转 ArrayBuffer 或 Uint8Array（浏览器自动处理）
• 若内容来自用户输入或富文本编辑器，导出前建议用 encodeURIComponent 或正则清理非法控制字符（如 \u2028\u2029），避免某些浏览器解析异常

用 createObjectURL 生成可下载链接

URL.createObjectURL(blob) 返回一个生命周期绑定当前文档的临时 URL（形如 blob:https://example.com/xxx）。关键点：

• 该 URL 只在当前页面会话有效，关闭标签页即失效；不需手动释放，但长期运行的单页应用建议在下载完成后调用 URL.revokeObjectURL(url) 避免内存泄漏
• 不能直接用 window.location.href = url 触发下载（部分浏览器会打开而非下载），应配合 标签
• download 属性决定保存的文件名，若不设，浏览器可能默认用 "download" 或截取 URL 路径最后一段

触发下载并清理资源

模拟点击 标签是最可靠的方式：

function exportText(content, filename = 'export.txt') {
  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
  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);
}

// 调用示例
exportText('Hello 世界！\n第二行内容', 'hello-world.txt');