后端接口返回文件流，前端下载（java+vue）

     各位小伙伴们大家好，欢迎来到这个小扎扎的专栏 总结 | 提效 | 拓展，在这个系列专栏中记录了博主在学习期间总结的大块知识点，以及日常工作中碰到的各种技术点 ┗|｀O′|┛

   
   
    本身前端是可以直接通过文件的url对文件进行下载的，但是在进行业务对接开发的时候，前端没有获取文件下载的权限，以是需要后端获取文件之后把得到的文件流传给前端，前端通过文件流下载文件。
后端获取

controller层

1. /**
2. * 根据附件id返回文件流
3. */
4. @ApiOperation(value = "根据附件id返回文件流", notes = "传入附件id")
5. @PostMapping(value = "/getByFileId")
6. public void getByFileId(HttpServletResponse response, @RequestBody FileIdReq fileIdReq) {
7.     matterBasicInfoService.getByFileId(response, fileIdReq.getFileId());
8. }

复制代码

service接口

1. void getByFileId(HttpServletResponse response, String fileId);

复制代码

实现类

1. @Override
2. public void getByFileId(HttpServletResponse response, String fileId) {
3.     // 获取附件详情  主要是要附件的url和名字
4.     MatterAttachmentFormOdr matterAttachmentFormOdr = matterAttachmentFormOdrService.getById(fileId);
5.     log.error("matterAttachmentFormOdr-----:{}", matterAttachmentFormOdr);
7.     if (BeanUtil.isEmpty(matterAttachmentFormOdr) || StrUtil.isBlank(matterAttachmentFormOdr.getUrl())) {
8.         throw new BusinessValidationException("该文件不存在");
9.     }
10.    
11.     // 附件url替换  如果url可以直接下载的话可以跳过这一步
12.     String filePath = matterAttachmentFormOdr.getUrl().replace("......", "......");
13.     log.error("filePath-----:{}", filePath);
15.     ServletOutputStream out = null;
16.     InputStream inputStream = null;
17.     try {
18.         //与服务器建立连接
19.         URL url = new URL(filePath);
20.         URLConnection conn = url.openConnection();
21.         inputStream = conn.getInputStream();
22.         try {
23.             //1.设置文件ContentType类型，这样设置，会自动判断下载文件类型
24.             response.setContentType("multipart/form-data");
25.             response.addHeader("Content-Disposition", "attachment; filename=" + matterAttachmentFormOdr.getName());
26.         } catch (Exception e){
27.             e.printStackTrace();
28.         }
29.         out = response.getOutputStream();
30.         // 读取文件流
31.         int len = 0;
32.         byte[] buffer = new byte[1024 * 10];
33.         while ((len = inputStream.read(buffer)) != -1) {
34.             out.write(buffer, 0, len);
35.         }
36.         log.error("读取文件流结束。。。。。。。");
37.     } catch (Exception e){
38.         e.printStackTrace();
39.     } finally {
40.         try {
41.             if (out != null) {
42.                 out.flush();
43.                 out.close();
44.             }
45.             if (inputStream != null) {
46.                 inputStream.close();
47.             }
48.         } catch (IOException e) {
49.             throw new RuntimeException(e);
50.         }
51.     }
52. }

复制代码

前端下载

1. handleGetFile(file) {
2.   const type = file.url.split('.')['1']
3.   if (!file.id) {
4.     this.$Message.warning('文件下载失败！')
5.     return
6.   }
8.   // 定义参数
9.   const data = {
10.     data: {
11.       fileId: file.id,
12.     },
13.     access_token: xxxxxx,
14.   }
16.   // 调用后端接口
17.   this.$store.dispatch('comprehensive/getByFileId', data).then(res => {
18.     this.$Message.loading(`正在下载${file.name}数据`)
19.     const applicationType = this.getFileTypeMime(type)
20.     const blob = new Blob([res.data], { type: applicationType })
21.     const link = document.createElement('a')
22.    
23.     const href = window.URL.createObjectURL(blob) // 创建下载的链接
24.     link.href = href
25.     link.download = `${file.name}` // 下载后文件名
26.     document.body.appendChild(link)
27.     link.click() // 点击下载
28.     document.body.removeChild(link) // 下载完成移除元素
29.     window.URL.revokeObjectURL(href) // 释放掉blob对象
30.   })
31. },

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。