本文章共1570字,預計閱讀時間1 - 3分鐘。
問題場景:
axios請求二進位制資料轉換生成PDF空白問題,使用axios請求後端介面,後端返回的二進位制流檔案,需要轉換成PDF,但是在postman中直接儲存檔案是可以開啟的;問題描述:
請求後端介面 => 轉換PDF檔案 程式碼:
import axios from '@public/axios' // 引入封裝的axios
// 請求方法如下
reqExcel: reqData =>
axios.get(`api/export`, reqData, { responseType: 'arraybuffer' }).then(res => res)
// 轉換pdf
const blob = new Blob([res.data], { type: 'application/pdf' });
const url = window.URL.createObjectURL(blob);
window.open(url)
彈出出視窗開啟轉換之後的PDF檔案為空白狀態 !
原因分析:
問題分析1:responseType型別
一般二進位制引數有兩種:
- "arraybuffer" => response 是一個包含二進位制資料的 JavaScript ArrayBuffer。
- "blob" => response 是一個包含二進位制資料的 Blob 物件。
這裡要根據後端返回的資料型別,更換引數!
問題分析2: axios封裝問題
更換了各種responseType的型別,使用了各種PDF生產方法,開啟的一直是空白狀態,網上找了各種教程,一直沒有好的解決方法。
這時候我懷疑起了axios的問題,如上程式碼,在使用axios之前,我們對其進行了各種錯誤的攔截、請求頭加入token、判斷錯誤碼等等一系列的操作,然後引入axios。
沒錯,答案就在這裡,如果你究極一切方法都沒有解決PDF空白問題,那麼一定是你axios封裝的一些問題,這時候你直接 import axios from 'axios'
// 引入原生的axios,不作封裝處理 ,
問題迎刃而解!
解決方案:
使用原生的axios,不做封裝處理,更改responseType型別為 blob
import axios from 'axios' // 引入原生的axios,不作封裝處理
await axios({
method: 'GET',
headers: { token },
url: `api/export`,
params: { discountPrint },
responseType: 'blob' // 更改responseType型別為 blob
}).then(res => {
data = res
}).catch(err => {
console.log(err)
})
// 轉換pdf
const blob = new Blob([res.data], { type: 'application/pdf' });
const url = window.URL.createObjectURL(blob);
window.open(url)
至此,彈出出視窗開啟的PDF檔案為正常狀態 問題解決!
結尾
好了,以上就是本篇全部文章內容啦。
如果遇到問題或者有其他意見可以在下方評論區貼出!
碼字不易。如果覺得本篇文章對你有幫助的話,希望你可以留言點贊支援一下,非常感謝~
只要有樹葉飛舞的地方,火就會燃燒,火的影子照耀著村子,新的樹葉就會發芽。