需求背景：今天实现一个文件下载功能，因为要对下载者进行token鉴权，而token是携带在header里面的，所以一般的方法例如用a标签，或者el-link这些都满足不了要求，只能通过ajax的方式实现，搞了一个小时，现在把前后端代码贴出来。
后端代码，后端代码没有什么特殊的
@PostMapping("/downloadFile")
public void downloadFile(@Valid @RequestBody FileDownload fileDownload, HttpServletResponse response) throws IOException {
if (!fileDownload.getFileUrl().startsWith(FileConstants.RESOURCE_PREFIX)){
throw new BaseException("File does not exist");
}
String fileUrl = fileDownload.getFileUrl().replace(FileConstants.RESOURCE_PREFIX,FileConstants.PROFILE);
File file = new File(fileUrl);
if (!file.exists()){
throw new BaseException("File does not exist");
}
ServletOutputStream out = null;
try {
byte[] fileArray = FileUtils.readFileToByteArray(file);
out = response.getOutputStream();
out.write(fileArray);
}catch (Exception e){
if (out != null){
out.close();
}
}
}
主要是前端的代码，主要就是在这儿吃了亏
downloadFile (row) {
this.$axios({
url: '/help/downloadFile',
method: 'post',
responseType: 'blob',
data: {
fileUrl: row.fileUrl,
fileName: row.fileName
}
})
.then(res => {
if (!res.data) {
return
}
let url = window.URL.createObjectURL(new Blob([res.data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', row.fileName)
document.body.appendChild(link)
link.click()
// 释放URL对象所占资源
window.URL.revokeObjectURL(url)
// 用完即删
document.body.removeChild(link)
})
.catch(res => {})
},
代码不多，但在网上搜索了一下午，就这个简单好用
