摘要：前端中的二進(jìn)制以及相關(guān)操作與轉(zhuǎn)換最近工作中遇到了很多有關(guān)二進(jìn)制的處理，如的生成，多個(gè)的打包，音頻的拼接。數(shù)據(jù)輸出或者叫數(shù)據(jù)展示或者下載，數(shù)據(jù)經(jīng)二進(jìn)制處理后可以由表示，然后通過等元素引用或者直接下載。

最近工作中遇到了很多有關(guān)二進(jìn)制的處理，如PDF的生成，多個(gè)PDF的打包，音頻的拼接。為了數(shù)據(jù)的一致性，以及減少與后端通信的復(fù)雜度，工作量都在瀏覽器端。

瀏覽器，或者前端更多處理的是 View 層，即 UI = f(state)，狀態(tài)至界面的轉(zhuǎn)化。但是也有很多關(guān)于二進(jìn)制的處理，如

下載 Excel

文檔生成 PDF

對(duì)多個(gè)文件打包下載

圖片的亂碼問題

本篇文章總結(jié)了瀏覽器端的二進(jìn)制以及有關(guān)數(shù)據(jù)之間的轉(zhuǎn)化，如 ArrayBuffer，TypedArray，Blob，DataURL，ObjectURL，Text 之間的互相轉(zhuǎn)換。為了更好的理解與方便以后的查詢，特意做了一張圖做總結(jié)。

原文鏈接見 http://shanyue.tech/post/binary-in-frontend/

在此之前，首先簡(jiǎn)單介紹下幾種相關(guān)的數(shù)據(jù)類型，更多文檔請(qǐng)參考 MDN

TypedArray 是 ES6+ 新增的描述二進(jìn)制數(shù)據(jù)的類數(shù)組數(shù)據(jù)結(jié)構(gòu)。但它本身不可以被實(shí)例化，甚至無法訪問，你可以把它理解為 Abstract Class 或者 Interface。而基于 TypedArray，有如下數(shù)據(jù)類型。

Uint8Array
Uint 代表數(shù)組的每一項(xiàng)是無符號(hào)整型
8 代表數(shù)據(jù)的每一項(xiàng)占 8 個(gè)比特位，即一個(gè)字節(jié)

Int8Array

Uint8Array

Int16Array

...

const array = new Int8Array([1, 2, 3])

// .length 代表數(shù)據(jù)大小
// 3
array.length

// .btyeLength 代表數(shù)據(jù)所占字節(jié)大小
array.byteLength

ArrayBuffer 代表二進(jìn)制數(shù)據(jù)結(jié)構(gòu)，只讀。需要轉(zhuǎn)化為 TypedArray 進(jìn)行操作。

const array = new Int16Array([1, 2, 3])

// TypedArray -> ArrayBuffer
array.buffer

// ArrayBuffer -> TypedArray
new Int16Array(array.buffer)

// buffer.length 代表數(shù)據(jù)所占用字節(jié)大小
array.buffer.length === array.byteLength

TypedArray 沒有像數(shù)組那樣的 Array.prototype.concat 方法用來連接多個(gè) TypedArray。不過它提供了 TypedArray.prototype.set 可以用來間接連接字符串

可以參考 MDN 文檔：https://developer.mozilla.org...

// 在位移 offset 位置放置 typedarray
typedarray.set(typedarray, offset)

原理就是先分配一塊空間足以容納需要連接的 TypedArray，然后逐一在對(duì)應(yīng)位置疊加

function concatenate(constructor, ...arrays) {
  let length = 0;
  for (let arr of arrays) {
    length += arr.length;
  }
  let result = new constructor(length);
  let offset = 0;
  for (let arr of arrays) {
    result.set(arr, offset);
    offset += arr.length;
  }
  return result;
}

concatenate(Uint8Array, new Uint8Array([1, 2, 3]), new Uint8Array([4, 5, 6]))

同時(shí)您還需要對(duì)資源的獲取有大致的了解，如 XHR，fetch，通過文件上傳。

Blob 是瀏覽器端的類文件對(duì)象。操作 Blob 需要使用數(shù)據(jù)類型 FileReader。

FileReader 有以下方法，可以把 Blob 轉(zhuǎn)化為其它數(shù)據(jù)

FileReader.prototype.readAsArrayBuffer

FileReader.prototype.readAsText

FileReader.prototype.readAsDataURL

FileReader.prototype.readAsBinaryString

const blob = new Blob("hello".split(""))

// 表示文件的大小
blob.size

const array = new Uint8Array([128, 128, 128])
const blob2 = new Blob([array])

function readBlob (blob, type) {
  return new Promise(resolve => {
    const reader = new FileReader()
    reader.onload = function (e) {
      resolve(e.target.result)  
    }
    reader.readAsArrayBuffer(blob)
  })
}

readBlob(blob, "DataURL").then(url => console.log(url))

數(shù)據(jù)輸入或者叫資源的請(qǐng)求可以分為以下兩種途徑

通過 url 地址請(qǐng)求網(wǎng)絡(luò)資源

通過文件上傳請(qǐng)求本地資源

fetch 應(yīng)該是大家比較熟悉的，但大多使用環(huán)境比較單一，一般用來請(qǐng)求 json 數(shù)據(jù)。其實(shí)， 它也可以設(shè)置返回?cái)?shù)據(jù)格式為 Blob 或者 ArrayBuffer。

fetch 返回一個(gè)包含 Response 對(duì)象的 Promise，Response 有以下方法

Response.prototype.arrayBuffer

