JSBlob：流式二進制大對象

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應用提供幫助。