Vue中后端做Excel导出功能返回数据流前端的处理操作

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

先看下效果图:

页面效果:

B432BB71-DCC2-AEDC-EF0C-EF4C7D4F68D9.png

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

325C8537-4DB4-3134-92DE-E9B6BB3272D7.png

后台返回的数据流,一堆看不懂的乱码:

BEA2B20B-30C9-C4F3-CBAA-93D311FD69FA.png

接下来要处理这堆乱码,因为用到的地方多,所以在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的效果图:

CD4B56CB-7C23-BBF9-05FE-06D1BBC312CE.png

收藏 (0)
评论列表
正在载入评论列表...
我是有底线的