vue使用axios实现下载文件功能

项目采用前后端分离策略搭建，后端使用SpringBoot+SpringMVC，前端使用vue+elementui，采用restful风格进行数据传输，此篇文章不介绍后端代码

首先封装导出数据api

新建一个文件，文件中放的是所有的接口信息，api写法和其他的并无异处，只是多了一个responseType

import http from '@/axios';

/**
 * 查询作业队上报的表单列表
 * @param params 查询条件
 * @return
 */
export function findTeamReportList(params){
  return http.get(`/form/report`,{params:params});
}

/**
 * 导出表单数据
 * @param formType 表单类型
 * @param formId 表单id
 */
export function exportFormData(formType,formId){
  return http.get(`/form/export/${formType}/${formId}`,{responseType:'blob'});
}

写一个解析返回数据的方法

由于项目中很多地方都用到了下载文件功能，所以将方法写成一个公共的，使用时候调用就可以了，在main.js添加方法

Vue.prototype.getFileFromResponse = function (response) {
    try {
        let disposition = response.headers['content-disposition'];//获取content-disposition
        let fileInfo = disposition ? disposition.substr(disposition.indexOf('filename')) : '';
        let fileName= fileInfo?fileInfo.split('=')[1]:'';
        if(!fileName.substr(fileName.indexOf('.'))) {
            this.$notify({
                title: '提示',
                message: '暂时没有您想要的数据',
                type: 'error'
            });
            return;
        }
        //处理二进制流文件
        var blob = new Blob([response.data], {type: 'application/x-download;charset=utf-8'}); 
        var downloadElement = document.createElement('a');
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = decodeURIComponent(fileName.replace(/\"/g,'')); //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
    }catch (e) {
        throw e;
    }
};

点击按钮导出数据

点击导出按钮后，调用方法导出数据，下面代码中的formAPI是引用的最开始的api文件

//导出表单数据
      exportForm(row) {
        let formType=row.type;
        let formTypeFormatted=formType==='parkType-1' ? 'culture' : formType === 'parkType-2' ? 'visitor' : 'flower';

        formAPI.exportFormData(formTypeFormatted,row.id).then(response => {
          this.getFileFromResponse(response);
        }).catch(err => {
          this.$notify({
            title: this.$t('msg.title'),
            message: this.getErr(err),
            type: 'error',
            duration: 2000
          })
        })
      }

通过api方法发送到后台后，后台处理完毕将返回的response信息通过方法处理后就会开始下载文件

可以看到二进制流文件已经正确返回，这时文件也已经下载完毕

该方法出现的问题

这种方法虽然可以实现带登录信息下载文件的需求，但是当使用手机浏览器进行下载的时候会出现无法下载的情况，目前本人并不知道如何解决手机下载的问题，好在我们项目没有手机浏览下载的要求，如果有此需求的coder请酌情使用，如果有解决方法也请留言告知一下