JavaScript Blob

关注

原创最新推荐文章于 2026-09-09 14:50:37 发布 715 阅读 AI 写同款· GEO 优化 ›

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)