前端 Blob 文件格式原理与常见应用场景 | 极客日志

JavaScript大前端

前端 Blob 文件格式原理与常见应用场景

Blob 是 JavaScript 中表示二进制数据的对象，具有不可变性、类型标识等特性。介绍 Blob 构造函数、文件下载、图片预览及大文件分片上传等常见场景，阐述其与 File API、FileReader、URL.createObjectURL 及 Response 的关系。同时涵盖性能内存管理、Word 文档导出案例及浏览器兼容性说明，帮助开发者掌握 Blob 技术以提升应用性能。

苹果系统发布于 2026/4/8更新于 2026/5/2214 浏览

概述

Blob（Binary Large Object，二进制大对象）是 JavaScript 中用于表示二进制数据的一个对象。它本质上是一个不可变的、原始数据的类文件对象，可以存储大量的二进制数据。

// 创建一个简单的 Blob 对象
const blob = new Blob(["Hello, world!"], { type: 'text/plain' });

一、什么是 Blob？

Blob 是 JavaScript 中用于表示二进制数据的一个对象。它本质上是一个不可变的、原始数据的类文件对象，可以存储大量的二进制数据。

二、Blob 的基本特性

不可变性：一旦创建，Blob 对象的内容无法直接修改
类型标识：通过 MIME 类型标识数据格式
大小存储：可以存储大量二进制数据
分片能力：可以被分割成更小的 Blob 对象

三、Blob 的构造函数

Blob 构造函数接受两个参数：

new Blob(blobParts, options);

blobParts：由 ArrayBuffer、ArrayBufferView、Blob、DOMString 等对象构成的数组
options：可选参数，包含两个属性：
- type：Blob 内容的 MIME 类型
- endings：指定包含行结束符\n的字符串如何写入

四、常见使用场景

1. 文件下载

function downloadFile(content, filename, type) {
  const blob = new Blob([content], { type });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.(url);
}

(, , );

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

function previewImage(file) {
  const blob = URL.createObjectURL(file);
  const img = document.createElement('img');
  img.onload = function() {
    URL.revokeObjectURL(this.src); // 释放内存
  };
  img.src = blob;
  document.body.appendChild(img);
}
// 使用示例
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (e) => {
  previewImage(e.target.files[0]);
});

function uploadLargeFile(file, chunkSize = 1024 * 1024) {
  let offset = 0;
  const fileSize = file.size;
  while (offset < fileSize) {
    const chunk = file.slice(offset, offset + chunkSize);
    // 上传 chunk...
    offset += chunkSize;
  }
}

const reader = new FileReader();
reader.onload = function(e) {
  console.log(e.target.result);
};
reader.readAsText(blob);

fetch(url).then(response => response.blob()).then(blob => {
  // 处理 blob
});

function exportAsWord(html, filename = 'document.doc') {
  // Word 文档的 HTML 模板
  const template = `
    <html xmlns:o="urn:schemas-microsoft-com:office:office" 
          xmlns:w="urn:schemas-microsoft-com:office:word" 
          xmlns="http://www.w3.org/TR/REC-html40">
      <head>
        <meta charset="UTF-8">
        <title>Document</title>
      </head>
      <body>${html}</body>
    </html>
  `;
  // 创建 Blob 对象
  const blob = new Blob([template], { type: 'application/msword' });
  // 创建下载链接
  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);
}

前端 Blob 文件格式原理与常见应用场景

概述

一、什么是 Blob？

二、Blob 的基本特性

三、Blob 的构造函数

四、常见使用场景

1. 文件下载

更多推荐文章

相关免费在线工具

2. 图片预览

3. 大文件分片上传

五、Blob 与其他 API 的关系

1. File API

2. FileReader

3. URL.createObjectURL()

4. Response

六、性能与内存管理

七、实际案例：导出 Word 文档

八、浏览器兼容性

九、总结

更多推荐文章

相关免费在线工具

前端 Blob 文件格式原理与常见应用场景

概述

一、什么是 Blob？

二、Blob 的基本特性

三、Blob 的构造函数

四、常见使用场景

1. 文件下载

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

2. 图片预览

3. 大文件分片上传

五、Blob 与其他 API 的关系

1. File API

2. FileReader

3. URL.createObjectURL()

4. Response

六、性能与内存管理

七、实际案例：导出 Word 文档

八、浏览器兼容性

九、总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具