一行JS代码导出ant-design中复杂table表格的Excel

使用方式

1、安装依赖

npm install xlsx-js-style

2、复制代码文件exportExcel.js至工程
https://github.com/EnthuDai/export-excel-in-one-line

3、在引入excel.js后调用

Excel.export(columns, dataSource, '导出文件名')

4、代码demo

代码示例

5、效果

页面excel
在这里插入图片描述在这里插入图片描述

适用范围

对于使用vue ant-design 组件库中table组件的场景,可直接将table的 columnsdata-source导出文件名称 作为参数传入export方法,调用即可导出相同格式的excel文件。

Excel.export(this.demoColumn, this.demoData, '测试数据')

对于其他场景,需要对数据格式适配至ant-design table相同格式,具体为:

  1. 表头格式需符合以下条件
  • 标题的key为 title
  • 数据字段key为 dataIndex
  • 子表头key为 children

如:

	[{title:'类别',dataIndex:'type'},{title:'总计',children:[{title:'销量',children:[{title:'今天', dataIndex:'today'},{title:'昨天', dataIndex:'yesterday'}]}]},{title:'趋势',children:[{title:'上涨率',dataIndex:'raise'},{title:'上涨金额', dataIndex:'raiseAmount'}]}]
  1. 数据格式格式需符合以下条件
  • 数据项key为表头格式中对应项 dataIndex 的值
  • 子数据key为children

如:

	[{type:'笔', today:100, yesterday: 200, raise:'20%', raiseAmount:20, children:[{type:'毛笔',today:50, yesterday: 100, raise:'20%', raiseAmount:10},{type:'钢笔',today:50, yesterday: 100, raise:'20%', raiseAmount:10}]},{type:'墨', today:100, yesterday: 200, raise:'20%', raiseAmount:20},{type:'纸', today:100, yesterday: 200, raise:'20%', raiseAmount:20},{type:'砚', today:100, yesterday: 200, raise:'20%', raiseAmount:20},]

实现原理

原理基本参考了使用xlsx.js导出有复杂表头的excel这篇文章,其该文合并表头方法doMerges 存在bug,实测中会出现问题。所以该组件中使用了树中递归处理的算法计算合并项,解决问题的同时也提高了代码的简洁程度。
实现过程:

  1. 根据表头描述 columns 生成全为空的表头二维数组,二维数组行数为 columns 中子项树的最深深度,列数为 columns 中所有子项树的叶子节点数之和。分别通过 columnHeight(columns)、columnWidth(columns)方法递归求得。
    在这里插入图片描述
  2. columns 中title填入对应位置,也是循环+递归实现。此间分两种情况
    1. 无children的叶子节点

      {title:'类别',dataIndex:'type'}
      

      在数组左上角第一项填入 title,合并单元格时需要向下合并所有单元格,记录下合并的起始和终点项的偏移量 {s:{r:0,c:0},e:{r:0,c:2}}

      在这里插入图片描述
      2.有children的节点

       {title:'总计',children:[{title:'销量',children:[{title:'今天', dataIndex:'today'},{title:'昨天', dataIndex:'yesterday'}]}]
      }
      

      在这里插入图片描述
      在二维数组剩余的部分(红框区域)中,左上角第一项填入title,并记录下横向合并的起终点偏移量,横向合并的数目为该项的children数组中所有节点的叶节点总数。
      然后对 向下的剩余部分(绿框区域)递归操作。

      3.最终得到表头区域数据
      在这里插入图片描述

      合并excel单元格的数据描述
      在这里插入图片描述

  3. 其余部分就是填入数据调api即可,可以参考使用xlsx.js导出有复杂表头的excel这篇文章,此处空白太小所以不再赘述。

源码地址:

https://github.com/EnthuDai/export-excel-in-one-line
如果该内容对你有帮助,帮忙star一下项目呀

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

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

相关文章

16bit、8 通道、500kSPS、 SAR 型 ADC——MS5188N

MS5188N 是 8 通道、 16bit 、电荷再分配逐次逼近型模数 转换器,采用单电源供电。 MS5188N 拥有多通道、低功耗数据采集系统所需的所有 组成部分,包括:无失码的真 16 位 SAR ADC ;用于将输入配 置为单端输入&#xff0…

Spring IoC 详解

目录 一、引言二、Spring Bean三、将一个类声明为 Bean 所涉及的注解四、Component 和 Bean 的区别五、注入 Bean 的注解六、Autowired 和 Resource 的区别七、Bean7.1 作用域7.2 线程安全7.3 生命周期 一、引言 IoC(Inversion of Control:控制反转) 是…

【AndV】ant-design-vue中select使用mode=“combobox“无效:

文章目录 一、问题:二、解决: 一、问题: Warning: [antdv: Select] The combobox mode of Select is deprecated,it will be removed in next major version,please use AutoComplete instead 二、解决: 将mode"combobox"改为mode"SECRET_COMBOBOX_MODE_DO_NOT_…

Centos7.9_或者华为OpenEuler安装Mysql8.0.33安装_亲测成功---Linux工作笔记061

[root@host-10-233-255-199 soft]# ll 总用量 1.1G -rw-r--r-- 1 root root 137M 5月 10 15:20 jdk-8u271-linux-x64.tar.gz -rw-r--r-- 1 root root 925M 7月 6 09:02 mysql-8.0.33-el7-x86_64.tar 看一下我们的安装包. [root@host-10-233-255-199 soft]# rpm -qa|grep m…

机器学习深度学习——注意力提示、注意力池化(核回归)

