根据后端获取到的文档流，下载打开显示“无法打开文件”

长相思979

已于 2024-04-12 14:16:15 修改

阅读量327

点赞数 2

文章标签：前端 javascript vue.js

于 2024-04-12 14:15:46 首次发布

本文链接：https://blog.csdn.net/weixin_63896561/article/details/137679177

版权

原代码：

download(item) {
            this.axios.get(api.download+'/'+item.name).then(res => {
                // console.log(res)
                let bob = new Blob([res.data],{type: 'application/vnd.ms-excel'})
                const link = document.createElement('a');
                let url = window.URL.createObjectURL(bob);
                link.download = '下载文件.xlsx';
                link.href = url;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            })
        },

参考文章：javascript下载纯文本、下载Excel，前端解析Excel，下载的Excel无法打开问题解决_前端下载文件流无法打开-CSDN博客

修改：axios请求时需要设置响应类型

download(item) {
            this.axios.get(api.download+'/'+item.name,{responseType:"blob"}).then(res => {
                // console.log(res)
                let bob = new Blob([res.data],{type: 'application/vnd.ms-excel'})
                const link = document.createElement('a');
                let url = window.URL.createObjectURL(bob);
                link.download = '下载文件.xlsx';
                link.href = url;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            })
        },