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

本文主要是介绍前台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-buttontype="primary"@click="uploadFile"><i class="el-icon-upload el-icon--right"></i>导出</el-button>

methods中，必须写两个方法：

 //下载指定路径的文件uploadFileExcel() {var self = thisthis.$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：

  //导出APIimportAPI(index,row) {console.log(row)this.apiGroup = row;var self = thisconsole.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);}

完毕

这篇关于前台Vue使用axios实现文件下载功能，巨坑，一个简单的下载用了一天多才弄出来 我服的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---