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

亦凉 2021-09-13 17:38 184阅读 0赞

# 前台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);
        }

完毕