当前位置：首页 > React

react实现导出数据

2026-01-26 20:23:40React

使用react-csv库导出数据

react-csv是一个专门为React设计的CSV导出库，安装简单且使用方便。

安装react-csv：

npm install react-csv

基本用法示例：

import { CSVLink } from 'react-csv';

const data = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 30 }
];

function ExportButton() {
  return (
    <CSVLink data={data} filename={"user-data.csv"}>
      Export to CSV
    </CSVLink>
  );
}

使用原生JavaScript实现

对于不想引入额外依赖的项目，可以使用原生JavaScript实现CSV导出。

创建导出函数：

function exportToCsv(filename, rows) {
  const processRow = (row) => {
    return Object.values(row).map(val => 
      `"${val !== null && val !== undefined ? String(val).replace(/"/g, '""') : ''}"`
    ).join(',');
  };

  const csvContent = [
    Object.keys(rows[0]).join(','),
    ...rows.map(processRow)
  ].join('\n');

  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.click();
}

在组件中使用：

function ExportButton() {
  const handleExport = () => {
    const data = [
      { id: 1, name: 'Product A', price: 100 },
      { id: 2, name: 'Product B', price: 200 }
    ];
    exportToCsv('products.csv', data);
  };

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

处理大数据量导出

当需要导出大量数据时，建议使用分块处理以避免内存问题。

分块处理实现：

function exportLargeData(filename, data, chunkSize = 10000) {
  let csvContent = Object.keys(data[0]).join(',') + '\n';
  let currentChunk = 0;

  function processChunk() {
    const start = currentChunk * chunkSize;
    const end = start + chunkSize;
    const chunk = data.slice(start, end);

    if (chunk.length === 0) {
      finalizeExport();
      return;
    }

    csvContent += chunk.map(row => 
      Object.values(row).map(val => 
        `"${val !== null && val !== undefined ? String(val).replace(/"/g, '""') : ''}"`
      ).join(',')
    ).join('\n');

    currentChunk++;
    setTimeout(processChunk, 0);
  }

  function finalizeExport() {
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  processChunk();
}

导出Excel文件

对于需要导出Excel格式的情况，可以使用xlsx库。

安装xlsx：

npm install xlsx

使用示例：

import * as XLSX from 'xlsx';

function exportToExcel() {
  const data = [
    { Name: 'John', Age: 25 },
    { Name: 'Jane', Age: 30 }
  ];

  const ws = XLSX.utils.json_to_sheet(data);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  XLSX.writeFile(wb, "users.xlsx");
}

function ExportButton() {
  return <button onClick={exportToExcel}>Export Excel</button>;
}

处理复杂数据结构

当数据结构包含嵌套对象时，需要先将其展平。

展平函数示例：

react实现导出数据

function flattenObject(obj, prefix = '') {
  return Object.keys(obj).reduce((acc, k) => {
    const pre = prefix.length ? prefix + '.' : '';
    if (typeof obj[k] === 'object' && obj[k] !== null) {
      Object.assign(acc, flattenObject(obj[k], pre + k));
    } else {
      acc[pre + k] = obj[k];
    }
    return acc;
  }, {});
}

function prepareExportData(data) {
  return data.map(item => flattenObject(item));
}