前端axios post请求二进制数据流转换生成PDF文件空缺问题 ...

问题场景：

axios请求二进制数据转换生成PDF空缺问题，使用axios请求后端接口，后端返回的二进制流文件，需要转换成PDF，但是在postman中直接生存文件是可以打开的；

---

问题形貌：

请求后端接口 => 转换PDF文件 代码：

1. import axios from '@public/axios' // 引入封装的axios
3. // 请求方法如下
4. reqExcel: reqData =>
5. axios.get(`api/export`, reqData, { responseType: 'arraybuffer' }).then(res => res)
7. // 转换pdf
8. const blob = new Blob([res.data], { type: 'application/pdf' });
9. const url = window.URL.createObjectURL(blob);
10. 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

1. import axios from 'axios' // 引入原生的axios,不作封装处理
2. await axios({
3.       method: 'POST',
4.       url: `api/export`,
5.       params: { discountPrint },
6.       responseType: 'blob' // 必须更改responseType类型为 blob
7.     }).then(res => {
8.       data = res
9.     }).catch(err => {
10.       console.log(err)
11.     })
13. // 转换pdf
14. const blob = new Blob([res.data], { type: 'application/pdf' });
15. const url = window.URL.createObjectURL(blob);
16. window.open(url)

复制代码

至此，弹出出窗口打开的PDF文件为正常状态 问题办理！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。