在React中如何实现从API接口下载文件的功能？

你需要修改请求配置和下载触发逻辑，具体调整步骤如下：

1. 调整接口请求代码 #

原代码缺少responseType配置，axios默认会把二进制文件内容解析为文本，导致下载的文件损坏。修改后代码如下：

const downloadRelase = async (id) => {
  try {
    // 指定responseType为blob，让axios返回二进制文件对象
    const result = await clientAxios.get(`/api/comunicados/download/${id}/0`, {
      responseType: 'blob'
    });
    const blob = new Blob([result.data]);
    // 从响应头提取接口返回的文件名，没有则使用默认名
    const contentDisposition = result.headers['content-disposition'];
    let fileName = '下载文件';
    if (contentDisposition) {
      const matches = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
      if (matches != null && matches[1]) { 
        fileName = decodeURI(matches[1].replace(/['"]/g, ''));
      }
    }
    // 生成临时下载链接并触发下载
    const downloadUrl = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    // 清理临时资源避免内存泄漏
    a.remove();
    window.URL.revokeObjectURL(downloadUrl);
  } catch (error) {
    console.log(error);
  }
};

2. 调整JSX代码 #

给a标签阻止默认跳转行为，避免点击时页面跳转：

<div className="p-0 col-12 col-md-6 text-primary">
  <a 
    className="w-auto p-0 btn" 
    href="#!" 
    onClick={(e)=> {
      e.preventDefault();
      downloadRelase(relase.id);
    }}
  >
    Descargar firmado 
  </a>
  <span> | </span>
  <a className="w-auto p-0 btn" href="#!">
    Verificar firma
  </a>
</div>

注意事项 #

• 若下载的是固定格式文件（如PDF、Excel），可在创建Blob时指定MIME类型提升兼容性，示例：new Blob([result.data], {type: 'application/pdf'})
• 若接口需要鉴权，确保你的clientAxios实例默认配置了鉴权请求头，避免请求被拦截返回401错误

内容的提问来源于stack exchange，提问作者Paul Nuñez