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

灰太狼 2023-02-22 12:19 2阅读 0赞

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

先看下效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW53ZW54aXU_size_16_color_FFFFFF_t_70][]

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

![20190703164622271.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW53ZW54aXU_size_16_color_FFFFFF_t_70 1][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW53ZW54aXU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190703162810748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW53ZW54aXU=,size_16,color_FFFFFF,t_70
[20190703164622271.png]: https://img-blog.csdnimg.cn/20190703164622271.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW53ZW54aXU_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190703164710421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW53ZW54aXU=,size_16,color_FFFFFF,t_70