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

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

🌆内容速览

---

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

后端获取

controller层

/**
 * 根据附件id返回文件流
 */@ApiOperation(value ="根据附件id返回文件流", notes ="传入附件id")@PostMapping(value ="/getByFileId")publicvoidgetByFileId(HttpServletResponse response,@RequestBodyFileIdReq fileIdReq){
    matterBasicInfoService.getByFileId(response, fileIdReq.getFileId());}

service接口

voidgetByFileId(HttpServletResponse response,String fileId);

实现类

@OverridepublicvoidgetByFileId(HttpServletResponse response,String fileId){// 获取附件详情  主要是要附件的url和名字MatterAttachmentFormOdr matterAttachmentFormOdr = matterAttachmentFormOdrService.getById(fileId);
    log.error("matterAttachmentFormOdr-----:{}", matterAttachmentFormOdr);if(BeanUtil.isEmpty(matterAttachmentFormOdr)||StrUtil.isBlank(matterAttachmentFormOdr.getUrl())){thrownewBusinessValidationException("该文件不存在");}// 附件url替换  如果url可以直接下载的话可以跳过这一步String filePath = matterAttachmentFormOdr.getUrl().replace("......","......");
    log.error("filePath-----:{}", filePath);ServletOutputStream out =null;InputStream inputStream =null;try{//与服务器建立连接URL url =newURL(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 =newbyte[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){thrownewRuntimeException(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 =newBlob([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对象})},