进制转换 pdf_浏览器中的二进制以及相关转换
从前后端整体上来说前端代表 UI 层,它的外在表现是 human readable
的,而服务端代表数据层,所表现出来的是 machine readable
。如果 EXCEL 以及 PDF 的处理交由服务端处理,服务端免不了要做一层格式化的逻辑处理,以便与前端保持一致。一来增加了复杂度,二来容易造成前端与服务器端的数据不一致。此时为了减少复杂度,工作量有可能都尽可能在浏览器端完成。
本篇文章总结了浏览器端的二进制以及有关数据之间的转化,如 ArrayBuffer
,TypedArray
,Blob
,DataURL
,ObjectURL
,Text
之间的互相转换。为了更好的理解与方便以后的查询,特意做了一张图做总结。
二进制相关数据类型
在介绍常见的二进制数据处理之前,先简单介绍下几种二进制相关的数据类型
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)// buffer.length 代表数据所占用字节大小
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.sizeconst 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
应该是大家比较熟悉的,但大多使用环境比较单一,一般用来请求 json 数据。其实, 「它也可以设置返回数据格式为 Blob
或者 ArrayBuffer
。」
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 => {// trueconsole.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]
来上传文件。
<input type="file" id="input">
当上传成功后,可以通过 document.getElementById('input').files[0]
获取到上传的文件,即一个 File 对象,它是 Blob 的子类,可以通过 FileReader
或者 Response
获取文件内容。
数据输出
或者叫数据展示或者下载,数据经二进制处理后可以由 url 表示,然后通过 image, video 等元素引用或者直接下载。
Data URL
Data URL 即 Data As URL。所以, 「如果资源过大,地址便会很长。」 使用以下形式表示。
data:[<mediatype>][;base64],<data>
先来一个 hello, world。把以下地址粘入地址栏,会访问到 hello, world
data:text/html,<h1>Hello%2C%20World!</h1>
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 = namea.rel = 'noopener'a.href = url// 触发模拟点击a.dispatchEvent(new MouseEvent('click'))// 或者 a.click(
}
二进制数据转换
以上是二进制数据间的转换图,有一些转换可以直接通过 API,有些则需要代码,以下贴几种常见转换的代码
String to TypedArray
根据上图,由字符串到 TypedArray 的转换,可以通过 「String -> Blob -> ArrayBuffer -> TypedArray」 的途径。
关于代码中的函数 readBlob
可以回翻环节 数据类型 - 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
,可以参考以上环节 数据输出-下载[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')
Reference
[1]
FileSaver: https://github.com/eligrey/FileSaver.js
[2]
数据类型 - Blob: https://shanyue.tech/post/binary-in-frontend/#blob
[3]
数据输出-下载: https://shanyue.tech/post/binary-in-frontend/#%E4%B8%8B%E8%BD%BD
进制转换 pdf_浏览器中的二进制以及相关转换相关推荐
- java 2进制字符串移位,Java中处理二进制移位
第一,Java不做数据溢出校验,这样我们可以忽略溢出异常:第二,Java普及率比较高,就像是python或shell,几乎人人都会呐. 确定一些位运算符:| 按位或 1001 | 1010 = 101 ...
- 计算机编码中进制的区别,计算机中的进制和编码(转载)
转载至 http://www.cnblogs.com/resn/p/5775378.html 古时候,人们是如何来传递消息的? 当年周幽王为博褒妃一笑,不顾众臣反对,竟数次无故点燃边关告急用的烽火台, ...
- Java005-二进制、八进制、十进制和十六进制之间的转换
Java005-二进制.八进制.十进制和十六进制之间的转换 一.Java中的进制转换 1)在Java中各进制的输入 (1)二进制输入,需要在开头加0B或0b,如0B1101. (2)八进制输入,需要在 ...
- 三进制 四进制计算机原理,基因编码为何选择了“四进制”,而不是计算机系统的“二进制”?...
计算机已经成功的证明,"二进制"是一种简洁又高效的编码方案(且与物理硬件相得益彰),它可以传递和映射任意复杂度的信息. 但基因编码,绝大部分却使用了4种碱基(DNA是ATCG,RN ...
- 中文和拼音的相关转换
关于中文和拼音的相关转换, 代码如下, 对于使用Swift的coder,可以bridge一下 #define HANZI_START 19968 #define HANZI_COUNT 20902st ...
- 将字符串转为16进制数_C语言中的进制互转与数值和字符串互转的混搭玩法
点击上方公众号名称关注,获得更多内容 ✎ 编 者 悟 语 很多事根本就没有那么多的前提可言,想做事,就不要把先决条件看得过重. 文 章 导 读 今天给小伙伴们介绍下了下进制转换和字符串与数值互转的方法 ...
- c语言以16进制输出大写字母,C语言二进制、八进制、十六进制整数书写和输出...
文章目录 一.二进制.八进制.十六进制整数的书写 1.二进制 2.八进制 3.十六进制 4.需要注意的坑 二.二进制.八进制.十六进制整数的输出 三.获取视频教程 四.版权声明 整数是我们生活中常用的 ...
- c语言10进制转2进制字符串,C语言十进制转二进制——实现和思考
问题描述: 实现一个函数:能使十进制数转为二进制数 代码实现: 实际上可以利用C语言中的itoa函数 [itoa函数是C/C++的非标准函数,不保证被所有编译器正常使用] 具体用法:char * it ...
- 计算机一级中的进制,计算机一级课程中介绍的不同进制数转换方法之数学原理.doc...
本 科 生 毕 业 论 文(设 计) 2011 届 论文(设计)题目: 计算机一级课程中介绍的不同进制数转换 目 录 一.摘要····································· ...
- 在计算机中常用的进制有哪些,计算机中常用的数的进制主要有.doc
<计算机中常用的数的进制主要有.doc>由会员分享,可在线阅读,更多相关<计算机中常用的数的进制主要有.doc(4页珍藏版)>请在文库网上搜索. 1..计算机中常用的数的进制主 ...
最新文章
- (android实战)Service 生命周期和使用注意项
- C语言volatile关键字的作用
- vue设置多选框默认勾选_Vue实现全选和反选即Vue复选框增加全选功能
- JavaScript 获取 当前日期和三十天以前日期
- linux 下备份MySQL数据库 并删除7天前的备份数据
- 一套房钱就可以做一个品牌的电子烟,让罗永浩们再赚一波快钱?
- vue 兼容IE报错解决方案
- 讨论String与string的区别.
- 聊一下《技术力量-一线技术团队成功启示录》
- wps文件一点打印就关闭打印机服务器,WPS一打印就程序无响应怎么处理?
- 微软,招 Java 了!
- 共享打印机客户端报错因为文件共享不安全需要SMB1协议
- 信息系统开发方法-生命周期法
- 神经网络与深度学习(二) pytorch入门——张量
- html页面怎样打印二分之一,打印二分之一a4纸 大小的纸张 Word该如何设置?
- Java 输出杨辉三角
- Qt多个平台安装与维护
- Failed to download https://chrome-infra-packages.appspot.com/dl/flutter/web/canvaskit_bundle/+/8MSYG
- MySQL:递减/递减更新一列字段值
- Java字符串常量池