项目中有一个导出功能的实现，用博客来记录一下。因为需求对导出表格的数据格式和样式有要求，所以这个导出功能放到后端来做，而且后端返回的是数据流，所以需要处理成想要的表格并导出来。
先看下效果图：
点击 导出Excel 调用导出接口成功了：
后台返回的数据流，一堆看不懂的乱码：
接下来要处理这堆乱码，因为用到的地方多，所以在util.js文件里封装了一个公共方法并抛出：
虽然vue里有封装好的请求接口的方法，但这里要单独用axios，所以先在util.js里引入axios
import axios from 'axios'
// 导出Excel公用方法 export function exportMethod(data) { axios({ method: data.method, url: `${data.url}${data.params ? '?' + data.params : ''}`, responseType: 'blob' }).then((res) => { const link = document.createElement('a') let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'}) link.style.display = 'none' link.href = URL.createObjectURL(blob) // link.download = res.headers['content-disposition'] //下载后文件名 link.download = data.fileName //下载的文件名 document.body.appendChild(link) link.click() document.body.removeChild(link) }).catch(error => { this.$Notice.error({ title: '错误', desc: '网络连接错误' }) console.log(error) }) } 在使用的页面中引入方法：
import { exportMethod } from '@/libs/util' 在methods导出的方法里，调用共用导出方法。
注意：因为我们后台用的是get方法，所以传递get请求并且拼接要传的参数，如果是post请求，就把传递的get改成post，传递数据改成传data数据对象，params去掉，公共方法里把url上拼接的参数也去掉，直接 接收url路径即可，再接收一个data就行了
// 导出会诊接诊量统计表 exportDepReceRank() { let myObj = { method: 'get', url: exportDepartmentRankUrl, fileName: 'XX医院—各科室会诊接诊量统计', params: `startDate=${changeDate(this.dateValue[0])}&endDate=${changeDate(this.dateValue[1])}` } exportMethod(myObj) }, 最后成功导出Excel的效果图：
原文链接：https://blog.csdn.net/lianwenxiu/article/details/94573394
