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)
4. 参考
- Blob
- FileReader
- TextDecoder