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