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