乐趣区

关于javascript:Base64-字符串转换PDF文件

jiezi

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）。

退出移动版