Vue使用Export2Excel导出三级表头的Excel文件

柔情只为你懂 2022-11-30 12:38 537阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center]  
大家肯定碰到过如此的表头。。。这种数据导出为excel开始着实让我头痛，不过经过大佬的指点后也是搞定了！分享出来希望也能对你有所帮助！本文不在阐述Export2excel.js中的代码，如果需要了解请看这边文章：https://blog.csdn.net/qq\_36357384/article/details/108145542  
当然最好是先搞懂这篇，那么这篇看起来也就更懂！  
笔者是先用手动的办法在excel创建了这样的表头，这样比较好作为参考：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 1]  
其实三级表头的重点是在于单元格的合并，既然牵扯到合并那么导出的方法肯定会多一个参数。默认大家对文章开头提到的另一篇文章已经理解，这里就不贴js代码了。这部分js我会在文章末尾贴上网盘链接，有需要的可以自取。  
万变不离其中，导出三级表头我们依旧是需要表头，处理后的表数据，表名称等等参数，唯一与1级表头不一样的是，多了一个参数`merges`。这里面其实也就是写了我们需要将那些表格进行合并而已，这个时候我们照着之前手动敲好的excel弄就完了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 2]  
相比上一篇文章，这里只是多了一个multiHeader而已，这里面存储了一二级表头。说白了就是一个二维数组\[\[\],\[\]…\]，这里需要结合自己的表头来定义这里面的内容，以我的为例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 3]  
大家可以看到，在‘服务规范性’后面有4个空的‘’，这是为什么呢？其实很简单。这个时候我们对照着实现准备好多excel，**‘部门名称’相当于我们的A列，‘服务规范性’相当于我们的B列。‘服务规范性’相当于我们的G列，那么理所应当要空出来4个！二级表头同理：因为A列是我们的部门名称，‘评价指标’是从B列开始的，所以在二级表头最开始有一个空的‘’**。三级表头如此。。四级也是如此。。当我们把所有的参数准备完成后，调用方法就Ok了，就是这么的简单！Export2excel.js文件获取地址：  
链接：https://pan.baidu.com/s/1GQmWbM8OseXHFTpQ-uLwqg  
提取码：1iun  
还有不懂得伙伴可以留言，博主看到后会及时回复！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c16ff96a3fd54ccc899d749af9a57294.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/21284be2c911473b8ff7e683b6ab6840.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/6f3344d7b5444cba90dfcf8ea5d36fd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/5f45d7c8d6d042e1b0ecb65a0f3e81e5.png