如何通过HTML5中Blob对象将网页生成的动态数据导出为本地文本文件-H5教程-PHP中文网

可通过 blob 对象配合 a 标签 download 属性实现前端文本文件一键下载，需指定 mime 类型和 utf-8 编码，用 url.createobjecturl 生成临时链接并模拟点击触发，最后调用 revokeobjecturl 释放内存。

如何通过html5中blob对象将网页生成的动态数据导出为本地文本文件

可以通过 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 + 标签

Blob 本身不能直接下载，需先转为临时 URL，再模拟点击链接：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

调用 `URL.createObjectURL(blob)` 获取可访问的 blob URL
创建 <a></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);
}