后端接口返回文件流，前端下载（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);

实现类

@Overridepublic 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对象  })},