vue 实现下载并导出excel文件（下载后台返回的文件流）

最新推荐文章于 2024-10-30 16:31:31 发布

原创最新推荐文章于 2024-10-30 16:31:31 发布 · 5.9k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

在使用Vue进行开发时，遇到从后台获取的导出Excel接口返回乱码的问题。通过Postman测试，了解到需要处理返回的文件流来实现下载。以下是解决此问题的三个步骤：1.编写接口函数；2.实现下载文件的方法；3.在组件中调用接口进行文件下载。

刚接触vue没多久，最近开发中遇到请求后台导出excel表格的接口返回乱码，postman请求发现需要下载返回的文件流。按照下面的步骤就可以实现文件的下载导出。

步骤一：先写接口函数

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(() => {})
     },