Response.prototype.blob

Response.prototype.text

Response.prototype.json

詳情可以查看MDN文檔 https://developer.mozilla.org...

fetch("/api/ping").then(res => {
  // true
  console.log(res instanceof Response)
  // 最常見的使用
  return res.json()

  // 返回 Blob
  // return res.blob()

  // 返回 ArrayBuffer
  // return res.arrayBuffer()
})

另外，Response API 既可以可以使用 TypedArray，Blob，Text 作為輸入，又可以使用它們作為輸出。

這意味著關(guān)于這三種數(shù)據(jù)類型的轉(zhuǎn)換完全可以通過 Response

xhr 可以設(shè)置 responseType 接收合適的數(shù)據(jù)類型

const request = new XMLHttpRequest()
request.responseType = "arraybuffer"
request.responseType = "blob"

本地文件可以通過 input[type=file] 來上傳文件。

當(dāng)上傳成功后，可以通過 document.getElementById("input").files[0] 獲取到上傳的文件，即一個(gè) File 對(duì)象，它是 Blob 的子類，可以通過 FileReader 或者 Response 獲取文件內(nèi)容。

或者叫數(shù)據(jù)展示或者下載，數(shù)據(jù)經(jīng)二進(jìn)制處理后可以由 url 表示，然后通過 image, video 等元素引用或者直接下載。

Data URL 即 Data As URL。所以， 如果資源過大，地址便會(huì)很長(zhǎng)。 使用以下形式表示。

data:[][;base64],

先來一個(gè) hello, world。把以下地址粘入地址欄，會(huì)訪問到 hello, world

data:text/html,
Hello%2C%20World!

Base64 使用大小寫字母，數(shù)字，+ 和 / 64 個(gè)字符來編碼數(shù)據(jù)，所以稱為 Base64。經(jīng)編碼后，文本體積會(huì)變大 1/3

在瀏覽器中，可以使用 atob 和 btoa 編碼解碼數(shù)據(jù)。

// aGVsbG8=
btoa("hello")

可以使用瀏覽器新的API URL 對(duì)象生成一個(gè)地址來表示 Blob 數(shù)據(jù)。

// 粘貼生成的地址，可以訪問到 hello, world
// blob:http://host/27254c37-db7a-4f2f-8861-0cf9aec89a64
URL.createObjectURL(new Blob("hello, world".split("")))

data:application/octet-stream;base64,5bGx5pyI

資源的下載可以利用 FileSaver 。

這里也簡(jiǎn)單寫一個(gè)函數(shù)，用來下載一個(gè)鏈接

function download (url, name) {
  const a = document.createElement("a")
  a.download = name
  a.rel = "noopener"
  a.href = url
  // 觸發(fā)模擬點(diǎn)擊
  a.dispatchEvent(new MouseEvent("click"))
  // 或者 a.click(
}

以上是二進(jìn)制數(shù)據(jù)間的轉(zhuǎn)換圖，有一些轉(zhuǎn)換可以直接通過 API，有些則需要代碼，以下貼幾種常見轉(zhuǎn)換的代碼

根據(jù)上圖，由字符串到 TypedArray 的轉(zhuǎn)換，可以通過 String -> Blob -> ArrayBuffer -> TypedArray 的途徑。

關(guān)于代碼中的函數(shù) readBlob 可以回翻環(huán)節(jié) 數(shù)據(jù)類型 - Blob

const name = "山月"
const blob = new Blob(name.split(""))

readBlob(blob, "ArrayBuffer").then(buffer => new Uint8Array(buffer))

也可以通過 Response API 直接轉(zhuǎn)換 String -> ArrayBuffer -> TypedArray

const name = "山月"

new Response(name).arrayBuffer(buffer => new Uint8Array(buffer))

這上邊兩種方法都是直接通過 API 來轉(zhuǎn)化，如果你更像了解如何手動(dòng)轉(zhuǎn)換一個(gè)字符串和二進(jìn)制的 TypedArray

使用 enodeURIComponent 把字符串轉(zhuǎn)化為 utf8，再進(jìn)行構(gòu)造 TypedArray。

function stringToTypedArray(s) {
  const str = encodeURIComponent(s)
  const binstr = str.replace(/%([0-9A-F]{2})/g, (_, p1) => {
    return String.fromCharCode("0x" + p1)
  })
  return new Uint8Array(binstr.split("").map(x => x.charCodeAt(0)))
}

由以上整理的轉(zhuǎn)換圖得出途徑

本地上傳圖片 -> Blob -> Object URL

由以上整理的轉(zhuǎn)換圖得出途徑

fetch請(qǐng)求音頻資源 -> ArrayBuffer -> TypedArray -> 拼接成一個(gè) TypedArray -> ArrayBuffer -> Blob -> Object URL

json 視為字符串，由以上整理的轉(zhuǎn)換圖得出途徑

Text -> DataURL

除了使用 DataURL，還可以轉(zhuǎn)化為 Object URL 進(jìn)行下載。關(guān)于下載的函數(shù) download，可以參考以上環(huán)節(jié) 數(shù)據(jù)輸出-下載

Text -> Blob -> Object URL

可以把以下代碼直接粘貼到控制臺(tái)下載文件

const json = {
  a: 3,
  b: 4,
  c: 5
}
const str = JSON.stringify(json, null, 2)

const dataUrl = `data:,${str}`
const url = URL.createObjectURL(new Blob(str.split("")))

download(dataUrl, "demo.json")
download(url, "demo1.json")