HTML中如何使用Blob对象创建文件数据-html教程-PHP中文网

blob是浏览器中表示不可变原始二进制数据的对象，无文件名和修改时间；与普通文件相比，file是blob子类，额外拥有name和lastmodified属性。

html中如何使用blob对象创建文件数据

什么是 Blob，它和普通文件有什么区别

Blob 是浏览器中表示“不可变、原始二进制数据”的对象，不是文件，也不带文件名或最后修改时间——它只是数据块。你用 new File() 构造的实例其实是 Blob 的子类，多了 name 和 lastModified 属性；而纯 Blob 没有这些，所以直接下载时浏览器默认叫它 download。

如何用 Blob 构造文本或 JSON 数据

构造 Blob 最容易踩的坑是编码和类型声明不匹配。比如传入字符串但没指定 type，或写了 "text/plain" 却传了 UTF-8 字节流（实际应传 Uint8Array 或 ArrayBuffer）。

常见做法：

纯文本：直接传字符串，type 设为 "text/plain;charset=utf-8"（注意加 charset，否则中文可能乱码）
JSON：同上，type 用 "application/json;charset=utf-8"
二进制内容（如图片 base64 解码后）：先用 atob() 转成字符串，再转 Uint8Array，最后传入 Blob 构造函数

const jsonStr = JSON.stringify({a: 1, b: "中文"});
const blob = new Blob([jsonStr], {type: "application/json;charset=utf-8"});

如何触发 Blob 下载并指定文件名

Blob 本身不能直接下载，必须借助 <a></a> 标签的 download 属性 + URL.createObjectURL() 创建临时 URL。关键点：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

URL.createObjectURL(blob) 返回的是内存中的引用，不是真实路径，不能用于 fetch 或跨域请求
下载完成后应调用 URL.revokeObjectURL() 释放引用，否则内存泄漏（尤其在频繁生成 Blob 的场景下）
download 属性只在同源下生效；如果页面是 data: 或 blob: 协议，部分浏览器（如 Safari）会忽略该属性，强制命名为 unknown

const blob = new Blob(["hello"], {type: "text/plain"});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "hello.txt";
a.click();
URL.revokeObjectURL(url); // 必须调用

从 Canvas 或 Fetch 响应生成 Blob 的典型场景

Canvas 导出图片、API 返回流式响应，都是 Blob 的高频使用场景，但行为差异大：

canvas.toBlob() 是异步的，回调里才拿到 Blob；而 canvas.toDataURL() 是同步字符串，再转 Blob 反而多一次编码开销
fetch().then(res => res.blob()) 返回 Promise，注意它读取的是响应体全部内容，不会自动解压（gzip 需服务端配合或手动解压）
大文件（>100MB）用 Blob 可能卡顿，此时建议用 ReadableStream + TransformStream 分块处理，而不是一次性 res.blob()

Canvas 示例：

canvas.toBlob(blob => {
  const url = URL.createObjectURL(blob);
  // …后续下载逻辑
}, "image/png");

Fetch 示例：

fetch("/api/data").then(res => res.blob()).then(blob => {
  // 注意：这里 blob.type 来自响应头 Content-Type，不一定可靠
  // 如需强约束，建议手动 new Blob([blob], {type: "application/pdf"})
});

真正麻烦的是 type 推断不准、内存没及时释放、以及 Safari 对 download 的限制——这些细节不验证，上线后用户就只能下到 unknown。