blob

=============== > Blob 是二进制流吗

 

是的，Blob（Binary Large Object）对象表示一个不可变的、原始数据的类文件对象。Blob 表示的数据不一定是一个 JavaScript 原生格式。Blob 对象可以表示文本、图像、视频等任何形式的二进制数据。

主要特点

1. 不可变：一旦创建，Blob 对象的内容不能被修改。
2. 类文件对象：Blob 对象的行为类似于文件对象，可以用来表示文件或其他二进制数据。
3. 类型：Blob 对象有一个 type 属性，表示数据的 MIME 类型（如 text/plain、image/png 等）。
4. 大小：Blob 对象有一个 size 属性，表示数据的字节大小。

创建 Blob 对象

你可以使用 Blob 构造函数来创建一个 Blob 对象。构造函数接受两个参数：

• parts：一个数组，包含 ArrayBuffer、ArrayBufferView（如 Uint8Array）、Blob 或字符串。
• options：一个可选的对象，可以指定 type 和 endings 属性。

示例

javascript

深色版本

// 创建一个包含文本的 Blob 对象
const text = "Hello, World!";
const blob = new Blob([text], { type: 'text/plain' });

console.log(blob.size); // 输出 13
console.log(blob.type); // 输出 text/plain

使用 Blob 对象

生成 URL

你可以使用 URL.createObjectURL 方法生成一个指向 Blob 对象的 URL，这个 URL 可以用于各种场景，比如创建一个 <a> 标签来下载文件，或者创建一个 Worker。

javascript

深色版本

const blob = new Blob(["Hello, World!"], { type: 'text/plain' });
const blobUrl = URL.createObjectURL(blob);

// 创建一个 <a> 标签来下载文件
const a = document.createElement('a');
a.href = blobUrl;
a.download = 'hello.txt';
a.textContent = 'Download';
document.body.appendChild(a);

// 创建一个 Worker
const worker = new Worker(blobUrl);
worker.onmessage = function(e) {
    console.log('Message received from worker:', e.data);
};

读取 Blob 内容

你可以使用 FileReader 对象来读取 Blob 的内容。

javascript

深色版本

const blob = new Blob(["Hello, World!"], { type: 'text/plain' });

const reader = new FileReader();
reader.onload = function(e) {
    console.log(e.target.result); // 输出 Hello, World!
};
reader.readAsText(blob);

总结

Blob 对象主要用于处理二进制数据，它可以表示各种类型的文件数据。通过 Blob 对象，你可以生成 URL、创建文件下载链接、创建 Worker，以及读取文件内容。这些功能使得 Blob 在处理文件和二进制数据时非常有用。