如何利用Blob配合URL.createObjectURL实现前端纯JS的文本导出-js教程-PHP中文网

因为a标签href只接受合法url，纯文本不是url；data url对中文、换行易出错且兼容性差；正确做法是转blob→createobjecturl→a.download触发下载。

如何利用blob配合url.createobjecturl实现前端纯js的文本导出

导出文本时为什么不能直接用 `a` 标签 href 指向字符串？

因为 a 的 href 只接受 URL，而纯文本内容（如 "hello\nworld"）不是合法 URL。有人试过 data:text/plain;base64,...，但 base64 编码对中文或换行符容易出错，且 IE 不支持长 data URL；更关键的是，某些浏览器（如 Safari）对 data URL 的下载行为不一致，可能打开而非下载。

正确路径是：把文本转成 Blob → 用 URL.createObjectURL() 创建临时对象 URL → 绑定给 a.download 触发下载。

`Blob` 构造时的编码和类型怎么选？

文本导出最常踩的坑是乱码，根源在 Blob 的 type 和实际内容编码不匹配。浏览器默认按 UTF-8 解析，所以：

type 必须显式设为 "text/plain;charset=utf-8"（不能只写 "text/plain"，否则部分浏览器会用系统默认编码）
传入 Blob 构造函数的内容，如果是字符串，就直接传；不要手动转成 Uint8Array 或 ArrayBuffer，除非你明确需要其他编码（如 GBK）
换行符保持原样（\n 或 \r\n），Blob 不做转换

示例：

const content = "姓名,年龄\n张三,25\n李四,30";
const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
const url = URL.createObjectURL(blob);

如何兼容 Safari 和移动端微信内置浏览器？

Safari 对 a.click() 触发下载限制极严：必须是用户手势（如 click 事件）同步调用，且 a 元素需在 DOM 中（哪怕 display: none）。微信 iOS 内置浏览器还额外拦截非同源 object URL 下载。

Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式，用于飞书日历导入导出及数据集成。

下载

实操要点：

整个流程必须包在用户触发的事件回调里（比如按钮 onclick），不能异步延迟（如 setTimeout 或 Promise.then）
a 元素要先 document.body.appendChild(a)，下载完再 remove()，不能只靠 createObjectURL 后直接 click
对微信 iOS，可降级用 location.href = url（会跳转并触发下载，体验略差但有效）

最小可靠写法：

function downloadText(content, filename) {
  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); // 立即释放，避免内存泄漏
}