base64文件数据读取

Base64 字符串转换PDF文件

先上码

const code = response.data.replace(/[

]/g, '')	// 检查base64字符串是否符合base64编码
const raw = window.atob(code)	// base64解码
const rawLength = raw.length	// 获取base64解码后的文件流字符串
const uInt8Array = new Uint8Array(rawLength)		// 初始化一个Uint8Array数组 
for (let i = 0; i < rawLength; ++i) {	// 转换Uint8Array类型
    uInt8Array[i] = raw.charCodeAt(i)	// 将解码后的逐个字符转换成Unicode序号，放入Unit8Array数组
}
const blobItem = new Blob([uInt8Array], { type: 'application/pdf' })	// 通过Blob将Uint8Array数组转换成pdf类型的文件对象
const blobURL = window.URL.createObjectURL(blobItem)	// 将文件对象转换成URL链接
window.open(`pdfjs/web/viewer.html?file=${blobURL}`)	// (代码在vue项目中)通过pdfjs插件打开转换好的URL链接

那么，开始详细拆解

知识点1. Base64 编码与解码

参考：https://www.runoob.com/jsref/met-win-atob.html

1. base64编码

window.btoa();
const str = "TEST";
const enc = window.btoa(str);

该方法使用 "A-Z", "a-z", "0-9", "+", "/" 和 "=" 字符来编码字符串。

2. base64解码

window.atob();
console.log(window.atob(enc));	// "TEST"

知识点2. Uint8Array 类型数组

MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array

Uint8Array 数组类型表示一个8位无符号整型数组，创建时内容被初始化为0。
创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。

new Uint8Array(length); // 创建初始化为0的，包含length个元素的无符号整型数组

知识点3. JavaScript charCodeAt( ) 方法

参考：https://www.runoob.com/jsref/jsref-charcodeat.html

返回字符的 Unicode 编码，即 Unicode 值

const str = "HELLO WORLD";
const n = str.charCodeAt(0);
console.log(n);		// '72'

知识点4. Blob 对象

MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

简单来说就是把二进制、base64等字符串转换成文件对象，并提供多种方法调用。

非常庞大的内容，后面再深挖...

知识点5. URL > createObjectURL( )

MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/URL

URL 接口用于解析，构造，规范化和编码

createObjectURL( )

属静态方法，“返回一个DOMString ，包含一个唯一的blob链接（该链接协议为以blob:，后跟唯一标识浏览器中的对象的掩码）。”
此处使用的是将 Blob 的文件对象转换成 URL

知识点6. Window.open( )

MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open

创建一个新的浏览器窗口对象，如同使用文件菜单中的新窗口命令一样。strUrl 参数指定了该窗口将会打开的地址。如果strUrl 是一个空值，那么打开的窗口将会是带有默认工具栏的空白窗口（加载about:blank）。