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

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

实例:

javascript 复制代码
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_sheetxlsx 提供的 aoa_to_sheet 方法用于将二维数组(表头和数据)转换为 Excel 的 sheet 格式。
  4. 合并数据:将表头和数据合并成一个数组,并作为最终导出的 Excel 文件内容。

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

相关推荐
Elieal2 分钟前
AJAX 知识
前端·ajax·okhttp
sulikey22 分钟前
Qt 入门简洁笔记:从框架概念到开发环境搭建
开发语言·前端·c++·qt·前端框架·visual studio·qt框架
烛阴1 小时前
循环背后的魔法:Lua 迭代器深度解析
前端·lua
元拓数智1 小时前
现代前端状态管理深度剖析:从单一数据源到分布式状态
前端·1024程序员节
mapbar_front1 小时前
Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
星空的资源小屋2 小时前
Antares SQL,一款跨平台开源 SQL 客户端
数据库·人工智能·pdf·开源·电脑·excel·1024程序员节
天一生水water2 小时前
three.js加载三维GLB文件,查看三维模型
前端·1024程序员节
无风听海2 小时前
HarmonyOS之启动应用内的UIAbility组件
前端·华为·harmonyos
冰夏之夜影2 小时前
【科普】Edge出问题后如何恢复出厂设置
前端·edge
葱头的故事3 小时前
vant van-uploader上传file文件;回显时使用imageId拼接路径
前端·1024程序员节