关于vue前端axios调用后端接口下载excel文件

1.api文件夹中定义的下载接口
tpis:这里的responseType需要设置成blob

//点击导出，导出数据表格
export function exportTable(data,params){
	return axios({
		url:'/api/conversation/excel/export',
		method:"post",
		data:data,
		params:params,
		responseType:'blob',
		headers:{
			'Content-Type': 'application/json'
		},
	})
}

2.在需要导出表格的vue文件中使用

import {exportTable} from '../../utils/api.js'

3.methods方法中使用

exportTable(data,params).then(res=>{
	var blob = new Blob([res.data], {type: 'application/actet-stream;charset=utf-8'});
	var contentDisposition = res.headers['content-disposition'];  //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
	var patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
	var result = patt.exec(contentDisposition);
	var filename = result[1];
	var downloadElement = document.createElement('a');
	var href = window.URL.createObjectURL(blob); //创建下载的链接
	downloadElement.style.display = 'none';
	downloadElement.href = href;
	downloadElement.download =filename ; //下载后文件名
	document.body.appendChild(downloadElement);
	downloadElement.click(); //点击下载
	document.body.removeChild(downloadElement); //下载完成移除元素
	window.URL.revokeObjectURL(href); //释放掉blob对象
})

4.到这里我们就已经可以成功下载后端的excel表格了
原文链接