如何在React中使用Blob下载服务端返回的MemoryStream格式文件

云原生阿岚

2026-10-3

React 中实现该文件下载的方案

你拿到的响应结构里_buffer字段是文件内容的 Base64 编码字符串，只需要将其转码为二进制流后封装为 Blob 即可触发下载，具体实现如下：

实现步骤

正常请求接口，保留默认的JSON响应解析规则，不要配置responseType: 'blob'
从响应中提取_buffer字段的Base64编码内容
将Base64字符串解码为Uint8Array二进制数组
基于二进制数组生成Blob对象，配置对应文件的MIME类型
创建临时下载链接触发浏览器下载，完成后清理临时资源

代码示例

// response 为接口请求拿到的完整响应对象
const handleDownload = (response) => {
  // 提取Base64编码的文件内容
  const base64Content = response.data._buffer;
  // 解码Base64为二进制字符串
  const binaryStr = window.atob(base64Content);
  // 转成Uint8Array数组
  const uint8Arr = new Uint8Array(binaryStr.length);
  for (let i = 0; i < binaryStr.length; i++) {
    uint8Arr[i] = binaryStr.charCodeAt(i);
  }
  // 生成Blob对象，此处MIME类型请根据实际文件类型修改
  // 常见MIME类型：zip为application/zip，Excel为application/vnd.openxmlformats-officedocument.spreadsheetml.sheet，PDF为application/pdf
  const fileBlob = new Blob([uint8Arr], { type: 'application/zip' });
  // 触发下载
  const downloadUrl = window.URL.createObjectURL(fileBlob);
  const downloadLink = document.createElement('a');
  downloadLink.href = downloadUrl;
  // 自定义下载文件名和后缀，和上面的MIME类型对应
  downloadLink.download = '导出文件.zip';
  document.body.appendChild(downloadLink);
  downloadLink.click();
  // 清理临时资源
  document.body.removeChild(downloadLink);
  window.URL.revokeObjectURL(downloadUrl);
};