一文了解Blob文件格式，前端必备技能之一-海口c网

一文了解Blob文件格式，前端必备技能之一

article/2025/8/23 16:05:23

文章目录

前言
一、什么是Blob？
二、Blob的基本特性
三、Blob的构造函数
四、常见使用场景
- 1. 文件下载
- 2. 图片预览
- 3. 大文件分片上传
四、Blob与其他API的关系
- 1. File API
- 2. FileReader
- 3. URL.createObjectURL()
- 4. Response
五、性能与内存管理
六、实际案例：导出Word文档
七、浏览器兼容性
八、总结

在这里插入图片描述

前言

最近在项目中需要导出文档时，我首次接触到了 Blob 文件格式。作为一个前端开发者，虽然经常听到 "Blob" 这个术语，但对其具体原理和应用场景并不十分了解。经过一番研究和实践，我决定将所学整理成文，与大家分享 Blob 技术的奥秘。

一、什么是Blob？

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

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

二、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.revokeObjectURL(url);
}// 使用示例
downloadFile('Hello, world!', 'example.txt', 'text/plain');

2. 图片预览

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]);
});

3. 大文件分片上传

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;}
}

四、Blob与其他API的关系

1. File API

File 对象继承自 Blob ，在Blob基础上增加了文件名、最后修改时间等元数据。

2. FileReader

用于读取 Blob 或 File 对象的内容：

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

3. URL.createObjectURL()

创建指向 Blob 对象的 URL ，可用于预览或下载。

4. Response

Fetch API 的 Response 对象可以将 Blob 作为响应体：

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

五、性能与内存管理

使用Blob时需要注意：

内存释放：通过 URL.revokeObjectURL() 及时释放不再需要的Blob URL
大文件处理：对于大文件，考虑使用 slice() 方法分块处理
Worker线程：处理大型 Blob 时可在 Web Worker 中进行以避免阻塞主线程

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

最近我在项目中需要将 HTML 内容导出为 Word 文档，使用 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);
}