# Blob 参考

URL: https://caijiao.org/reference/web-api/blob
Source: docs/reference/web-api/blob.md
Description: Blob Reference，整理 Blob 构造函数、type、size、text、arrayBuffer、对象 URL、文件下载演示和常见错误。

Blob 表示不可变的原始数据，常用于生成文本文件、下载 JSON、处理图片数据、从接口响应中读取二进制内容。

## 语法

```js
const blob = new Blob(parts, options);
```

## 参数

- `parts`：数组，内容可以是字符串、ArrayBuffer、TypedArray、Blob 等。
- `options.type`：可选，表示 MIME 类型，例如 `text/plain;charset=utf-8`。

## 常用属性与方法

| 属性或方法 | 说明 |
| --- | --- |
| `blob.size` | 字节大小 |
| `blob.type` | MIME 类型 |
| `blob.text()` | 读取为字符串 |
| `blob.arrayBuffer()` | 读取为 ArrayBuffer |
| `blob.slice()` | 截取一部分数据 |

## 示例

```js
const content = JSON.stringify({ name: "caijiao" }, null, 2);
const blob = new Blob([content], { type: "application/json;charset=utf-8" });
const url = URL.createObjectURL(blob);

const a = document.createElement("a");
a.href = url;
a.download = "data.json";
a.click();

URL.revokeObjectURL(url);
```

## 可运行演示

[在线代码演示](/web-api/demos/blob-download.html)

## 常见错误

- 创建对象 URL 后不释放，长时间运行的页面可能积累内存占用。
- MIME 类型写错，下载后的文件可能无法被目标程序正确识别。
- 大文件不适合全部拼进内存再创建 Blob，应考虑流式处理或服务端下载。

## 相关内容

- [Web API Reference](/reference/web-api/)
- [URL API](/reference/web-api/url)
- [FormData](/reference/web-api/formdata)
- [JavaScript 如何触发文件下载](/how-to/javascript/download-file-js)
- [浏览器 JavaScript 如何读取本地文件](/how-to/javascript/read-file-browser)
- [MDN Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob)