如下图所示 ,
问题:导出了两份,其实打开内容是一样的
let res = await visitorsApi.export(newparams);
console.log('export res=', res);
let blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'})
let link = document.createElement('a')
document.body.appendChild(link)
link.href = window.URL.createObjectURL(blob)
// 配置下载的文件名
link.download = "访客出入"
link.click();
URL.revokeObjectURL(link.href); // 释放URL 对象
document.body.removeChild(link); //释放标签
// 导出
export(params){
return new Promise((resolve) => {
axios
.post(`${audit}/accessTask/exportExcel`, params, {responseType: 'arraybuffer'}).then(res=>{
resolve(res)
})
});
}
###问题原因找到了,
为什么下载两次?
因为我是vue项目嵌入到iframe框架中,所以直接调用接口即可下载,可我又做了一次前端下载,所以下载了两次,但是单独的vue项目没这个问题,只有iframe有这个问题,大家注意一下吧!
文件名为什么乱码?
后台文件名格式设置有问题,改成UTF-8即可
解决办法:
注释前端下载,再把后台文件名格式设置成utf-8即可
let res = await visitorsApi.export(newparams);
// console.log('export res=', res);
// let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
// let url = window.URL.createObjectURL(blob)
// let link = document.createElement('a');
// link.href = url;
// link.download = "访客出入"
// document.body.appendChild(link)
// // 配置下载的文件名
// link.style.display = 'none';
// link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}))
// URL.revokeObjectURL(link.href); // 释放URL 对象
// document.body.removeChild(link); //释放标签
###其实你直接请求那个接口不就行了?还整这么复杂。
好了,不考虑你为什么要转一下,我们直接看问题,其实可以想到了,肯定是你数据没传对,才导致的问题。所以你看看network带的数据对吗?服务端确定收到数据了吗?还有你这个难道不应该是get嘛?
// 导出
export(params){
return new Promise((resolve) => {
axios
.post(`${audit}/accessTask/exportExcel`, params, {responseType: 'arraybuffer'}).then(res=>{
resolve(res)
})
});
}