后端接口返回文件流，前端下载（java+vue）
扎哇太枣糕 2024-07-11 12:33:02 阅读 92
各位小伙伴们大家好，欢迎来到这个小扎扎的专栏 总结 | 提效 | 拓展，在这个系列专栏中记录了博主在学习期间总结的大块知识点，以及日常工作中遇到的各种技术点 ┗|｀O′|┛
🌆 内容速览
后端获取前端下载
本身前端是可以直接通过文件的url对文件进行下载的，但是在进行业务对接开发的时候，前端没有获取文件下载的权限，所以需要后端获取文件之后把获得的文件流传给前端，前端通过文件流下载文件。
后端获取
controller层
<code>/**
* 根据附件id返回文件流
*/
@ApiOperation(value = "根据附件id返回文件流", notes = "传入附件id")
@PostMapping(value = "/getByFileId")
public void getByFileId(HttpServletResponse response, @RequestBody FileIdReq fileIdReq) {
matterBasicInfoService.getByFileId(response, fileIdReq.getFileId());
}
service接口
void getByFileId(HttpServletResponse response, String fileId);
实现类
@Override
public void getByFileId(HttpServletResponse response, String fileId) {
// 获取附件详情 主要是要附件的url和名字
MatterAttachmentFormOdr matterAttachmentFormOdr = matterAttachmentFormOdrService.getById(fileId);
log.error("matterAttachmentFormOdr-----:{}", matterAttachmentFormOdr);
if (BeanUtil.isEmpty(matterAttachmentFormOdr) || StrUtil.isBlank(matterAttachmentFormOdr.getUrl())) {
throw new BusinessValidationException("该文件不存在");
}
// 附件url替换 如果url可以直接下载的话可以跳过这一步
String filePath = matterAttachmentFormOdr.getUrl().replace("......", "......");
log.error("filePath-----:{}", filePath);
ServletOutputStream out = null;
InputStream inputStream = null;
try {
//与服务器建立连接
URL url = new URL(filePath);
URLConnection conn = url.openConnection();
inputStream = conn.getInputStream();
try {
//1.设置文件ContentType类型，这样设置，会自动判断下载文件类型
response.setContentType("multipart/form-data");
response.addHeader("Content-Disposition", "attachment; filename=" + matterAttachmentFormOdr.getName());
} catch (Exception e){
e.printStackTrace();
}
out = response.getOutputStream();
// 读取文件流
int len = 0;
byte[] buffer = new byte[1024 * 10];
while ((len = inputStream.read(buffer)) != -1) {
out.write(buffer, 0, len);
}
log.error("读取文件流结束。。。。。。。");code>
} catch (Exception e){
e.printStackTrace();
} finally {
try {
if (out != null) {
out.flush();
out.close();
}
if (inputStream != null) {
inputStream.close();
}
} catch (IOException e) {
throw new RuntimeException(e);
}
}
}
前端下载
handleGetFile(file) {
const type = file.url.split('.')['1']
if (!file.id) {
this.$Message.warning('文件下载失败！')
return
}
// 定义参数
const data = {
data: {
fileId: file.id,
},
access_token: xxxxxx,
}
// 调用后端接口
this.$store.dispatch('comprehensive/getByFileId', data).then(res => {
this.$Message.loading(`正在下载${ file.name}数据`)
const applicationType = this.getFileTypeMime(type)
const blob = new Blob([res.data], { type: applicationType })
const link = document.createElement('a')
const href = window.URL.createObjectURL(blob) // 创建下载的链接
link.href = href
link.download = `${ file.name}` // 下载后文件名
document.body.appendChild(link)
link.click() // 点击下载
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(href) // 释放掉blob对象
})
},
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。