在 React 项目里下载 CSV 文件常见的两种方式

原创于 2025-09-17 18:31:56 发布 · 321 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

B.-

关注

标签

#react.js #前端 #js #reactjs #javascript

分类前端开发

在 React 项目里下载 CSV 文件常见有两种方式：

前端生成 CSV 并触发下载
适合数据在前端就已经有了。
从后端获取 CSV 并下载
适合后端导出 CSV，再返回给前端。

下面给你两种实现方式 👇

✅ 方式一：前端生成 CSV 文件并下载

// utils/downloadCsv.ts
export function downloadCsv(filename: string, rows: string[][]) {
  // 将二维数组转换为 CSV 字符串
  const csvContent =
    "data:text/csv;charset=utf-8," +
    rows.map((row) => row.map((item) => `"${item}"`).join(",")).join("\n");

  // 创建隐藏的 <a> 标签触发下载
  const encodedUri = encodeURI(csvContent);
  const link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", filename);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

在组件里使用：

import React from "react";
import { downloadCsv } from "./utils/downloadCsv";

const ExportButton: React.FC = () => {
  const handleExport = () => {
    const data = [
      ["Name", "Age", "Email"],
      ["Alice", "24", "alice@example.com"],
      ["Bob", "30", "bob@example.com"],
    ];
    downloadCsv("users.csv", data);
  };

  return <button onClick={handleExport}>Download CSV</button>;
};

export default ExportButton;

✅ 方式二：从后端获取 CSV 并下载

如果后端返回的是 文件流 (blob)，可以这样处理：

import React from "react";

const ExportButton: React.FC = () => {
  const handleDownload = async () => {
    const response = await fetch("/api/export-csv", {
      method: "GET",
    });

    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);

    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", "data.csv");
    document.body.appendChild(link);
    link.click();
    link.remove();
    window.URL.revokeObjectURL(url);
  };

  return <button onClick={handleDownload}>Download CSV</button>;
};

export default ExportButton;