前端vue excel导出数据流

 项目中有一个导出功能的实现，用博客来记录一下。因为需求对导出表格的数据格式和样式有要求，所以这个导出功能放到后端来做，而且后端返回的是数据流，所以需要处理成想要的表格并导出来。

先看下效果图：

页面效果：

 

点击 导出Excel 调用导出接口成功了：

 

后台返回的数据流，一堆看不懂的乱码：

 

接下来要处理这堆乱码，因为用到的地方多，所以在util.js文件里封装了一个公共方法并抛出：

虽然vue里有封装好的请求接口的方法，但这里要单独用axios，所以先在util.js里引入axios

import axios from 'axios'

 

1. // 导出Excel公用方法

2. export function exportMethod(data) {

3. axios({

4. method: data.method,

5. url: `${data.url}${data.params ? '?' + data.params : ''}`,

6. responseType: 'blob'

7. }).then((res) => {

8. const link = document.createElement('a')

9. let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})

10. link.style.display = 'none'

11. link.href = URL.createObjectURL(blob)

12.  

13. // link.download = res.headers['content-disposition'] //下载后文件名

14. link.download = data.fileName //下载的文件名

15. document.body.appendChild(link)

16. link.click()

17. document.body.removeChild(link)

18. }).catch(error => {

19. this.$Notice.error({

20. title: '错误',

21. desc: '网络连接错误'

22. })

23. console.log(error)

24. })

25. }

在使用的页面中引入方法：

import { exportMethod } from '@/libs/util'

在methods导出的方法里，调用共用导出方法。

注意：因为我们后台用的是get方法，所以传递get请求并且拼接要传的参数，如果是post请求，就把传递的get改成post，传递数据改成传data数据对象，params去掉，公共方法里把url上拼接的参数也去掉，直接 接收url路径即可，再接收一个data就行了

1. // 导出会诊接诊量统计表

2. exportDepReceRank() {

3. let myObj = {

4. method: 'get',

5. url: exportDepartmentRankUrl,

6. fileName: 'XX医院—各科室会诊接诊量统计',

7. params: `startDate=${changeDate(this.dateValue[0])}&endDate=${changeDate(this.dateValue[1])}`

8. }

9. exportMethod(myObj)

10. },

最后成功导出Excel的效果图：