如何在React中从API下载不同格式的文件？

你遇到的乱码是因为Axios默认将响应解析为文本格式，但你请求的是PDF这类二进制文件，所以需要修改请求配置，让Axios以二进制格式接收数据。以下是具体实现方案：

核心解决步骤 #

1. 修改Axios请求配置 #

在请求参数中添加responseType: 'blob'，告诉Axios以二进制Blob格式接收响应数据：

await axios.get(`/dashboard/reportdownload/?file_name=242424242.pdf`, {
  headers: {
    "Authorization": `Bearer 767958756576576576jgjhgjhg`
  },
  responseType: 'blob' // 关键配置，解决乱码的核心
})

2. 处理响应并触发浏览器下载 #

拿到Blob数据后，通过创建临时URL和隐藏的a标签，触发浏览器的下载行为：

.then((res) => {
  // 基于响应数据创建Blob对象
  const blob = new Blob([res.data], { type: 'application/pdf' });
  // 生成临时下载URL
  const downloadUrl = window.URL.createObjectURL(blob);
  // 创建a标签
  const link = document.createElement('a');
  link.href = downloadUrl;
  // 设置下载文件名
  link.download = '242424242.pdf';
  // 触发点击下载
  document.body.appendChild(link);
  link.click();
  // 清理临时资源，避免内存泄漏
  document.body.removeChild(link);
  window.URL.revokeObjectURL(downloadUrl);
})

完整可复用代码示例 #

const downloadReport = async () => {
  try {
    const res = await axios.get(`/dashboard/reportdownload/?file_name=242424242.pdf`, {
      headers: {
        "Authorization": `Bearer 767958756576576576jgjhgjhg`
      },
      responseType: 'blob'
    });

    // 可选：从响应头中自动提取文件名（如果API返回Content-Disposition）
    const contentDisposition = res.headers['content-disposition'];
    const fileName = contentDisposition 
      ? contentDisposition.split('filename=')[1].replace(/"/g, '') 
      : '242424242.pdf';

    const blob = new Blob([res.data], { type: 'application/pdf' });
    const downloadUrl = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    
    link.href = downloadUrl;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    
    // 清理资源
    document.body.removeChild(link);
    window.URL.revokeObjectURL(downloadUrl);
  } catch (error) {
    console.error('文件下载失败:', error);
  }
};

补充说明 #

• responseType也可以设置为'arraybuffer'，后续转Blob的逻辑一致，效果相同。
• 如果API返回的响应头包含Content-Disposition，可以自动提取文件名，避免硬编码，提升代码灵活性。

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