问答

vue导出文件问题

作者:admin 2021-04-16 我要评论

如下图所示 , 问题:导出了两份,其实打开内容是一样的 let res = await visitorsApi.export(newparams); console.log('export res=', res); let blob = new Bl...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

如下图所示 ,
问题:导出了两份,其实打开内容是一样的
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)
            })
        });
    }
###

问题原因找到了,
为什么下载两次?
因为我是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)
            })
        });
    }

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器