vue中axios实现下载excel表格功能(下载后端返回的文件流)

阳光穿透心脏的1/2处 2023-03-04 11:25 214阅读 0赞

之前遇到一个问题：就是做下载excel表格功能时，不知道怎么把后端返回的文件流转化成表格，上网看了很多方法，可能自己没有找对吧，确实可以实现下载，但是下载的表格内容是乱码，个人感觉应该是实现下载函数方法写错了，现在实现了，先记录一下，为了方便日后自己的学习。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]  
上图就是调取后端接口成功后返回的文件流；

接下来我们就一步一步实现下载excel表格的功能，写这个主要是为了自己的学习和记录，如果对你有帮助，我也会很开心，如果有什么不对的，也可以帮我指出错误。

### 第一步：先写接口函数（以我的代码为例） ###

`responseType` 表示服务器响应的数据类型，可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’，默认是‘json’

export function exportAudit(data) {
        return axios({
            url: '/dataassets/asset/audit/export',
            method: 'get',
            params: data,
            responseType: 'blob',
        })
    }

### 第二步：写个下载文件的函数方法 ###

// 下载文件
    downloadFile(res, fileName) {
        let blob = new Blob([res.data]); //res为从后台返回的数据
        if (!fileName) {
            fileName = res.headers['content-disposition'].split('filename=').pop();
        }
        if ('msSaveOrOpenBlob' in navigator) {
            window.navigator.msSaveOrOpenBlob(blob, fileName);
        } else {
            const elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href);
            document.body.removeChild(elink);
        }
    }

### 第三步：组件中调用接口实现下载 ###

//导出
      export() {
    		    var info={  //需要传入的参数
    		                pageNum: this.pageConfig.currentPage,
    		                pageSize: this.pageConfig.pageSize,
    		                verifyId: this.form.verifyId,
    		                keyWord: this.form.name
    		            }
                exportAudit(info).then((res) => {
                    //日期转换成字符串
                    let date = dateToStr(new Date());
                    // downloadFile是实现表格的下载函数方法
                    downloadFile(res, 'XX报表-' + date + '.xls');
                }).catch(() => {})
         },

这样做就可以实现文件的下载，如果你还没有解决，可以试试！  
![在这里插入图片描述][20200803162228246.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20230208/6c80512e0e6e4a988378af472b1ba2f3.png
[20200803162228246.png_pic_center]: /images/20230208/2757df2e6fa24adaa1169c9d84d3e246.png