前台Vue使用axios实现文件下载功能，巨坑，一个简单的下载用了一天多才弄出来 我服

前台Vue使用axios实现文件下载功能，巨坑，一个简单的下载用了一天多才弄出来 我服

问题：
项目框架用的是springcloud+vue前后端分离的项目，登录用的是JWT，基于token的登录；然后header中存储token来实现登录
问题1：
网上很多方式都是通过这种方式来的，如果不需要获取header中信息的话，通过这种方式也是可以的。
通过： window.location.href="http://127.0.0.1:8088/server/invoice/downFile“；
登录会发现，一直提示登录失败，查看才知道这种方式，把header中的信息丢失了，所以token一直获取不到
问题2：
通过axios像普通的发送axios请求，发现下载没有任何反应，一直找不到原因。

纠结了一天半，终于解决了

后来是通过这种方式来实现的

1.普通的下载，已知下载路径和下载文件的：
div中：一个按钮

    <el-button
      type="primary"
      @click="uploadFile"><i class="el-icon-upload el-icon--right"></i>导出
    </el-button>

methods中，必须写两个方法：

 //下载指定路径的文件
    uploadFileExcel() {
     var self = this
      this.$axios({
        method: 'get',
        url: '/api/groupApi/group/importAPINew',
        responseType: 'blob'
      }).then(function (response) {
        console.log(response);
        self.downloadFile(response.data);
      })
    },
    downloadFile(data) {
      // 文件导出
      if (!data) {
        return
      }
      let url = window.URL.createObjectURL(new Blob([data]));
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      //文件名
      link.setAttribute('download', 'api_.yaml');
      document.body.appendChild(link);
      link.click()
    },

后台代码：

   @GetMapping("importAPINew")
    public void importAPINew(HttpServletResponse response, HttpServletRequest request) {
        String projectRealPath = null;
        try {
             //获取项目的相对路径
            projectRealPath = ResourceUtils.getURL("classpath:").getPath();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
        String newFilePath = projectRealPath + "/" +"api_2020-11-20_09_37_09.yaml";
        //调用下载方法即可
        FileDownLoadUtil.downloadFile(request,response,newFilePath,"api_2020-11-20_09_37_09.yaml");
    }

完毕
通过a标签的：
div：

 <el-link  type="primary" :underline="false"  @click="importAPI(scope.$index, scope.row)">API导出</el-link>

methods：

  //导出API
    importAPI(index,row) {
      console.log(row)
      this.apiGroup = row;
      var self = this
      console.log(this.apiGroup.groupId)
      this.$axios({
        method: 'get',
        url: '/api/groupApi/group/importAPI',
        params:  {groupId : row.groupId},
        responseType: 'blob'
      }).then(function (response) {
          console.log(response);
          self.downloadFile(response.data);
      })
    },
       downloadFile(data) {
      // 文件导出
      if (!data) {
        return
      }
      let url = window.URL.createObjectURL(new Blob([data]));
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', 'api_.yaml');
      document.body.appendChild(link);
      link.click()
    },

后台代码：

 @GetMapping("importAPI")
    public void importAPI(Integer  groupId, HttpServletResponse response, HttpServletRequest request) {
        //根据相应的规则下载即可 导出Excel，或者xml文件等 就和普通下载一样了
        groupService.importAPI(groupId,response,request);
    }

完毕