怎么利用 Blob 对象将 HTML 编辑器内容转换为可发送的二进制数据流-html教程-PHP中文网

必须显式声明type: "text/html;charset=utf-8"，否则浏览器可能不识别为html文本，服务端解析失败；发送时应转为file对象并指定文件名，避免裸blob被后端忽略。

怎么利用 blob 对象将 html 编辑器内容转换为可发送的二进制数据流

Blob 构造函数怎么传 HTML 字符串

直接把 HTML 字符串丢进 Blob 构造函数会出错，因为默认按 UTF-8 编码处理，但没指定 type 时浏览器可能不识别为文本，后续发送时服务端收不到预期的 MIME 类型。必须显式声明 type: "text/html;charset=utf-8"，否则某些后端（比如 Express 的 body-parser）会拒绝解析或当成乱码。

实操建议：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

HTML 字符串先用 encodeURIComponent 或 encodeURI 处理不是必须的——Blob 本身不关心 URL 编码，它只管原始字节
如果编辑器内容含中文、emoji 或富文本标签，确保字符串是原生 JS 字符串（不是被 double-escaped 过的），再传入 Blob

示例：

const htmlStr = "<h1>测试</h1><p>你好，世界</p>";<br>const blob = new Blob([htmlStr], { type: "text/html;charset=utf-8" });

为什么不能直接用 FormData.append("file", blob) 发送

可以发，但容易踩坑：很多后端接口期望接收的是 multipart/form-data 中带文件名的 File 对象，而不是裸 Blob。部分框架（如 Django 的 request.FILES、Spring Boot 的 @RequestParam MultipartFile）会跳过无文件名的 Blob，导致字段为空。

实操建议：

用 new File([blob], "content.html", { type: "text/html" }) 包一层，生成带名称和类型的 File 对象
注意 File 构造函数第三个参数是对象，不是字符串；漏掉 type 可能导致后端识别为 application/octet-stream
如果后端要求固定字段名（比如 editorContent），就用 formData.append("editorContent", file)，别硬塞 "file"

fetch 发送时要不要设置 headers

不要手动设 Content-Type。一旦设置了（比如 {"Content-Type": "multipart/form-data"}），浏览器会禁用自动添加 boundary，导致后端无法解析 multipart 数据，报错类似 Multipart: Boundary not found 或直接 400。

实操建议：

让 fetch 自动处理：只传 body: formData，完全不设 headers
如果需要额外 header（如认证 token），可以加，但避开 Content-Type
验证是否生效：在 DevTools 的 Network → Headers 标签页里看 Content-Type 值，应该是类似 multipart/form-data; boundary=----WebKitFormBoundary...

大体积 HTML 内容（>5MB）发送失败怎么办

不是 Blob 的问题，而是浏览器对 fetch 请求体大小没有硬限制，但实际受限于内存、网络超时、以及服务端配置（如 Nginx 的 client_max_body_size、Node.js 的 limit 选项）。用户常误以为是 Blob 不支持大文件，其实是链路中某处截断了。

实操建议：