Blob 是 JavaScript 中表示不可变原始二进制数据的容器，用于安全高效地处理文件、图片等资源；支持通过 new Blob() 创建、URL.createObjectURL() 生成临时 URL 下载，并需手动 revoke 释放内存。
Blob 对象是 JavaScript 中用于表示**不可变的、原始二进制数据**的容器，常用于处理文件、图片、音频、PDF 等二进制内容。它不直接暴露数据本身，而是提供一种安全、高效的方式去读取、传输或下载二进制资源。
什么是 Blob 对象
Blob（Binary Large Object）本质是一个“数据块”，可以由字符串、ArrayBuffer、TypedArray、FormData 等创建。它的特点是：
只读，无法修改内部数据 支持按类型（type）声明 MIME 类型（如 "text/plain"、"image/png"） 可通过 URL.createObjectURL() 转为临时 URL，用于下载、预览或作为 的 src 需手动调用 URL.revokeObjectURL() 释放内存（尤其在大量生成时）
如何创建 Blob 对象
使用 new Blob(parts, options) 构造函数：
parts：数组，可包含字符串、ArrayBuffer、Uint8Array、其他 Blob 等 options：对象，常用 { type: "mime/type" }
示例：
立即学习“Java免费学习笔记（深入）”；
const text = "Hello, 下载测试！";const blob = new Blob([text], { type: "text/plain;charset=utf-8" });const json = JSON.stringify({ name: "张三", score: 95 });const jsonBlob = new Blob([json], { type: "application/json;charset=utf-8" });// 从 ArrayBuffer 创建（如 fetch 后的 arrayBuffer()）fetch("/api/data.bin") .then(res => res.arrayBuffer()) .then(buf => { const binBlob = new Blob([buf], { type: "application/octet-stream" }); });
如何实现点击下载 Blob 内容
核心步骤：创建 Blob → 生成临时 URL → 创建并触发隐藏链接下载 → 清理 URL
用 URL.createObjectURL(blob) 获取可访问的临时地址 动态创建 标签，设置 href 和 download 属性（后者指定下载文件名） 调用 .click() 触发下载 下载完成后尽快调用 URL.revokeObjectURL(url) 避免内存泄漏
封装一个通用下载函数：
function downloadBlob(blob, filename) { const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); // 立即释放}// 使用示例const content = "这是一份导出的文本";const blob = new Blob([content], { type: "text/plain;charset=utf-8" });downloadBlob(blob, "report.txt");
常见注意事项
中文文件名在部分浏览器（如 Safari）可能乱码：建议用英文或拼音命名，或服务端配合处理 大文件不要一次性转成字符串再建 Blob：优先用 ArrayBuffer 或流式处理（如 ReadableStream + TransformStream） 不能跨域直接下载 Blob URL：Blob URL 是同源的，仅限当前页面使用，无需担心跨域问题 移动端 Safari 对 download 属性支持有限：此时可引导用户长按链接保存，或改用 iframe 方案（兼容性更广但略复杂）
基本上就这些。Blob 是前端做文件生成、导出、离线缓存的基础能力，掌握它就能灵活应对各种下载和二进制操作场景。
以上就是JavaScript中什么是Blob对象_如何创建下载的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1541129.html
微信扫一扫 
支付宝扫一扫 
