原因: 使用iframe src属性,不能监听到什么时候后台计算完成开始下载,故使用ajax请求,可以设置loading,确定请求结束时间,代码如下:
function axiosDownload(src) {
axios({
method: 'get',
url: src,
responseType: 'blob',
}).then((res) => {
loadingInstance.close();
if (res.status === 200) {
const blob = new Blob([res.data], { type: 'application/octet-stream' });
const disposition = decodeURI(res.headers['content-disposition']); // 获取filename
const fileName = disposition.substring(disposition.indexOf('filename=') + 10, disposition.length - 1);
const Link = document.createElement('a');
const href = window.URL.createObjectURL(blob); // 创建下载的链接
Link.href = href;
Link.download = fileName; // 下载后文件名
document.body.appendChild(Link);
Link.click(); // 点击下载
document.body.removeChild(Link); // 下载完成移除元素
window.URL.revokeObjectURL(href); // 释放掉blob对象
} else {
Message.error({
message: '下载文件失败',
showClose: true,
});
}
}).catch((err) => {
loadingInstance.close();
Message.error({
message: `${err}`,
showClose: true,
});
});
}
设置 reponseType:'blob';为二进制流,如果设置了没有生气,可以在request 请求信息中查看是否设置生效