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