👨‍🎓作者简介:一位即将上大四,正专攻机器学习的保研er 🌌上期文章:机器学习&&深度学习——常见循环神经网络结构(RNN、LSTM、GRU) 📚订阅专栏:机器…

外网通过ipv6访问家里设备

目录 1.需要整体理解如何在外网连接家里设备。 2.路由器打通ipv6。 3.移动光猫配置ipv6。 4.test-ipv6.com测试成功,但是ping不通 还是ping不通,提出如下可能 5.动态域名解析(ddns-go) a.dns服务商权限设置 b.IPv6设置 c…

一文读懂ThreadLocal

ThreadLocal 有什么用? 目录 ThreadLocal 有什么用? 如何使用 ThreadLocal? ThreadLocal 原理了解吗? ThreadLocal 有什么用? 通常情况下,我们创建的变量是可以被任何一个线程访问并修改的。如果想实现…

rv1126设置静态ip

开发板配网--------------------------------------------------------------------------------------------- 刚拿到的开发板里面的网络配置大多不可用,此时是无法ping通的,这个时候需要重新修改相关的配置文件; Vi /etc/profile 最后面…

竞赛项目 深度学习图像风格迁移

文章目录 0 前言1 VGG网络2 风格迁移3 内容损失4 风格损失5 主代码实现6 迁移模型实现7 效果展示8 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 深度学习图像风格迁移 - opencv python 该项目较为新颖,适合作为竞赛课题…

Qt 多线程、信号和槽连接方式推荐connect(Sender,Singnal,Receiver,Slot,ConnectMode);如下图所示

connect(主线程A,信号A,子线程B,槽函数B,DirectConnection /AutoConnection ); connect(子线B,信号B,主线程A,槽函数A,QueueConnection );

FIPS 180-2 散列算法SHA-224、SHA-256、SHA-384 和 SHA-512 的C语言快速软件实施:理论与实践

一、安全散列算法(SHA)简介 安全散列算法(Secure Hash Algorithm,简称SHA)是美国国家安全局(NSA)研发的一种密码散列函数算法标准,由美国国家标准与技术研究院(NIST)认证[3]。SHA系列算法包括SHA-1、SHA-224、SHA-256、SHA-384 和SHA-512 等变体[1]。在本文中,我们…

无涯教程-Perl - grep函数

描述 此函数从LIST中提取EXPR为TRUE的所有元素。 语法 以下是此函数的简单语法- grep EXPR, LIST返回值 此函数返回在标量context中表达式返回true的次数以及在列表context中与表达式匹配的元素列表。 例 以下是显示其基本用法的示例代码- #!/usr/bin/perllist (1,&qu…

什么是Java中的策略模式?

Java中的策略模式是一种行为设计模式,它允许您在不改变客户端代码的情况下,在运行时动态地切换行为。这是一种非常有用的模式,因为它允许您在运行时根据需要更改算法或行为。 策略模式通常涉及到一个或多个策略类,每个策略类都实…

为c语言安装easyx图形库

按照图上的步骤&#xff0c;安装easyx图形库。 接下来看代码&#xff1a; #include<easyx.h> #include<stdio.h> #define width 800 #define height 600int main() {initgraph(width, height); // 初始化窗口&#xff08;宽度&#xff0c; 高度&#xff09;…

SAS-proc transpose转置

一、语法 by&#xff1a;纵向变量&#xff0c;不转置&#xff0c;保留的变量&#xff0c;by使用需要先排序。 id&#xff1a;需要转置的变量。 var&#xff1a;新数据集中的数据。 idlabel&#xff1a;转置变量的标签。 copy&#xff1a;不转置的变量直接拷贝到输出数据集中。…

C语言必会题目(1)

W...Y的主页 &#x1f60a; 代码仓库分享❤️ 在学习语言时&#xff0c;最重要的就是练习&#xff0c;光听不练假把式。下面我就推荐一些C语言必会的题。 执行下面程序&#xff0c;正确的输出是&#xff08; &#xff09; int x5,y7; void swap() { int z; zx; xy; yz; } int…

北航基于openEuler构建工业机器人操作系统,打造“开箱即用”的机器人基础软件平台

北京航空航天大学是国家“双一流”建设高校&#xff0c;以建设扎根中国大地的世界一流大学为发展目标。北京航空航天大学在机器人领域一直处于行业前沿&#xff0c;以其亮眼的成果和优秀的师资力量&#xff0c;成为国内机器人领域的重要参与者和建设者。机器人操作系统是机器人…

说说var、let、const之间的区别?

一、var 在ES5中&#xff0c;顶层对象的属性和全局变量是等价的&#xff0c;用var声明的变量既是全局变量&#xff0c;也是顶层变量 注意&#xff1a;顶层对象&#xff0c;在浏览器环境指的是window对象&#xff0c;在 Node 指的是global对象 var a 10; console.log(window.…

【Kubernetes】Kubernetes之Kubeadm部署

Kubeadm 一、Kubeadm 部署1. 环境准备2. 所有节点安装 docker3. 所有节点安装 kubeadm&#xff0c;kubelet 和 kubectl4. 部署 K8S 集群4.1 配置 master01 节点4.2 配置 node 节点 二、Kubeadm 高可用部署1. 环境准备2. 所有节点安装 docker2. 所有节点安装kubeadm&#xff0c;…

Substack 如何在去中心化内容创作领域掀起波澜

面对数字内容广告化的困境&#xff0c;Substack回归做内容的初心&#xff0c;通过产品和平台双轮驱动&#xff0c;重塑一个去中心化的多元文化内容聚集地&#xff0c;实现了增长突破。其核心策略在于先使用简洁的创作工具赋能内容生产&#xff0c;进而通过平台的互动机制促进用…