前端axios请求二进制数据流转换生成PDF文件空白问题(终极解决方案)

2023-05-25,,

本文章共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文件为正常状态 问题解决!

结尾

好了,以上就是本篇全部文章内容啦。

如果遇到问题或者有其他意见可以在下方评论区贴出!

码字不易。如果觉得本篇文章对你有帮助的话,希望你可以留言点赞支持一下,非常感谢~

只要有树叶飞舞的地方,火就会燃烧,火的影子照耀着村子,新的树叶就会发芽。

前端axios请求二进制数据流转换生成PDF文件空白问题(终极解决方案)的相关教程结束。

《前端axios请求二进制数据流转换生成PDF文件空白问题(终极解决方案).doc》

下载本文的Word格式文档,以方便收藏与打印。