Base64 字符串转换PDF文件

PS：在请求方法的 options 中加上 responseType: 'blob'

this.httpClient.get('', {
  headers：{...},
    params: {...},
  responseType: 'blob',
  ...
})

先上码

const code = response.data.replace(/[\n\r]/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类型的文件对象
// Tips: 若后端传回的文件流已经是blob类型的，则只执行下面这行代码即可，然后根据需求选择是用插件还是直接下载
const blobURL = window.URL.createObjectURL(blobItem)    // 将文件对象转换成URL链接

使用 pdfjs 插件打开

window.open(`/pdfjs/web/viewer.html?file=${blobURL}`)    // (代码在vue项目中)通过pdfjs插件打开转换好的URL链接

直接下载

let a = document.createElement('a');
a.href = blobURL;
a.download = `...文件名`;    // 若后端没指定文件类型，需在此添加文件后缀
a.click();
a.remove();

那么，开始详细拆解

知识点1. Base64 编码与解码

参考：https://www.runoob.com/jsref/...

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...

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

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

知识点3. JavaScript charCodeAt( ) 方法

参考：https://www.runoob.com/jsref/...

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

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

知识点4. Blob 对象

MDN：https://developer.mozilla.org...

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

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

知识点5. URL > createObjectURL( )

MDN：https://developer.mozilla.org...

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

createObjectURL( )

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

知识点6. Window.open( )

MDN：https://developer.mozilla.org...

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