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

相关推荐
lied16636348062 小时前
List导出到Excel文件
servlet·list·excel
lijun_xiao20093 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔3 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼3 小时前
JavaWeb_p165部门管理
java·开发语言·前端
90后的晨仔3 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔3 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀3 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
我登哥MVP4 小时前
Ajax 详解
java·前端·ajax·javaweb
非凡ghost4 小时前
Typora(跨平台MarkDown编辑器) v1.12.2 中文绿色版
前端·windows·智能手机·编辑器·软件需求
馨谙5 小时前
/dev/null 是什么,有什么用途?
前端·chrome