作為一名前端，在工作中也會遇到很多有關二進制處理的需求，如 EXCEL 表格的導出，PDF 的生成，多個文件的打包，音頻的處理。

創(chuàng)新互聯堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網站設計、網站制作、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯網時代的龍山網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

從前后端整體上來說前端代表 UI 層，它的外在表現是 human readable 的，而服務端代表數據層，所表現出來的是 machine readable。如果 EXCEL 以及 PDF 的處理交由服務端處理，服務端免不了要做一層格式化的邏輯處理，以便與前端保持一致。一來增加了復雜度，二來容易造成前端與服務器端的數據不一致。此時為了減少復雜度，工作量有可能都盡可能在瀏覽器端完成。

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

二進制相互轉換圖

二進制相關數據類型

在介紹常見的二進制數據處理之前，先簡單介紹下幾種二進制相關的數據類型

ArrayBuffer && TypedArray

TypedArray 是 ES6+ 新增的描述二進制數據的類數組數據結構。但它本身不可以被實例化，甚至無法訪問，你可以把它理解為 Abstract Class 或者 Interface。而基于 TypedArray，有如下數據類型：

•  Uint8ArrayUint 及 Unsigned Int 代表數組的每一項是無符號整型8 代表數據的每一項占 8 個比特位，即一個字節(jié)
•  Int8Array
•  Uint16Array
•  Int16Array
•  ...

通過 Uint8Array，即可知道 Uint16Array，Int8Array 所代表的意義。

 
 
 
 

  
  
  
  
const array = new Int32Array([1, 2, 3]) 
  
  
  
  
// .length 代表數組的大小 
  
  
  
  
// 3 
  
  
  
  
array.length  
  
  
  
  
// .btyeLength 代表數據所占字節(jié)大小 
  
  
  
  
// 12 
  
  
  
  
array.byteLength
 
 
 
 

ArrayBuffer 代表二進制數據結構，「并且只讀」，需要轉化為 TypedArray 進行寫操作。

 
 
 
 

  
  
  
  
const array = new Int16Array([1, 2, 3]) 
  
  
  
  
// TypedArray -> ArrayBuffer 
  
  
  
  
array.buffer 
  
  
  
  
// ArrayBuffer -> TypedArray 
  
  
  
  
new Int16Array(array.buffer) 
  
  
  
  
// buffer.length 代表數據所占用字節(jié)大小 
  
  
  
  
array.buffer.length === array.byteLength
 
 
 
 

連接多個 TypedArray

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

        可以參考 MDN 文檔：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set 

 
 
 
 

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

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

 
 
 
 

  
  
  
  
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]))
 
 
 
 

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

Blob

Blob 是瀏覽器端的類文件對象。操作 Blob 需要使用數據類型 FileReader。

FileReader 有以下方法，可以把 Blob 轉化為其它數據

•  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))
 
 
 
 

數據輸入

數據輸入或者叫資源的請求可以分為以下兩種途徑

•  通過 url 地址請求網絡資源
•  通過文件上傳請求本地資源

fetch

fetch 應該是大家比較熟悉的，但大多使用環(huán)境比較單一，一般用來請求 json 數據。其實， 「它也可以設置返回數據格式為 Blob 或者 ArrayBuffer?！?/p>

fetch 返回一個包含 Response 對象的 Promise，Response 有以下方法

•  Response.prototype.arrayBuffer
•  Response.prototype.blob
•  Response.prototype.text
•  Response.prototype.json

        詳情可以查看 MDN 文檔 https://developer.mozilla.org/en-US/docs/Web/API/Response

 
 
 
 

  
  
  
  
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 作為輸入，又可以使用它們作為輸出。

「這意味著關于這三種數據類型的轉換完全可以通過 Response」

xhr

「xhr 可以設置 responseType 接收合適的數據類型」

 
 
 
 

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

File

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

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

數據輸出

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

Data URL

Data URL 即 Data As URL。所以， 「如果資源過大，地址便會很長。」 使用以下形式表示。

 
 
 
 

  
  
  
  
data:[][;base64],
 
 
 
 

先來一個 hello, world。把以下地址粘入地址欄，會訪問到 hello, world

 
 
 
 

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

Base64 編碼與解碼

Base64 使用大小寫字母，數字，+ 和 / 64 個字符來編碼數據，所以稱為 Base64。經編碼后，文本體積會變大 1/3

在瀏覽器中，可以使用 atob 和 btoa 編碼解碼數據。

 
 
 
 

  
  
  
  
// aGVsbG8= 
  
  
  
  
btoa('hello')
 
 
 
 

Object URL

可以使用瀏覽器新的 API URL 對象生成一個地址來表示 Blob 數據。

 
 
 
 

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

下載

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

資源的下載可以利用 FileSaver[1] 。

這里也簡單寫一個函數，用來下載一個鏈接

 
 
 
 

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

二進制數據轉換

二進制數據轉換

以上是二進制數據間的轉換圖，有一些轉換可以直接通過 API，有些則需要代碼，以下貼幾種常見轉換的代碼

String to TypedArray

根據上圖，由字符串到 TypedArray 的轉換，可以通過 「String -> Blob -> ArrayBuffer -> TypedArray」 的途徑。

關于代碼中的函數 readBlob 可以回翻環(huán)節(jié) 數據類型 - Blob[2]

 
 
 
 

  
  
  
  
const name = '山月' 
  
  
  
  
const blob = new Blob(name.split('')) 
  
  
  
  
readBlob(blob, 'ArrayBuffer').then(buffer => new Uint8Array(buffer))
 
 
 
 

也可以通過 Response API 直接轉換 「String -> ArrayBuffer -> TypedArray」

 
 
 
 

  
  
  
  
const name = '山月' 
  
  
  
  
new Response(name).arrayBuffer(buffer => new Uint8Array(buffer))
 
 
 
 

這上邊兩種方法都是直接通過 API 來轉化，如果你更像了解如何手動轉換一個字符串和二進制的 TypedArray

String to TypedArray 2

使用 enodeURIComponent 把字符串轉化為 utf8，再進行構造 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))) 
  
  
  
  
}
 
 
 
 

實踐

1. 如何上傳本地圖片并在網頁上展示

由以上整理的轉換圖得出途徑

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

2. 如何拼接兩個音頻文件

由以上整理的轉換圖得出途徑

fetch請求音頻資源 -> ArrayBuffer -> TypedArray -> 拼接成一個 TypedArray -> ArrayBuffer -> Blob -> Object URL

3. 如何把 json 數據轉化為 demo.json 并下載文件

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

Text -> DataURL

除了使用 DataURL，還可以轉化為 Object URL 進行下載。關于下載的函數 download，可以參考以上環(huán)節(jié) 數據輸出-下載[3]

Text -> Blob -> Object URL

可以把以下代碼直接粘貼到控制臺下載文件

 
 
 
 

  
  
  
  
const json = { 
  
  
  
  
  a: 3, 
  
  
  
  
  b: 4, 
  
  
  
  
  c: 5 
  
  
  
  
} 
  
  
  
  
const str = JSON.stringify(json, null, 2) 
  
  
  
  
// 方案一：Text -> DataURL 
  
  
  
  
const dataUrl = `data:,${str}` 
  
  
  
  
download(dataUrl, 'demo.json') 
  
  
  
  
// 方案二：Text -> Blob -> ObjectURL 
  
  
  
  
const url = URL.createObjectURL(new Blob(str.split(''))) 
  
  
  
  
download(url, 'demo1.json') 
 
 
 
 

網頁標題：誰說前端不需要懂二進制
當前URL：http://www.5511xx.com/article/coisspj.html