使用Axios和React调用下载API返回Blob但无法触发文件下载怎么办

当Axios返回Blob格式数据时，浏览器不会自动触发下载，需要手动处理Blob数据来实现下载功能，具体步骤如下：

1. 修改Axios请求配置 #

首先要在GET请求中明确指定responseType: 'blob'，确保Axios将响应数据解析为Blob对象，而不是默认的JSON格式：

export const downloadFile = (fileId) => apiClient.get(`/download/${fileId}`, {
  responseType: 'blob' // 关键配置：指定响应类型为Blob
})

2. 处理Blob数据触发下载 #

在请求的回调中，通过创建临时URL和a标签，模拟点击操作来触发浏览器的下载行为，同时可以从响应头中提取文件名（如果API返回该信息）：

function callDownloadFileApi(){
  downloadFile('f5aa890c-8085-4209-8c0c-ee8522d7fb8c')
    .then(response => {
      // 从响应头获取文件名（API需返回Content-Disposition头）
      const contentDisposition = response.headers['content-disposition'];
      let fileName = '默认文件名';
      if (contentDisposition) {
        const fileNameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
        if (fileNameMatch?.[1]) {
          fileName = decodeURIComponent(fileNameMatch[1].replace(/['"]/g, ''));
        }
      }

      // 创建Blob临时URL
      const blobUrl = window.URL.createObjectURL(new Blob([response.data]));
      // 创建a标签触发下载
      const downloadLink = document.createElement('a');
      downloadLink.href = blobUrl;
      downloadLink.setAttribute('download', fileName);
      document.body.appendChild(downloadLink);
      downloadLink.click();
      // 清理资源避免内存泄漏
      downloadLink.remove();
      window.URL.revokeObjectURL(blobUrl);
    })
    .catch(error => console.log(error))
}

关键说明 #

• responseType配置：必须显式设置为blob，否则Axios会尝试将二进制文件解析为JSON，导致数据损坏。
• 文件名提取：如果后端API在响应头Content-Disposition中返回了文件名，就可以用正则提取并解码，提升用户体验；如果没有返回，就用默认文件名。
• 资源清理：使用URL.revokeObjectURL释放Blob URL的内存，避免浏览器内存泄漏。

特殊场景处理 #

如果你的下载请求不需要携带自定义请求头（比如认证Token），也可以直接使用a标签跳转的方式，更简洁：

function callDownloadFileApi(){
  const link = document.createElement('a');
  link.href = `/download/f5aa890c-8085-4209-8c0c-ee8522d7fb8c`;
  link.setAttribute('download', '默认文件名');
  document.body.appendChild(link);
  link.click();
  link.remove();
}

但这种方式无法处理需要携带请求头的认证场景，此时还是必须用Axios配合Blob处理的方案。

内容的提问来源于stack exchange，提问作者Yogesh Rao