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

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

先看下效果图：

页面效果：

 

点击 导出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的效果图：