springboot+vue下载文件(后端使用response的输出流给前端)
springboot+vue下载文件(后端使用response的输出流给前端)
·
springboot+vue下载文件
1.后端代码(controller)
1.1 controller
@GetMapping("/downloadNodeDeployFile/{nodeId}")
public void downloadNodeDeployFile(@PathVariable("nodeId") String nodeId, HttpServletResponse response) {
nodeService.downloadNodeDeployFile(nodeId, response);
}
1.2 serviceImpl
public void downloadNodeDeployFile(String nodeId, HttpServletResponse response) {
InputStream deployInputStream = null;
ServletOutputStream outputStream = null;
byte[] buf = new byte[1024 * 5];
try {
deployInputStream = resourceLoader.getClassLoader().getResourceAsStream("filePath");
outputStream = response.getOutputStream();
while (deployInputStream.read(buf) > 0) {
String s = new String(buf);
//修改文件信息,动态修改文件
if (s.contains("test")) {
s = s.replace("test", "testtest");
}
//去除前后空字符
s=s.trim();
//打印下修改后文件
log.info("修改的文件为:\n {}", s);
outputStream.write(s.getBytes(), 0, s.length());
}
//强制将流刷新到response中
outputStream.flush();
} catch (IOException io) {
log.error("部署文件流传输出错", io);
} finally {
try {
outputStream.close();
deployInputStream.close();
} catch (Exception e) {
log.error("流关闭时出错", e);
}
}
}
2.前端代码(vue3)
const handleDownload = (activation, nodeId) => {
axios.get(`your url`,{
responseType: 'blob',//设置返回类型
//设置token
headers: {
Authorization: store.getters['user/accessToken'],
},
},).then((res)=>{
console.log(res)
//创建一个a标签元素
const link=document.createElement('a');
try {
//获取到blob
let blob = new Blob([res.data],{type: "application/octet-stream"});
console.log(blob);
let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1];//文件名,中文无法解析的时候会显示 _(下划线),生产环境获取不到
link.style.display='none';
// 兼容不同浏览器的URL对象
const url = window.URL || window.webkitURL || window.moxURL;
link.href=url.createObjectURL(blob);
link.setAttribute('download', _fileName.substring(_fileName.lastIndexOf('_')+1));
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
url.revokeObjectURL(link.href);//销毁url对象
}catch (e) {
console.log('下载的文件出错',e)
}
}).catch(()=>{
})
};
3.知识点
3.1 vue中的Bolb
更多推荐
已为社区贡献4条内容
所有评论(0)