JavaScript Blob
Blob（Binary Large Object）对象是JavaScript中的一个用于表示不可变的、原始数据的类。Blob 表示的数据不一定是JavaScript原生的，它可以是图片、音频、视频、文件等二进制数据。Blob 对象提供了一种处理这种二进制数据的方式，而不需要将其转换为字符串，这样可以减少数据转换时的性能损耗和可能的数据损坏问题。
1. 创建Blog
纯文本
new Blob(['hello world'], {type: 'text/plain'})
JSON
new Blob([JSON.stringify({name: 'yimt', age: 123})], {type: 'application/json'})
字节数组
const uint8Array = new Uint8Array(3);
for (let i = 0; i < uint8Array.length; i++) {
uint8Array[i] = 0x61 + i
}
const blob = new Blob([uint8Array], {type: 'application/octet-stream'})
2. 读取Blob
使用FileReader类
// 创建测试blob
const blob = new Blob(['hello world'], {type: 'text/plain'})
// 创建FileReader
const reader = new FileReader()
// 监视加载完成事件
reader.onloadend = function (e) {
console.log(e.target.result)
}
// 指定读取对象
reader.readAsText(blob)
使用text方法（读取字符串）
const blob = new Blob(['hello world'], {type: 'text/plain'})
console.log(await blob.text())
使用arrayBuffer方法（读取字节）
// 创建Uint8Array
const uint8Array = new Uint8Array(3)
// 初始化数据为abc
for (let i = 0; i < uint8Array.length; i++) {
uint8Array[i] = 0x61 + i
}
// 创建Blob
const blob = new Blob([uint8Array], {type: 'application/octet-stream'})
// 读取字节
const arrayBuffer = await blob.arrayBuffer()
// 字节转字符串
const decoder = new TextDecoder('UTF-8')
const msg = decoder.decode(arrayBuffer)
console.log(msg) // abc
3. 下载
// 创建测试blob
const blob = new Blob(['hello world'], {type: 'text/plain'})
// 创建一个指向这个Blob的URL
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = 'example.txt'
a.click()
// 释放创建的URL对象
URL.revokeObjectURL(url)