JSBlob：流式二进制大对象

发布时间：2023-05-17

JSBlob是流式二进制大对象的缩写，是HTML5引入的一个新API，可以用于处理二进制数据。通过JSBlob，我们可以将二进制数据转换为Blob对象，然后进行上传、下载、预览等操作。

一、JSBlob转Excel

JSBlob可以将数据转换为Excel文件，可以用于数据导出功能的实现。

const data = [
  ['name', 'age', 'gender'],
  ['Tom', 18, 'male'],
  ['Lucy', 20, 'female'],
  ['Jack', 21, 'male']
]
const wb = XLSX.utils.book_new()
const ws = XLSX.utils.aoa_to_sheet(data)
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
const wbout = XLSX.write(wb, { type: 'blob', bookType: 'xlsx' })
saveAs(wbout, 'data.xlsx')

二、JSBlob数据类型

JSBlob支持以下数据类型：

  • ArrayBuffer：二进制数据，可以通过DataView进行解析
  • Blob：二进制对象
  • File：文件对象
  • MediaSource：音视频数据
  • ReadableStream：可读流数据

三、JSBlob转字符串

JSBlob可以将二进制数据转换为字符串，可以用于处理后台返回的二进制数据。

const fileReader = new FileReader()
fileReader.readAsText(blob)
fileReader.onload = e => {
  const result = e.target.result
  console.log(result)
}

四、JSBlob上传和预览

JSBlob可以通过XMLHttpRequest进行上传，也可以通过URL.createObjectURL创建预览链接。

const xhr = new XMLHttpRequest()
xhr.open('POST', 'upload')
xhr.onload = () => {
  console.log('上传成功')
}
xhr.send(blob)
const url = URL.createObjectURL(blob)
const image = document.createElement('img')
image.src = url
document.body.appendChild(image)

五、JSBlob转换成字符串

JSBlob可以将二进制数据转换为字符串，可以用于数据加密、传输等场景。

const fileReader = new FileReader()
fileReader.readAsDataURL(blob)
fileReader.onload = e => {
  const result = e.target.result
  console.log(result)
}

JSBlob是一个非常强大的API，可以通过它实现很多二进制数据处理相关的功能。掌握JSBlob可以提高代码的效率和质量，为开发高质量的Web应用提供帮助。

推荐文章