如何在React前端将接口返回内容生成并下载文件？

情况1：接口返回Blob或文件流 #

• 发起请求时指定响应类型为blob：
  • 使用fetch：

    fetch('/api/download-file', {
      method: 'GET',
    })
    .then(response => response.blob())
    .then(blob => {
      // 执行后续下载逻辑
    });
    

  • 使用axios：

    axios.get('/api/download-file', {
      responseType: 'blob'
    })
    .then(response => {
      const blob = new Blob([response.data]);
      // 执行后续下载逻辑
    });
    

• 生成临时下载链接并触发下载：

  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  // 文件名可从接口响应头（如Content-Disposition）提取，或自定义
  link.setAttribute('download', 'filename.ext');
  document.body.appendChild(link);
  link.click();
  // 清理资源
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
  

情况2：接口返回Base64编码内容 #

• 将Base64字符串转为Blob后执行下载：

  // 假设base64Str为接口返回的编码内容，mime类型为text/csv
  const blob = new Blob([atob(base64Str)], { type: 'text/csv;charset=utf-8;' });
  // 后续步骤同情况1的下载逻辑
  

  或直接使用data URL触发下载：

  const link = document.createElement('a');
  link.href = `data:text/csv;base64,${base64Str}`;
  link.setAttribute('download', 'filename.csv');
  link.click();
  

给定JSON数据：

{ "title": "Dummy File", "name": "temp_file.csv", "content": "name,role\r\n" }

实现代码（函数组件示例） #

import React from 'react';

const CSVFileDownloader = () => {
  const fileData = { 
    "title": "Dummy File", 
    "name": "temp_file.csv", 
    "content": "name,role\r\n" 
  };

  const handleDownload = () => {
    const { name, content } = fileData;
    // 根据CSV类型创建Blob
    const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
    const downloadUrl = URL.createObjectURL(blob);
    
    const linkElement = document.createElement('a');
    linkElement.href = downloadUrl;
    linkElement.download = name;
    document.body.appendChild(linkElement);
    linkElement.click();
    
    // 清理DOM元素和临时URL
    document.body.removeChild(linkElement);
    URL.revokeObjectURL(downloadUrl);
  };

  return (
    <button onClick={handleDownload}>
      下载示例CSV文件
    </button>
  );
};

export default CSVFileDownloader;

扩展说明 #

• 若需下载其他类型文件（如JSON），修改Blob的type参数即可，例如application/json
• 若内容包含中文等特殊字符，确保charset=utf-8已正确设置，避免出现乱码

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