1、封装一个downFile文件
在这里插入代码片/**
* 下载文件
* @param {String} path - 文件地址
* @param {String} name - 文件名,eg: test.png
*/
export const downloadFileBlob = (path, name) => {
const xhr = new XMLHttpRequest();
xhr.open('get', path);
xhr.responseType = 'blob';
xhr.send();
xhr.onload = function () {
if (this.status === 200 || this.status === 304) {
// 如果是IE10及以上,不支持download属性,采用msSaveOrOpenBlob方法,但是IE10以下也不支持 msSaveOrOpenBlob
if ('msSaveOrOpenBlob' in navigator) {
navigator.msSaveOrOpenBlob(this.response, name);
return;
}
const url = URL.createObjectURL(this.response);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = name;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
};
}
2、在封装axios文件引入
import { downloadFileBlob } from '@/util/downFile';
export const downloadReportPDF = (row,name) => {
return new Promise((res, rej) => {
request({
url: 'url',
method: 'get',
params: row,
timeout:30000,
responseType: 'blob',
}).then(({data})=>{
const url = URL.createObjectURL(data);
downloadFileBlob(url,data.filename||name)
res(data, url);
}).catch(({ data }) => {
rej(data);
})
})
}
3、在页面使用请求接口
//可传.pdf、.zip、.xlsx
downloadReportPDF({'参数'}, '文件名称'+".pdf").then((res) => {
}).catch(err=>{
});