后端接口返回文件流,前端下载(java+vue)

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

?? 内容速览

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

后端获取

controller层

复制代码
/**
 * 根据附件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("读取文件流结束。。。。。。。");
    } 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对象
  })
},
相关推荐
持久的棒棒君1 小时前
npm安装electron下载太慢,导致报错
前端·electron·npm
有梦想的骇客2 小时前
书籍“之“字形打印矩阵(8)0609
java·算法·矩阵
yours_Gabriel2 小时前
【java面试】微服务篇
java·微服务·中间件·面试·kafka·rabbitmq
渔舟唱晚@3 小时前
大模型数据流处理实战:Vue+NDJSON的Markdown安全渲染架构
vue.js·大模型·数据流
crary,记忆3 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz4 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
hashiqimiya4 小时前
android studio中修改java逻辑对应配置的xml文件
xml·java·android studio
SamHou04 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干4 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
liuzhenghua664 小时前
Python任务调度模型
java·运维·python