vue中后端做Excel导出功能返回数据流前端如何做处理

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

先看下效果图：

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

vue中后端做Excel导出功能返回数据流前端如何做处理

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

vue中后端做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

vue中后端做Excel导出功能返回数据流前端如何做处理

相关推荐