文章目录
1. 什么是Blob？2. Blob的基本特性3. Blob的构造函数4. Blob与其他API的关系4.1. File API4.2. FileReader4.3. URL.createObjectURL()4.4. Response
5. 性能与内存管理6. 常见使用场景6.1. 文件下载6.2. 图片预览6.3. 大文件分片上传
7. 实际案例：导出Word文档
1. 什么是Blob？
Blob（Binary Large Object，二进制大对象）是 JavaScript 中用于表示二进制数据的一个对象。它本质上是一个不可变的、原始数据的类文件对象，可以存储大量的二进制数据。
2. Blob的基本特性
不可变性： 一旦创建，Blob 对象的内容无法直接修改类型标识： 通过 MIME 类型标识数据格式大小存储： 可以存储大量二进制数据分片能力： 可以被分割成更小的 Blob 对象
3. Blob的构造函数
Blob构造函数接受两个参数：
new Blob(blobParts, options);
blobParts：由ArrayBuffer、ArrayBufferView、Blob、DOMString等对象构成的数组options：可选参数，包含两个属性： type：Blob内容的MIME类型 endings：指定包含行结束符\n的字符串如何写入
4. Blob与其他API的关系
4.1. File API
File 对象继承自 Blob ，在Blob基础上增加了文件名、最后修改时间等元数据。
4.2. FileReader
用于读取 Blob 或 File 对象的内容：
const reader = new FileReader();
reader.onload = function (e) {
console.log(e.target.result);
};
reader.readAsText(blob);
4.3. URL.createObjectURL()
URL.createObjectURL() 是一个用于创建指向Blob或File对象的临时 URL 的JavaScript方法。这个临时URL可以被用在任何需要URL的地方，比如标签的src属性 标签的href属性或者 Canvas 上下文中的 createPattern 方法等。
URL.createObjectURL用法
const url = URL.createObjectURL(file);
在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。
浏览器在 document 卸载的时候，会自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
URL.revokeObjectURL(url)
4.4. Response
Fetch API 的 Response 对象可以将 Blob 作为响应体：
fetch(url)
.then((response) => response.blob())
.then((blob) => {
// 处理blob
});
5. 性能与内存管理
使用Blob时需要注意：
内存释放： 通过 URL.revokeObjectURL() 及时释放不再需要的Blob URL大文件处理： 对于大文件，考虑使用 slice() 方法分块处理Worker线程： 处理大型 Blob 时可在 Web Worker 中进行以避免阻塞主线程
6. 常见使用场景
6.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");
6.2. 图片预览
function previewImage(file) {
const url = URL.createObjectURL(file);
const img = document.createElement("img");
img.onload = function () {
URL.revokeObjectURL(this.src); // 释放内存
};
img.src = url;
document.body.appendChild(img);
}
// 使用示例
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener("change", (e) => {
previewImage(e.target.files[0]);
});
6.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;
}
}
7. 实际案例：导出Word文档
最近我在项目中需要将 HTML 内容导出为 Word 文档，使用 Blob 技术可以轻松实现：
function exportAsWord(html, filename = 'document.doc') {
// Word文档的HTML模板
const template = `
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">
`;
// 创建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);
}