干货|基于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 的对应数据。

相关推荐
RoyLin17 小时前
TypeScript设计模式:原型模式
前端·后端·node.js
我是天龙_绍17 小时前
vue Composables 组合式函数
前端
zjjuejin17 小时前
Maven项目的核心蓝图:POM文件
前端·maven
小气小憩17 小时前
“暗战”百度搜索页:Monica悬浮球被“围剿”,一场AI Agent与传统巨头的流量攻防战
前端·人工智能
前端付豪17 小时前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮17 小时前
js符号(Symbol)
前端·javascript
恋猫de小郭18 小时前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
大怪v18 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
我是天龙_绍18 小时前
vue3 props 如何写ts,进行类型标注
前端
叫我詹躲躲18 小时前
n8n 自动化工作流平台完整部署
前端·langchain·领域驱动设计