后端返回Excel文件文件流，前端如何解析下载

此处以post请求为例，需要将blob（二进制大对象）作为请求参数。具体代码如下：

axios({
		//此处使用代理方式导出文件，否则提示跨域
		url: import.meta.env.VITE_APP_API + 'xxx',//请求地址
		method: 'post',
		data,//需要传递的请求体
		responseType: 'blob',//关键
		headers: {
			'Content-Type': 'application/vnd.ms-excel',//类型修改为excel
			'Authorization': `Bearer ${token}`//如果报401无权限,记得看看这里有没有加Bearer
		}
    })

如果不加 responseType: 'blob' ,你将会看到一个神奇且凌乱的画面

 添加responseType: 'blob' 并且传参没有错误的状态下,应该会看到这个

 调试完成后就可以封装函数 下载excel文件了.直接上代码

axios({
		url: import.meta.env.VITE_APP_API + 'xxxx',
		method: 'post',
		data,
		responseType: 'blob',
		headers: {
			'Content-Type': 'application/vnd.ms-excel',
			'Authorization': `Bearer ${token}`
		}
	}).then((res) => {
		console.log(res)
		const link = document.createElement('a');  //创建一个a标签
		const blob = new Blob([res.data]);//这里res.data根据返回值来定的.data是blob对象
		link.style.display = 'none';
		link.href = URL.createObjectURL(blob);    //将后端返回的数据通过blob转换为一个地址
		//设置下载下来后文件的名字以及文件格式
		link.setAttribute(
			'download',
			`xxx.` + `xlsx`,  
		);
		document.body.appendChild(link);
		link.click();                            //下载该文件
		document.body.removeChild(link);
	})

注意:虽然我们下载成功,但是打开excel表格的时候有可能会遇见这种情况

 目前测试出来的原因可能有以下几种:

1. 后端返回code不为0(即请求成功但业务失败,根据后端提示的错误修改即可)

2.文件后缀名拼写错误,仔细检查一下

3.请求token过期

4.当前接口未返回数据,excel为空表.

以上仅为经验之谈,欢迎各位指正.