当前位置：首页 > React

react实现excel的导出

2026-01-27 12:36:25React

使用 `xlsx` 库实现 Excel 导出

安装 xlsx 库：

npm install xlsx

创建一个工作簿并导出为 Excel 文件：

import * as XLSX from 'xlsx';

const exportToExcel = (data, fileName) => {
  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, `${fileName}.xlsx`);
};

// 使用示例
const data = [
  { Name: "John", Age: 30 },
  { Name: "Jane", Age: 25 }
];
exportToExcel(data, "users");

使用 `react-csv` 库实现 CSV 导出（兼容 Excel）

安装 react-csv：

react实现excel的导出

npm install react-csv

在组件中使用：

import { CSVLink } from 'react-csv';

const MyComponent = () => {
  const data = [
    { Name: "John", Age: 30 },
    { Name: "Jane", Age: 25 }
  ];

  return (
    <CSVLink data={data} filename={"users.csv"}>
      Export to Excel
    </CSVLink>
  );
};

自定义样式和复杂表格导出

对于需要复杂格式的 Excel 导出：

react实现excel的导出

const exportComplexExcel = () => {
  const ws_data = [
    ["Name", "Age", "Score"],
    ["John", 30, 85],
    ["Jane", 25, 92]
  ];

  const ws = XLSX.utils.aoa_to_sheet(ws_data);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Report");

  // 设置单元格样式（需要xlsx-style库）
  ws["A1"].s = { font: { bold: true, color: { rgb: "FF0000" } } };

  XLSX.writeFile(wb, "report.xlsx");
};

处理大数据量导出

对于大量数据的分块处理：

const exportLargeData = async (largeData) => {
  const chunkSize = 10000;
  const wb = XLSX.utils.book_new();

  for (let i = 0; i < largeData.length; i += chunkSize) {
    const chunk = largeData.slice(i, i + chunkSize);
    const ws = XLSX.utils.json_to_sheet(chunk);
    XLSX.utils.book_append_sheet(wb, ws, `Sheet${i/chunkSize + 1}`);
  }

  XLSX.writeFile(wb, "large_data.xlsx");
};

添加图片到 Excel

使用 xlsx 和 xlsx-style 添加图片：

import * as XLSX from 'xlsx';
import * as XLSXStyle from 'xlsx-style';

const exportWithImage = () => {
  const ws = XLSX.utils.aoa_to_sheet([["Product", "Image"]]);
  ws["B2"] = { t: "s", v: "IMAGE", s: { border: { top: { style: "thin" } } } };

  // 实际实现需要处理base64图片数据
  // 并添加到工作表的相应位置

  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Products");
  XLSX.writeFile(wb, "products.xlsx");
};