(给前端大全加星标,提升前端技能)
作者:全栈成长之路 公号 / 山月行
作为一名前端,在工作中也会遇到很多有关二进制处理的需求,如 EXCEL 表格的导出,PDF 的生成,多个文件的打包,音频的处理。
从前后端整体上来说前端代表 UI 层,它的外在表现是 human readable
的,而服务端代表数据层,所表现出来的是 machine readable
。如果 EXCEL 以及 PDF 的处理交由服务端处理,服务端免不了要做一层格式化的逻辑处理,以便与前端保持一致。一来增加了复杂度,二来容易造成前端与服务器端的数据不一致。此时为了减少复杂度,工作量有可能都尽可能在浏览器端完成。
本篇文章总结了浏览器端的二进制以及有关数据之间的转化,如 ArrayBuffer
,TypedArray
,Blob
,DataURL
,ObjectURL
,Text
之间的互相转换。为了更好的理解与方便以后的查询,特意做了一张图做总结。
![354f39c03fe53197afdaf98e9733f840.png](https://i-blog.csdnimg.cn/blog_migrate/46cbeb5982910e601a1bb0490fdc563f.jpeg)
二进制相关数据类型
在介绍常见的二进制数据处理之前,先简单介绍下几种二进制相关的数据类型
ArrayBuffer && TypedArray
TypedArray
是 ES6+ 新增的描述二进制数据的类数组数据结构。但它本身不可以被实例化,甚至无法访问,你可以把它理解为 Abstract Class
或者 Interface
。而基于 TypedArray
,有如下数据类型:
Uint8Array
Uint
及Unsigned Int
代表数组的每一项是无符号整型8
代表数据的每一项占 8 个比特位,即一个字节Int8Array
Uint16Array
Int16Array
- ...
通过 Uint8Array
,即可知道 Uint16Array
,Int8Array
所代表的意义。
const array = new Int32Array([1, 2, 3])
// .length 代表数组的大小
// 3
array.length
// .btyeLength 代表数据所占字节大小
// 12
array.byteLength
ArrayBuffer
代表二进制数据结构,「并且只读」,需要转化为 TypedArray
进行写操作。
const array = new Int16Array([1, 2, 3])
// TypedArray -> ArrayBuffer
array.buffer
// ArrayBuffer -> TypedArray
new Int16Array(array.buffer)