JavaScript中什么是Blob对象_如何创建下载-js教程-PHP中文网

JavaScript中什么是Blob对象_如何创建下载

紅蓮之龍

发布： 2025-12-05 18:36:06

原创

742人浏览过

Blob 是 JavaScript 中表示不可变原始二进制数据的容器，用于安全高效地处理文件、图片等资源；支持通过 new Blob() 创建、URL.createObjectURL() 生成临时 URL 下载，并需手动 revoke 释放内存。

javascript中什么是blob对象_如何创建下载

Blob 对象是 JavaScript 中用于表示**不可变的、原始二进制数据**的容器，常用于处理文件、图片、音频、PDF 等二进制内容。它不直接暴露数据本身，而是提供一种安全、高效的方式去读取、传输或下载二进制资源。

什么是 Blob 对象

Blob（Binary Large Object）本质是一个“数据块”，可以由字符串、ArrayBuffer、TypedArray、FormData 等创建。它的特点是：

只读，无法修改内部数据
支持按类型（type）声明 MIME 类型（如 "text/plain"、"image/png"）
可通过 URL.createObjectURL() 转为临时 URL，用于下载、预览或作为 <img alt="JavaScript中什么是Blob对象_如何创建下载" > / <audio></audio> 的 src
需手动调用 URL.revokeObjectURL() 释放内存（尤其在大量生成时）

如何创建 Blob 对象

使用 new Blob(parts, options) 构造函数：

parts：数组，可包含字符串、ArrayBuffer、Uint8Array、其他 Blob 等
options：对象，常用 { type: "mime/type" }

示例：

立即学习“Java免费学习笔记（深入）”；

CodeWP

针对 WordPress 训练的AI代码生成器

149

查看详情

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) 获取可访问的临时地址
动态创建 <a></a> 标签，设置 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 方案（兼容性更广但略复杂）