前台使用blob处理文件流并下载

水深无声 2022-01-31 09:23 403阅读 0赞

### 前台使用blob处理文件流并下载 ###

后台处理

@ResponseBody
    @RequestMapping("/down")
    public void down(HttpServletResponse response) throws IOException { 
    	byte[] bytes = null;//数据源
    	OutputStream out = response.getOutputStream();
    	InputStream fileStream = new ByteArrayInputStream(bytes);
    	IOUtils.copy(fileStream, out);
    	out.write(bytes);
    	out.flush();
    	out.close();
    }

前台处理

// 发送请求
    export function downImage(content,name) { 
      return request({ 
        url: '/seal/down',
        method: 'post',
        responseType: 'arraybuffer',//注意:这里必须指定返回类型,否则打不开图片
        params: { 
          content:content,
          name:name
        }
      })
    }
    //数据处理
    downImage(content,name).then((response) => { 
      if (response.data != null) { 
        this.$message.success("操作成功")
    	//下载处理
        const content = response.data;//返回的文件流
        const blob = new Blob([content],{ type:"image/png"});//指定处理类型
        const fileName = "章.png"; //下载的文件名称
        if ('download' in document.createElement('a')) {  // 非IE下载
          const elink = document.createElement('a');
          elink.download = fileName;
          elink.style.display = 'none';
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {  // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
    
      } else { 
        this.$message.error(response.data.message)
      }
    })