| react+antd 导出excel文件（简单数据&多级表头） | 您所在的位置：网站首页 › react+antd的登录注册 › react+antd 导出excel文件（简单数据&多级表头） |
react+antd 导出excel文件（简单数据&多级表头）
需求： 在基于react+antd进行开发的页面中，实现导出excel报表的功能 实际场景： 1.简单数据：单层表头+数据 2.复杂数据：多层表头+数据 实现方式： 1.简单数据 简单数据的导出使用了js-export-excel插件，需要自己转换表头数据与表格数据，代码如下： import { useState } from 'react'; import { message, Button } from 'antd'; import ExportJsonExcel from 'js-export-excel'; import type { RequestData } from '@/utils/request'; import type { ProjectInfoParams } from '@/services/summary'; import type { PaginationProps } from 'antd'; import { downloadChannelSettle } from '@/services/xxx'; // 接口地址 interface DownloadEffortsProps { columnsData: any[]; totalList?: any[]; tableParams?: ProjectInfoParams & PaginationProps & { order?: string; sort?: string }; } const DownloadEfforts: React.FC = (props) => { const { columnsData, tableParams } = props; // 按钮loading const [downLoading, setDownLoading] = useState(false); // 下载结算申请报表 const downloadEffectExcel = async () => { // 请求所有数据 const downloadParams = { ...tableParams, current: 1, pageSize: 0, pageNum: 1 }; // 开启按钮loading setDownLoading(true); try { const res: RequestData = await downloadChannelSettle(downloadParams); if (res.result) { const { tableList } = res.result; // 表头数组去掉操作栏 const newestHeaderList = columnsData.filter((arr: any) => arr.valueType !== 'option'); // 导出报表的表头与数据的处理 const resultData: any[] = []; if (tableList) { tableList.forEach((item: any, index: number) => { const resultItem = {}; newestHeaderList.forEach((el: any, i: number) => { if (newestHeaderList[i].title) { resultItem[newestHeaderList[i].title] = tableList[index][newestHeaderList[i].dataIndex]; } }); resultData.push(resultItem); }); } const newHeader = newestHeaderList.map((item: any) => item.title); const option = { fileName: '导出数据', // 文件名字 datas: [ { sheetData: resultData, // 数据 sheetName: 'sheet', sheetFilter: newHeader, // 表头 sheetHeader: newHeader, // 表头 }, ], }; const toExcel = new ExportJsonExcel(option); toExcel.saveExcel(); } else { message.error('下载失败！'); } } catch (error) { // } finally { // 关闭按钮loading setDownLoading(false); } }; return ( 下载报表 ); }; export default DownloadEfforts;
2.复杂数据 复杂数据，我只处理了多层表头的情况，table组件展示如图：
因为js-export-excel插件无法直接导出多层表头的数据（并且产品要求excel文件要与table展示布局相同），因此选用了react-html-table-to-excel插件进行开发，代码如下： import { useState, useRef, useEffect } from 'react'; import { isEmpty } from 'lodash'; import { message, Table, Button } from 'antd'; import ReactHTMLTableToExcel from 'react-html-table-to-excel'; import type { RequestData } from '@/utils/request'; import type { ParamsType } from '@ant-design/pro-provider'; import type { PaginationProps } from 'antd'; import { downloadChannelGoBackReport } from '@/services/xxx'; import type { SettleApplicationParams } from '@/services/xxx'; interface DownloadEffortsProps { columnsData: any[]; totalList?: any[]; tableParams?: ParamsType & PaginationProps & { order?: string; sort?: string; month?: string[] }; } const DownloadEfforts: React.FC = (props) => { const { columnsData, tableParams } = props; const buttonRef = useRef(null); const tableRef = useRef(null); const [tableData, setTableData] = useState([]); // 按钮loading const [downLoading, setDownLoading] = useState(false); // 下载报表 const downloadEffectExcel = async (e: any) => { e.stopPropagation(); // 请求所有数据 const downloadParams = { ...tableParams, current: 1, pageSize: 0, pageNum: 1 }; if (downloadParams.month && !isEmpty(downloadParams.month)) { // 开启按钮loading setDownLoading(true); try { const res: RequestData = await downloadChannelGoBackReport(downloadParams); if (res.result) { const { tableList } = res.result; setTableData(tableList); } else { message.error('下载失败！'); setDownLoading(false); } } catch (error) { // } } else { message.error('查询时间不能为空'); } }; useEffect(() => { // 拿到本次请求的数据后，再进行下载 if (columnsData.length > 0 && tableData.length > 0) { const table = tableRef?.current?.querySelector('table'); table.setAttribute('id', 'table-to-xls'); buttonRef.current.handleDownload(); // 关闭按钮loading setDownLoading(false); // 下载完后，清除数据 setTimeout(() => { setTableData([]); }, 0); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [tableData]) useEffect(() => { // 禁止组件按钮的默认点击事件(因为ts默认用的是Element，需要声明为HTMLElement) const button = document.querySelector('#test-table-xls-button') as HTMLElement; if (button) button.style['pointer-events'] = ('none'); }, []); return ( downloadEffectExcel(e)} loading={downLoading}> 下载报表 arr.valueType !== 'option')} dataSource={tableData} /> ); }; export default DownloadEfforts;
最终导出效果：
【ps】：因为YYYY-MM格式的表头数据会在导出时自动转格式（如上图），因此可以在表头处理时手动转为【YYYY年MM月】的格式避免此类情况。
参考文档：https://blog.csdn.net/weixin_44240581/article/details/115265810 这两个依赖的配置项很接近，肉眼可以明确属性名的含义，不做赘述。
react+antd 导出excel文件（简单数据&多级表头）的更多相关文章
POI导出大量数据的简单解决方案(附源码)-Java-POI导出大量数据，导出Excel文件，压缩ZIP（转载自iteye.com）
说明:我的电脑 2.0CPU 2G内存 能够十秒钟导出 20W 条数据 ,12.8M的excel内容压缩后2.68M 我们知道在POI导出Excel时,数据量大了,很容易导致内存溢出.由于Excel ... java POI导出Excel文件数据库的数据在web开发中,有一个经典的功能,就是数据的导入导出.特别是数据的导出,在生产管理或者财务系统中用的非常普遍,因为这些系统经常要做一些报表打印的工作.这里我简单实现导出Excel文件. POI jar ... JavaScript 上万条数据 导出Excel文件（改装版）最近项目要js实现将数据导出excel文件,网上很多插件实现~~那个开心呀,谁知道后面数据量达到上万条时出问题:浏览器不仅卡死,导出的excel文件一直提示网络失败.... debug调试发现var ... JavaScript 上万条数据 导出Excel文件 页面卡死最近项目要js实现将数据导出excel文件,网上很多插件实现~~那个开心呀,谁知道后面数据量达到上万条时出问题:浏览器不仅卡死,导出的excel文件一直提示网络失败.... debug调试发现var ... 纯前端实现数据导出excel文件一 安装依赖 npm install -S file-saver xlsx npm install -D script-loader 二 新建文件夹 在网上百度引入即可 三 在main.js中引入 ... PHP导出excel文件，第一步先实现PHP模板导出不带数据今天继续研究PHP导出excel文件,把复杂的事情简单化,一步步实现功能,首先实现模板文件的导出,随后再实现写入数据后导出,最终实现功能,这是基本思路.中间可以加一步,先自己写入数据导出试试,随后再数 ... 前端必读3.0：如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件在之前的文章中,我们为大家分别详细介绍了在JavaScript.React中使用SpreadJS导入和导出Excel文件的方法,作为带给广大前端开发者的"三部曲",本文我们将为大家 ... PHPExcel导出excel文件今天园子刚开,先来个货顶下,后续园丁qing我会再慢慢种园子的,希望大家多来园子逛逛. PHPExcel导出excel文件,先说下重要的参数要记住的东西 impUser() 导入方法 exportEx ... asp.net 导出excel文件之前做过winfrom程序的导出excel文件的功能,感觉非常简单.现在试着做asp.net中导出excel的功能,之前用的是Microsoft.Office.Interop.Excel这个对象来实现 ... JQGrid导出Excel文件系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ... 随机推荐 2023-03-01 fatal: unable to access 'https://github.com/top-think/think/': OpenSSL SSL_read: Connection was reset, errno 10054问题描述:在thinkphp官网拉取tp5项目文件时报错: fatal: unable to access 'https://github.com/top-think/think/': OpenSSL ... Java的JDK以及maven环境变量配置右键我的电脑->属性->高级->环境变量->系统变量 新建变量名(win7,win10系统变量)JAVA_HOME变量值填写D:\Java\jdk1.8.0_172为jdk的安 ... ctfshow web入门 命令执行 37-3937-39 基于 GET 传参的 include() 38.39 是 37 的变种 分析 伪协议常用于文件包含漏洞中 文件包含函数有:include.include_once.require.requ ... python 操作 ES 二、mappings环境 python:3.8 es:7.8.0 环境安装 pip install elasticsearch==7.8.0 from elasticsearch import Elasticsearch ... [转]有限状态机FSM(finite state machine) 一有限状态机FSM(finite state machine) 一 有限状态机又称有限自动状态机,它拥有有限数量的状态,每个状态代表不同的意义,每个状态可以切换到 零-多 个状态.任意时刻状态机有且只能 ... go 使用mysqlpackage main /* 下划线(如:import _ hello/imp)的作用:当导入一个包时,该包下的文件里所有init()函数都会被执行, 然而,有些时候我们并不需要把整个包都导入进来, ... git bash 笔记下载和安装 官网下载地址:https://git-scm.com/ 国内镜像下载地址:https://registry.npmmirror.com/binary.html?path=git-for-w ... django修改认证模型类1.我在一个子应用下面创建了一个apps目录,且在apps下又创建了一个子应用users,结构如下图: 2.在users的models.py中 from django.db import models ... jmeter 添加断言和查看断言结果在对应的请求下添加响应断言,这里我们添加响应文本来作为检查点,来检查上面的这个请求是否成功 断言和断言结果是成对出现的,是为了检查我们添加的断言是否验证成功,如下图,如果成功,里面就会有对应的结果,且 ... (转) IIS隐藏响应头信息先安装url-rewrite组件 http://www.iis.net/downloads/microsoft/url-rewrite 修改应用根目录下的Web.config配置文件 |
【本文地址】