可通过 Blob 对象配合 a 标签 download 属性实现前端文本文件一键下载，需指定 MIME 类型和 UTF-8 编码，用 URL.createObjectURL 生成临时链接并模拟点击触发，最后调用 revokeObjectURL 释放内存。
可以通过 Blob 对象配合 a 标签的 download 属性，将动态生成的文本内容（如 JSON、CSV、日志等）一键保存为本地文件，无需后端参与。
创建 Blob 并封装文本数据
Blob 是浏览器中表示不可变原始数据的对象。导出文本时，需指定正确的 MIME 类型（如 "text/plain" 或 "text/csv"），并传入字符串或 Uint8Array 等格式的数据：
- 直接用字符串：`new Blob([content], { type: "text/plain;charset=utf-8" })`
- 确保 UTF-8 编码：添加
charset=utf-8避免中文乱码 - 若内容含换行符，建议用 `\n`（Unix 风格），Windows 用户打开时可能显示为单行，但实际内容无误
触发下载：用 URL.createObjectURL + <a> 标签
Blob 本身不能直接下载，需先转为临时 URL，再模拟点击链接：
- 调用 `URL.createObjectURL(blob)` 获取可访问的 blob URL
- 创建
<a>元素，设置href为该 URL，download属性指定文件名（如"data.txt"） - 调用
a.click()触发下载；完成后建议调用URL.revokeObjectURL(url)释放内存
完整示例：导出用户输入的文本
以下代码实现一个按钮，点击后将文本框内容保存为 note.txt：
立即学习“前端免费学习笔记（深入）”；
function exportAsText() {
const text = document.getElementById("input").value || "空内容";
const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "note.txt";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
注意事项与兼容性
该方法在现代浏览器（Chrome、Firefox、Edge、Safari 15.4+）中均支持，但有几点需留意：
- 必须由用户手势（如 click）触发，不能在异步回调（如 setTimeout、fetch.then）中静默调用，否则会被浏览器拦截
- 文件名不支持路径（如
"./export/data.txt"），仅接受纯文件名 - 导出大文件（>500MB）可能卡顿或失败，建议分块或提示用户
- 若需导出 CSV 表格，注意字段内含逗号、换行或双引号时应按 RFC 4180 转义（例如用双引号包裹字段，内部双引号写成两个）
