vue3 二进制流导出excel乱码问题

最新推荐文章于 2024-08-28 12:55:13 发布

lynachen

最新推荐文章于 2024-08-28 12:55:13 发布

阅读量1.5k

点赞数 1

文章标签：前端 vue excel

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Julylyna/article/details/130881535

版权

文章描述了在使用Vue3和Axios请求后端数据并以二进制流形式下载Excel文件时遇到的乱码问题。解决方案是通过设置Axios的responseType为blob，然后处理blob对象来正确创建和下载Excel文件。

摘要由CSDN通过智能技术生成

1. 乱码结果

在导出excel数据的时候遇到了乱码问题，excel乱码截图如下：

控制台后端数据如下：

至此，后端已经获取到了数据，所以可以判断接口没有问题。

2.问题描述：

具体问题描述如下：

1.前端用vue3+axios请求后端数据；

2.请求的数据为二进制流测形式，需打包成excel文件下载下来；

3.下载的文件为乱码（如上图）。

3.解决方案

首先在 axios 公共 js 文件里请求里面加一个配置 responseType= 'blob'

    post(url, data, options) {
		let axiosOption	= {
			method: 'post',
            url,
            data: qs.stringify(data),
		};
		if(options) {  //options为可选项，所以要加一个判断
		  	if(options.responseType == 'blob'){
		      axiosOption.responseType = 'blob'
		  	}
		}
        return new Promise((resolve, reject) => {
        	console.log(axiosOption)
            axios(axiosOption)
                .then(res => {
                    resolve(res.data)
                })
                .catch(err => {
                    reject(err)
                });
        })
    },

其次，在调用接口的时候，加上 responseType= 'blob'

$axios.post('XXXX', params,{ responseType: 'blob' })
	.then((res) => {
		//console.log('返回数据',res)
		let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
		// 指定下载路径
		let url = window.URL.createObjectURL(blob);
		console.log(url)
		let link = document.createElement("a");
		link.style.display = "none";				
		link.href = url;				
		link.setAttribute("download", "文件名.xls");//文件名后缀				
		document.body.appendChild(link);				
		link.click();				
		document.body.removeChild(link);//下载完成移除元素				
		window.URL.revokeObjectURL(url);//释放掉blob对象
	})
	.catch((err) => {
		console.log(err);
	});

over~