new Blob() 必须传数组,单个字符串或 ArrayBuffer 会静默失败;type 需规范 MIME 类型且建议带 charset;ArrayBuffer 要用 .buffer 属性传入;下载后须立即 revokeObjectURL 防泄漏。

直接用 new Blob() 就行,但传参格式错一点就静默失败——它只认数组,不接受单个字符串或 ArrayBuffer 直接传入。
为什么 new Blob("hello") 会出问题
浏览器不会报错,但生成的 Blob 可能 size 为 0 或内容异常。因为构造函数第一个参数必须是数组,哪怕只有一个元素也要包成 ["hello"]。
-
new Blob("hello")→ 静默失败,blob.size === 0 -
new Blob(["hello"])→ 正确,blob.size === 5 -
new Blob([new Uint8Array([1,2,3])])→ 错!会被当对象序列化成"[object Uint8Array]"(15 字节) -
new Blob([new Uint8Array([1,2,3]).buffer])→ 对,传的是底层ArrayBuffer
type 参数写错 MIME 类型的后果
type 不影响 Blob 构造本身(浏览器不校验),但后续用 URL.createObjectURL() 触发下载、或发请求时,服务端可能拒收,或浏览器解析行为异常。
-
type: "image/jpg"→ 不规范,应写"image/jpeg" -
type: "text/plain"→ 中文可能乱码,得加charset=utf-8:"text/plain;charset=utf-8" -
type: "application/json"→ 同样建议写"application/json;charset=utf-8",尤其含中文字段时 - 二进制数据如图片解码后,
type应匹配真实格式,比如 base64 解出的 PNG 数据,type得是"image/png"
ArrayBuffer / Uint8Array 转 Blob 的正确姿势
它们不是同一层概念:ArrayBuffer 是内存块,Blob 是不可变数据抽象。互转必须显式包装,不能直传。
立即学习“前端免费学习笔记(深入)”;
- 从
ArrayBuffer创建:new Blob([buffer], { type: "application/octet-stream" }) - 从
Uint8Array创建:先取.buffer,再传数组:new Blob([uint8Arr.buffer], { type: "" }) - 从字符串创建 JSON:
new Blob([JSON.stringify(obj, null, 2)], { type: "application/json;charset=utf-8" }) - 别用
FileReader同步转 ArrayBuffer → Blob,那是绕远路;blob.arrayBuffer()是现代标准异步方法
下载 Blob 时文件名失效的常见原因
a.download 属性只在同源页面生效;data: 或 blob: 协议下,Safari 等浏览器会忽略它,强制命名为 unknown。
- 必须用
URL.createObjectURL(blob)生成临时 URL,不能直接用blob:地址写死 - 点击触发后,**必须立刻调用
URL.revokeObjectURL(url)**,否则频繁生成会内存泄漏 - 如果页面即将卸载(比如用户关闭标签页),需监听
beforeunload补充清理 - 不要在循环里反复生成 + 下载而不 revoke,这是最常被忽略的内存隐患点



















