前端接收后端传回来的文件流相关操作
前端接受后端返回的文件流并下载到本地相关操作以及避坑
·
前端接收后端传回来的文件流相关操作
先来看后端部分:
/*业务层
*/
@AutoWired
FinalFileRepository finalFileRepository;
@Override
public void downloadFile(Integer id,HttpServletRequest request,HttpServletResponse response){
//获取实体类实例
FinalFile finalFile = finalFileRepository.getById(id);
//获取文件位置
String file_path = finalFile.getLocation();
//打开文件
File file = new File(file_path);
//读取文件流并将其添加到response的输出流中,同时应当设置响应的Header字段
try(InputStream inputStream = new FileInputStream(file);
OutputStream outputStream = response.getOutputStream();//获取response的输出流对象
){
//设置ContentType字段告知浏览器返回内容类型
response.setContentType("application/octet-stream");
//设置Header字段
response.setHeader("Content-Disposition","attachment;filename="+
URLEncoder.encode(finalFile.getFIleName(),"utf-8"));
//下面这行代码必须加,否则前端获取不到Content-Disposition字段,即无法获取文件名
response.setHeader("Access-Control-Expose-Headers","Content-Disposition");
//将读取的文件流复制到response的输出流中
IOUtils.copy(inputStream,outputStream);
//刷新输出流
outputStream.flush();
//关闭输出流
outputStream.close();
}catch(Exception e){
e.printStackTrace();
}
}
/*控制器
*/
@AutoWired
FinalFileService finalFileService;
@CrossOrigin//如果是前后端分离项目,则应当处理跨域问题
@GetMapping(value = "/download")//应当设置为Get请求,Post请求只能在 postman测试中能下载,在前端下载不了(坑)
public void download(Integer id,HttpServletRequest request,HttpServletResponse response){
finalFileService.downloadFile(id,request,response);
}
再来看前端部分:
//前端利用的是axios来请求,而后将响应的输出流封装到Blob对象中
methods:{
handleDownload(file_id){
this.$axios
.get('/download?id='+file_id,{responseType:'blob'})//responseType应当添加
.then(res=>{
//获取文件名
const fileName = res.headers["content-disposition"].split(";")[1].split("=")[1]
const blob = new Blob([res.data]);
//创建一个a标签并设置href属性,之后模拟人为点击下载文件
let link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;//设置下载文件名
link.click();//模拟点击
//释放资源并删除创建的a标签
URL.revokeObjectURL(link.href);
document.body.removeChild(link);
})
}
}
寄语:你所热爱的,就是你的生活~
(点个免费的赞再走吧,谢谢您嘞😘😘😘)
更多推荐
已为社区贡献2条内容
所有评论(0)