vue导出文件问题

Awbeci
  • 2.7k

如下图所示 ,
问题:导出了两份,其实打开内容是一样的
image.png

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)
            })
        });
    }
回复
阅读 620
2 个回答
✓ 已被采纳

问题原因找到了,
为什么下载两次?
因为我是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)
            })
        });
    }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