React如何下载csv文件

使用React下载CSV文件的方法

方法1：使用Blob和URL.createObjectURL

创建一个Blob对象包含CSV数据，生成下载链接并触发点击事件。

const downloadCSV = (data, filename) => {
  const csvContent = data.join("\n");
  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.setAttribute("download", filename);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

方法2：使用第三方库react-csv

安装react-csv库简化CSV生成和下载过程。

npm install react-csv

import { CSVLink } from "react-csv";

const data = [
  ["Name", "Age", "City"],
  ["John", "25", "New York"],
  ["Jane", "30", "London"]
];

<CSVLink data={data} filename={"example.csv"}>
  Download CSV
</CSVLink>

方法3：从API获取数据后下载

当需要从后端API获取CSV数据时，可以直接下载响应内容。

const downloadCSVFromAPI = async (url, filename) => {
  const response = await fetch(url);
  const blob = await response.blob();
  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);
};

注意事项

• 确保CSV数据格式正确，字段间用逗号分隔
• 处理特殊字符时考虑添加引号转义
• 对于大数据量考虑分块处理或服务器端生成
• 移动端浏览器可能对程序化下载有不同限制