跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScript大前端

Blob 文件格式详解与前端常见应用场景

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

不知所云发布于 2026/4/5更新于 2026/9/875 浏览
Blob 文件格式详解与前端常见应用场景

前言

在 Web 开发中，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.(url);
}


(, , );
revokeObjectURL
// 使用示例
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 时需要注意：

  1. 内存释放：通过 URL.revokeObjectURL() 及时释放不再需要的 Blob URL
  2. 大文件处理：对于大文件，考虑使用 slice() 方法分块处理
  3. 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);
}

八、浏览器兼容性

大多数现代浏览器都支持 Blob API，包括：

  • Chrome 20+
  • Firefox 13+
  • Safari 6+
  • Edge 12+
  • Opera 15+

对于 IE10 及以下版本，需要使用替代方案如 msSaveBlob 或 FileSaver.js 等 polyfill。

九、总结

Blob 作为 Web 开发中处理二进制数据的重要工具，在文件操作、多媒体处理、数据存储等场景中发挥着关键作用。通过本文的介绍，相信大家对 Blob 技术有了更深入的理解。在实际开发中，合理使用 Blob 可以大大提升应用的性能和用户体验。

目录

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

更多推荐文章

查看全部
  • Stable Diffusion 核心生成参数详解
  • 深度解析 RAG 大模型知识冲突
  • Windows 环境下 OpenClaw 本地部署与飞书接入实战
  • 强干扰环境下光纤无人机通信模块技术解析
  • 国产大模型 KIMI 与文心一言、通义千问能力对比评测
  • 开源视觉大模型 GLM-4.6V-Flash-WEB 在内容审核中的应用探索
  • 基于 Astro 和 Claude Code 为 ShareLatex-CE 构建 GitHub Pages 落地页
  • Z-Image-Turbo 新手入门：从 0 开始使用 AI 绘画
  • OpenAI Python API 使用指南：基础功能与异步处理
  • OpenClaw + 飞书 Agent 构建 AI 自主模拟炒股系统实战
  • DPI 系统详解：从流量感知到业务理解的关键网络能力
  • Harness Engineering：给 AI 套上缰绳的工程学
  • SpringBoot 项目启动报错 HikariPool-1 池初始化异常排查
  • Qt Creator 接入外部 AI 大模型配置指南
  • C++ 基础语法入门
  • Linux OpenEuler 环境下 Milvus 在线与离线安装卸载及连接异常处理
  • 从前端到 DevOps：开发者必备 AI 工作流工具
  • 基于 Ollama 在本地电脑部署和运行大语言模型指南
  • Xinference 实测：Llama3-70B、Qwen2-VL 与 Whisper 并发
  • 开源 IPTV 播放器 iptvnator 功能与使用指南

相关免费在线工具

  • 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