使用Vue和Spring Boot实现文件下载
程序员文章站
2022-04-12 22:45:52
使用Vue和Spring Boot实现文件下载推荐使用Vue和Spring Boot实现文件上传。前端这里介绍三种方式来实现文件下载，跨域问题在后端会进行处理，这个例子是下载MP4文件，我这里是直接使用HTML来写前端，如果用Vue来写，可能要防止mockjs对请求的responseType产生影响（mockjs会创建一个新的XMLHttpRequest对象，并且有着自己的原始配置。所以导致覆盖了axios的配置，如responseType等）。&l...
推荐：Vue学习汇总
使用Vue和Spring Boot实现文件下载
推荐
前端
这里介绍三种方式来实现文件下载，跨域问题在后端会进行处理，这个例子是下载MP4文件，我这里是直接使用HTML来写前端，如果用Vue来写，可能要防止mockjs对请求的responseType产生影响（mockjs会创建一个新的XMLHttpRequest对象，并且有着自己的原始配置。所以导致覆盖了axios的配置，如responseType等）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>download</title>
<script src="./js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="div">
<div class="download">
<a href="http://localhost:8081/file/download/VID_20200719_094121.mp4">download - a</a><br>
<button @click="downloadBnt">download - window</button><br>
<button @click="downloadReq">download - request</button>
</div>
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#div',
methods: {
downloadBnt(){
window.open("http://localhost:8081/file/download/VID_20200719_094121.mp4", '_blank');
},
downloadReq(){
axios.get('http://localhost:8081/file/download/VID_20200719_094121.mp4',
{responseType: 'blob'}
).then((res)=>{
console.log('文件下载成功');
const blob = new Blob([res.data]);
const fileName = "VID_20200719_094121.mp4";
//对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
//IE10以上支持blob，但是依然不支持download
if ('download' in document.createElement('a')) {
//支持a标签download的浏览器
const link = document.createElement('a');//创建a标签
link.download = fileName;//a标签添加属性
link.style.display = 'none';
link.href = URL.createObjectURL(blob);
document.body.appendChild(link);
link.click();//执行下载
URL.revokeObjectURL(link.href); //释放url
document.body.removeChild(link);//释放标签
} else {
navigator.msSaveBlob(blob, fileName);
}
}).catch((res)=>{
console.log('文件下载失败');
});
}
}
})
</script>
后端
@CrossOrigin注解用于解决跨域问题。
package com.kaven.system.controller;
import com.kaven.system.enums.ResponseEnum;
import com.kaven.system.vo.ResponseVo;
import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.junit.platform.commons.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import sun.misc.BASE64Encoder;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
@RestController
@RequestMapping("/file")
@CrossOrigin
public class FileController {
@GetMapping("/download/{path}")
public void download(@PathVariable("path") String path ,
HttpServletResponse response){
File file = new File("C:\\Users\\Kaven\\Desktop\\images\\" + path);
byte[] buffer = new byte[1024];
BufferedInputStream bis = null;
OutputStream os = null;
try {
//判断文件父目录是否存在
if (file.exists()) {
//设置返回文件信息
response.setContentType("application/octet-stream;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
os = response.getOutputStream();
bis = new BufferedInputStream(new FileInputStream(file));
while(bis.read(buffer) != -1){
os.write(buffer);
}
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if(bis != null) {
bis.close();
}
if(os != null) {
os.flush();
os.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
测试
第一种方法。
第二种方法。
第三种方法。
下载到桌面。
下载其他格式文件
前端改一下请求路径，下载png文件，后端不需要改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>download</title>
<script src="./js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="div">
<div class="download">
<a href="http://localhost:8081/file/download/kaven.top.png">download - a</a><br>
<button @click="downloadBnt">download - window</button><br>
<button @click="downloadReq">download - request</button>
</div>
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#div',
methods: {
downloadBnt(){
window.open("http://localhost:8081/file/download/kaven.top.png", '_blank');
},
downloadReq(){
axios.get('http://localhost:8081/file/download/kaven.top.png',
{responseType: 'blob'}
).then((res)=>{
console.log('文件下载成功');
const blob = new Blob([res.data]);
const fileName = "VID_20200719_094121.mp4";
//对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
//IE10以上支持blob，但是依然不支持download
if ('download' in document.createElement('a')) {
//支持a标签download的浏览器
const link = document.createElement('a');//创建a标签
link.download = fileName;//a标签添加属性
link.style.display = 'none';
link.href = URL.createObjectURL(blob);
document.body.appendChild(link);
link.click();//执行下载
URL.revokeObjectURL(link.href); //释放url
document.body.removeChild(link);//释放标签
} else {
navigator.msSaveBlob(blob, fileName);
}
}).catch((res)=>{
console.log('文件下载失败');
});
}
}
})
</script>
测试了视频、图片、Word、Excel这四种文件格式，都是可以正常下载。
其他文件格式就不测试了。
使用Vue和Spring Boot实现文件下载就介绍到这里。
写博客是博主记录自己的学习过程，如果有错误请指正，谢谢！
本文地址：https://blog.csdn.net/qq_37960603/article/details/109626803
下一篇： 大暑吃啥？看看每个地方的习惯有什么不同