干货|基于React和xlsx库导出表格数据到excel（前端操作）

注：要根据 columns 和 dataSource 来导出数据，导出的内容应该包括 columns 作为表头，以及每一行的数据。编写 exportToExcel 函数，将 columns 和 dataSource 结合起来进行导出。

  实例：

import React from 'react';
import { Button, Table } from 'antd';
import * as XLSX from 'xlsx';

const TestComponent: React.FC = () => {
  const dataSource = [
    { key: '1', name: '张三', age: 32, address: '张庄' },
    { key: '2', name: '王二', age: 42, address: '王桥' },
  ];

  const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age' },
    { title: 'Address', dataIndex: 'address', key: 'address' },
  ];

  const exportToExcel = () => {
    // 创建表头
    const header = columns.map(col => col.title);

    // 创建数据行
    const data = dataSource.map(item =>
      columns.map(col => item[col.dataIndex])
    );

    // 合并表头和数据
    const exportData = [header, ...data];

    // 创建工作簿
    const worksheet = XLSX.utils.aoa_to_sheet(exportData);
    const workbook = XLSX.utils.book_new();

    // 将 sheet 添加到工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

    // 命名根据自己设定，生成 Excel 文件并触发下载，
    XLSX.writeFile(workbook, 'table-data.xlsx');
  };

  return (
    <div>
      <Button onClick={exportToExcel}>导出 Excel</Button>
      <Table dataSource={dataSource} columns={columns} />
    </div>
  );
};

export default TestComponent;

1. 表头 (header)：使用 columns.map(col => col.title) 从 columns 中提取每一列的 title，作为 Excel 文件的表头。
2. 数据行 (data)：使用 dataSource.map 来遍历每一行数据，然后使用 columns.map 根据 dataIndex 提取对应的数据值。
3. aoa_to_sheet：xlsx 提供的 aoa_to_sheet 方法用于将二维数组（表头和数据）转换为 Excel 的 sheet 格式。
4. 合并数据：将表头和数据合并成一个数组，并作为最终导出的 Excel 文件内容。

这样，导出的 Excel 文件中会包含 columns 的表头和 dataSource 的对应数据。

原文地址：https://blog.csdn.net/m0_61998604/article/details/142940171

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！