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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/57557.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MATLAB和Python电车电池制造性能度量分析

&#x1f3af;要点 分析全电池制造端开路电压曲线&#xff0c;解析电化学指标或特征&#xff0c;了解电池的热力学和动力学特性。测试相同活性材料&#xff08;正极和石墨负极&#xff09;的两批电池&#xff0c;列出模型提取的电化学特征并可视化分析结果。使用类似电压拟合方…

【Next.js 项目实战系列】03-查看 Issue

原文链接 CSDN 的排版/样式可能有问题&#xff0c;去我的博客查看原文系列吧&#xff0c;觉得有用的话&#xff0c;给我的库点个star&#xff0c;关注一下吧 上一篇【Next.js 项目实战系列】02-创建 Issue 查看 Issue 展示 Issue​ 本节代码链接 首先使用 prisma 获取所有…

【算法】KMP字符串匹配算法

目录 一、暴力 二、KMP 2.1 思路 2.2 next数组 2.3 实现 2.4 例题 一个人能走的多远不在于他在顺境时能走的多快&#xff0c;而在于他在逆境时多久能找到曾经的自己。 …

张雪峰:如果你现在是计算机专业,一定要优先报网络安全,它是未来国家发展的大方向

&#x1f91f; 基于入门网络安全/黑客打造的&#xff1a;&#x1f449;黑客&网络安全入门&进阶学习资源包 前言 “计算机专业 一定要优先报 网络安全 它是未来国家发展的大方向” 为什么推荐学网络安全&#xff1f; “没有网络安全就没有国家安全。”当前&#xff…

与ai一起作诗(《校园清廉韵》)

与ai对话犹如拷问自己的灵魂&#xff0c;与其说ai助力还不如说在和自己对话。 (笔记模板由python脚本于2024年10月19日 19:18:33创建&#xff0c;本篇笔记适合喜欢python和诗歌的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&…

知识点框架笔记3.0笔记

如果基础太差&#xff0c;搞不清基本交规的&#xff08;模考做不到60分&#xff09;&#xff0c;建议找肖肖或者小轩老师的课程看一遍&#xff0c;内容差不多&#xff08;上面有链接&#xff09;&#xff0c;笔记是基于肖肖和小轩老师的科目一课程以及公安部交管局法规&#xf…

w~自动驾驶合集9

我自己的原文哦~ https://blog.51cto.com/whaosoft/12320882 #自动驾驶数据集全面调研 自动驾驶技术在硬件和深度学习方法的最新进展中迅速发展&#xff0c;并展现出令人期待的性能。高质量的数据集对于开发可靠的自动驾驶算法至关重要。先前的数据集调研试图回顾这些数据集&…

[前端] ✨【如何用课程设计提升工程能力?】✨笔记

✨【如何用课程设计提升工程能力&#xff1f;】✨ &#x1f4da; 课程设计真的在语言工具类课程中占据了“C位”&#xff01;&#x1f451;设计得好的课程简直像一个实战训练营&#xff0c;既能帮助学生巩固理论&#xff0c;又能培养解决复杂问题的能力&#xff0c;还能让他们…

Redis --- 第六讲 --- 关于持久化

前言 持久化&#xff1a;MySQL的事务&#xff0c;有四大比较核心的特性 1、原子性 2、一致性 3、持久性 》 把数据存储到硬盘上 》持久&#xff0c;把数据存储在内存上》持久化。重启进程/重启主机之后&#xff0c;数据是否存在。 4、隔离性 Redis是一个内存数据库&#…

消息队列(仿RabbitMQ)—— 生产消费模型

本篇将实现一个3000多行的一个小项目&#xff0c;基于AMQP&#xff08;高级消息队列协议&#xff09;的消息队列&#xff0c;主要仿照 RabbitMQ 实现该代码&#xff0c;其本质也是生产消费模型的一个升级版本。实现的功能为&#xff1a;消息发布端将消息发送到服务器端&#xf…

如何开启华为交换机 http

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目…

腾讯 C++ 客户端一面,居然遇见了一道简单题。它怎么用go、C++解决

腾讯是目前全国最强的互联网公司之一&#xff0c;它有很好的福利尤其是能给应届生不错的工资待遇。 也正因如此&#xff0c;想进入腾讯工作的难度和竞争的激烈程度非常之大。 虽然感觉腾讯像是更看重个人综合能力的一家公司&#xff0c;算法题的好坏占面评比相对小些 但是竞争…

二、Linux 系统命令

一、系统命令 # 清屏 (Ctrl L) $ clear# 退出登录 $ exit # 历史命令 $ history $ history | grep java -jar 1. 系统信息 # 查看版本&#xff0c;当前操作系统发行版信息 $ cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) # 查看操作系统位数 $ getco…

【2022工业3D异常检测文献】Patch+FPFH: 结合3D手工点云描述符和颜色特征的异常检测方法

AN EMPIRICAL INVESTIGATION OF 3D ANOMALY DETECTION AND SEGMENTATION 1、Background PatchCore 方法&#xff1a; PatchCore是一种基于2D图像的异常检测方法&#xff0c;它使用预训练的深度学习模型&#xff08;如在ImageNet上预训练的模型&#xff09;来提取图像的局部特…

Memory Bus in SOC

在 SoC架构设计中&#xff0c;Memory Bus 是一个关键的组成部分&#xff0c;它负责连接 SoC 中的各个模块&#xff08;如 CPU、GPU、DMA、外设等&#xff09;与外部存储器&#xff08;如 DDR、NAND、Flash 等&#xff09;&#xff0c;起到连接处理器和存储器之间的桥梁作用&…

Qt优秀开源项目之二十四:EXCEL读写利器QXlsx

QXlsx是基于Qt5/Qt6的Excel文件&#xff08;*.xlsx&#xff09;的读写库。 github地址&#xff1a;https://github.com/QtExcel/QXlsx QXlsx既可以编译成库&#xff0c;也可以直接引用源码QXlsx-master\QXlsx\QXlsx.pri QXls提供了非常丰富的Examples&#xff0c;比如&#xff…

LED电子看板减少人工记录的错误

在当今快节奏的生产和管理环境中&#xff0c;准确性和效率是企业追求的关键目标。而传统的人工记录方式&#xff0c;常常因人为因素而出现各种错误&#xff0c;影响着企业的决策和运营。然而&#xff0c;随着科技的不断进步&#xff0c;LED 电子看板的出现为解决这一难题提供了…

无法获得下列许可 SOLIDWORKS Standard。 无法从使用许可服务器内读取数据,(-16,10009,10054)

无法获得下列许可 SOLIDWORKS Standard。 无法从使用许可服务器内读取数据&#xff0c;(-16,10009,10054) 错误如图 打开xxclean 扩展功能 服务无法启动

10.23Python_matplotlib_乱码问题

中英文问题解决方案 在使用 Matplotlib 绘图时&#xff0c;经常会出现中文字体显示问题。以下是一些解决方案&#xff1a; Windows 系统解决方案 在代码开始处添加以下代码&#xff0c;以支持中文显示&#xff1a; import matplotlib.pyplot as plt plt.rcParams[font.sans…

联想与Meta合作基于Llama大模型推出面向PC的个人AI智能体——AI Now | LeetTalk Daily...

“LeetTalk Daily”&#xff0c;每日科技前沿&#xff0c;由LeetTools AI精心筛选&#xff0c;为您带来最新鲜、最具洞察力的科技新闻。 联想集团昨日在美国西雅图召开年度Tech World大会。联想CEO杨元庆在主题演讲中&#xff0c;与Meta创始人兼CEO马克扎克伯格一道宣布&#x…