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

你可能感兴趣的