pdf链接在浏览器中默认是无法直接下载的,会打开预览pdf的页面
解决:发送请求链接内容,链接返回流再进行下载。
// pdf下载
import axios from "axios";
const downloadFile = (url) => {
//url是pdf链接
axios
.get(url, {
responseType: "arraybuffer",
})
.then((res: any) => {
let fileName = '文件名'
download(res, fileName);
});
};
const download = (res, filename) => {
// 创建blob对象,解析流数据
const blob = new Blob([res.data]);
const a = document.createElement("a");
// 兼容webkix浏览器,处理webkit浏览器中href自动添加blob前缀,默认在浏览器打开而不是下载
const URL = window.URL || window.webkitURL;
// 根据解析后的blob对象创建URL 对象
const herf = URL.createObjectURL(blob);
// 下载链接
a.href = herf;
// 下载文件名,如果后端没有返回,可以自己写a.download = '文件.pdf'
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
// 在内存中移除URL 对象
window.URL.revokeObjectURL(herf);
};
前端axios请求二进制数据流转换生成PDF文件空白问题(终极解决方案)
axios请求二进制数据转换生成PDF空白问题,使用axios请求后端接口,后端返回的二进制流文件,需要转换成PDF,但是在postman中直接保存文件是可以打开的;
原因分析:
问题分析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文件为正常状态 问题解决!