前端axios請求二進制數據流轉換生成PDF文件空白問題（終極解決方案）

本文章共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文件為正常狀態 問題解決！

結尾

好了，以上就是本篇全部文章內容啦。

如果遇到問題或者有其他意見可以在下方評論區貼出！

碼字不易。如果覺得本篇文章對你有幫助的話，希望你可以留言點贊支持一下，非常感謝~

只要有樹葉飛舞的地方，火就會燃燒,火的影子照耀着村子，新的樹葉就會發芽。