Blob 文件格式详解与前端常见应用场景
Blob(Binary Large Object)是 JavaScript 中表示二进制数据的对象,具有不可变性、类型标识和分片能力。 Blob 的构造函数、常见使用场景(文件下载、图片预览、大文件分片上传)、与其他 API(File API、FileReader、URL.createObjectURL、Response)的关系,以及性能内存管理和浏览器兼容性。通过实际案例展示了如何导出 Word 文档,帮助开发者掌握这一前端必备技能。

Blob(Binary Large Object)是 JavaScript 中表示二进制数据的对象,具有不可变性、类型标识和分片能力。 Blob 的构造函数、常见使用场景(文件下载、图片预览、大文件分片上传)、与其他 API(File API、FileReader、URL.createObjectURL、Response)的关系,以及性能内存管理和浏览器兼容性。通过实际案例展示了如何导出 Word 文档,帮助开发者掌握这一前端必备技能。


微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
在 Web 开发中,Blob 格式常用于处理二进制数据。本文介绍 Blob 技术的原理和应用场景。
Blob(Binary Large Object,二进制大对象)是 JavaScript 中用于表示二进制数据的一个对象。它本质上是一个不可变的、原始数据的类文件对象,可以存储大量的二进制数据。
// 创建一个简单的 Blob 对象
const blob = new Blob(["Hello, world!"], { type: 'text/plain' });
Blob 构造函数接受两个参数:
new Blob(blobParts, options);
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');
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;
}
}
File 对象继承自 Blob,在 Blob 基础上增加了文件名、最后修改时间等元数据。
用于读取 Blob 或 File 对象的内容:
const reader = new FileReader();
reader.onload = function(e) {
console.log(e.target.result);
};
reader.readAsText(blob);
创建指向 Blob 对象的 URL,可用于预览或下载。
Fetch API 的 Response 对象可以将 Blob 作为响应体:
fetch(url).then(response => response.blob()).then(blob => {
// 处理 blob
});
使用 Blob 时需要注意:
URL.revokeObjectURL() 及时释放不再需要的 Blob URLslice() 方法分块处理最近我在项目中需要将 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);
}
大多数现代浏览器都支持 Blob API,包括:
对于 IE10 及以下版本,需要使用替代方案如 msSaveBlob 或 FileSaver.js 等 polyfill。
Blob 作为 Web 开发中处理二进制数据的重要工具,在文件操作、多媒体处理、数据存储等场景中发挥着关键作用。通过本文的介绍,相信大家对 Blob 技术有了更深入的理解。在实际开发中,合理使用 Blob 可以大大提升应用的性能和用户体验。