SpringBoot+VUE实现文件下载功能
记录一下在项目组开发的一个小功能(作为一个开发小白,在项目组前后台都要写,真的是太难了@(--------)@,进入正题,写的不好还望指教,参考网上的一些内容)效果:需求:点击保存本地按钮,下载对应的文件(此项目是音视频,其他类型文件未测试)后端接口:我是直接在controller层写的。在请求头里,设置了文件保存地址为文件名,因为后缀有.mp4,所以弹框自动识别为视频文件。@RequestMap
·
记录一下在项目组开发的一个小功能(作为一个开发小白,在项目组前后台都要写,真的是太难了@(--------)@ ,进入正题,写的不好还望指教,参考网上的一些内容)
效果:
前提:项目需要下载的文件存放在服务器上,有地址。
需求:点击保存本地按钮,下载对应的文件(此项目是音视频,其他类型文件未测试)
后端接口:
我是直接在controller层写的。
在请求头里,设置了文件保存地址为文件名,因为后缀有.mp4,所以弹框自动识别为视频文件。
@RequestMapping(value = "/netDownLoadNet",method = RequestMethod.GET,produces = {"application/json;charset=UTF-8"})
public void netDownLoadNet(String netAddress,HttpServletResponse response,HttpServletRequest request) throws Exception {
URL url = new URL(netAddress);
URLConnection conn = url.openConnection();
InputStream inputStream = conn.getInputStream();
response.reset();
response.setContentType(conn.getContentType());
response.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有
// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1, http://locahost"); // 允许白名单IP
// 响应类型
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
// 预检请求的结果缓存60分钟
response.setHeader("Access-Control-Max-Age", "3600");
// 响应头设置
//response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
response.setHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(netAddress, "UTF-8"));
response.addHeader("Content-Length",""+conn.getContentLength());
response.setContentType("application/octet-stream");
response.setContentType("application/json;charset=utf-8");
System.out.println("size:"+conn.getContentLength());
byte[] buffer = new byte[409600];
int len;
OutputStream outputStream = response.getOutputStream();
while ((len = inputStream.read(buffer)) > 0) {
outputStream.write(buffer, 0, len);
}
inputStream.close();
}
}
前端页面调用:
使用了a标签,简单方便,达到了需求。使用了:href属性 在函数里给其赋值。
<template>
<div>
<a :href="filePath" v-if="hasAuthority" download="" type="button"
style="text-decoration:none;font-size:20px;color: #409EFF;margin-left: 10px" @click="downloadFile(scope.row)" >
保存本地</a>
</div>
</template>
<script>
export default {
data() {
return {
filePath:''
}
},
methods: {
//文件保存到本地
downloadFile(row){
let url = `${this.$http.defaults.baseURL}//fileManagement/netDownLoadNet?netAddress=${row.fileUrl}`;
this.filePath = url;
},
}
}
</script>
就这样实现的。
更多推荐
已为社区贡献1条内容
所有评论(0)