博客 / 詳情

返回

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

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.