使⽤xlsx.js导出有复杂表头的excel
前端使⽤xlsx.js导出有复杂表头的excel
参考： ，这个博客中的实现是针对单个excel⼿写合并样式，⽐较繁琐。
我这⾥实现了根据table的表头数据结构，⾃动⽣成和页⾯上相同的excel表格。
1、简介
需求要导出表格数据到excel，本来想在后端⽤poi来弄，但是回想起之前同事被poi⽀配的恐惧，我搜了⼀下还是觉得在前端使⽤xlsx.js来搞，这样⽐较简单。虽然没有要求表格样式，但是我觉得还是弄成多级表头⽐较好看。
2、效果
页⾯导出数据:
图⽚1
根据表头结构，⾃动合并excel单元格，⽣成的⽂件如下
图⽚2
3、实现
请先阅读上⾯连接中的，我这⾥只是增强，不再重复赘述;
其中的xlsx.full.min.js依赖需要按照参考博客中的⽅式下载，安装到本地；或者打开步骤2的预览，f12 到对应加载的资源 copy 到你本地。
1、表头结构
表头的包含关系可⽤json很好的表达出来，其中⼦表头放在⽗表头的child属性中，依次类推，⽆限嵌套
[
{
name:'姓名',
prop:'name',
},
{
name:'专业技能',
child:[
{
name:'前端',
child:[
{
name:'JavaScript',
prop:'js'
},
{
name:'CSS',
prop:'css'
}
]
},
{
name:'后端',
child:[
{
name:'java',
child:[
{
name:'nio',
prop:'nio'
},
{
name:'基础',
prop:'basic'
}
]
},
{
name:'框架',
child:[
{
name:'SpringBoot',
prop:'springboot'
},
{
name:'MyBatis',
prop:'mybatis'
}
]
}
]
},
]
},
]
2、计算合并数据
关键点在于如何根据表头的步骤3.1⾥的json结构，计算出xlsx所需要的marges属性；这⼀步⽐较复杂
1）、xlsx的margs属性介绍
先看⼀下下⾯这个json串，这是xlsx需要的合并数据，⽤来告诉它从哪合并到哪。
s表⽰start，意思是需要合并的起始位置
e表⽰end，意思是需要合并的结束位置
r表⽰row，⾏下标，从0开始
c表⽰column，列下标，从0开始
[
{"s":{"r":0,"c":1},"e":{"r":0,"c":6}},
{"s":{"r":1,"c":1},"e":{"r":1,"c":2}},
]
所以上⾯的json中的第⼀条数据表⽰，从第0⾏的第1列开始(包括该列)，合并到第0⾏的第6列(包括该列)。效果就是图⽚2⾥展⽰的表格的专业技能表头。第⼆⾏就是前端表头的合并属性。
2）、根据表头结构计算出合并属性
现在很好办了，根据步骤3.1中json表头，⽣成步骤3.2.1⾥⾯的合并属性。由于代码太多，我这⾥就直接说⼀下思路吧
1. 将原始的json转换成数组，由于我们的表头要么只有横向列合并，要么就是纵向⾏合并。所以先将数据处理成下⾯这种形式。
这部分的逻辑实现在buildHeader(revealList)⽅法。可以看到这⾥的⼀个数组对应excel表格中的⼀⾏，其中需要合并的⾏或列使⽤占位符填充，⽅便后⾯计算。
2. 根据数组计算出合并样式
这部分的逻辑实现在doMerges(arr)，到这⼀步得出的合并样式可以直接使⽤了。可以说整篇⽂章的核⼼就是这两步。
[
{"s":{"r":0,"c":1},"e":{"r":0,"c":6}},
{"s":{"r":1,"c":1},"e":{"r":1,"c":2}},
{"s":{"r":1,"c":3},"e":{"r":1,"c":6}},
{"s":{"r":2,"c":3},"e":{"r":2,"c":4}},
{"s":{"r":2,"c":5},"e":{"r":2,"c":6}},
{"s":{"r":0,"c":0},"e":{"r":3,"c":0}},
{"s":{"r":2,"c":1},"e":{"r":3,"c":1}},
{"s":{"r":2,"c":2},"e":{"r":3,"c":2}}
]
4、给表头加背景⾊和边框
可以看到图⼆的表头有背景⾊和边框，由于使⽤npm下载⼿动copy过来的源码⾥没有aoa_to_sheet⽅法，所以从github复制了⼀份。然后按照⾃⼰的逻辑修改了⼀下，这个⽅法的主要作⽤就是将我们⽣成的⼆位数组数据，构造成xlsx需要的cell单元格对象。
我们可以在这个cell对象上做很多事情，例如给他加上单元格样式；
1）、xlsx的cell对象介绍
进⼊ ，Ctrl+F搜索Cell Object关键字，这⾥简单介绍下我们需要知道的⼏个属性
1. v属性，就是放我们的原始数据的
2. s属性，就是style，描述单元格样式的属性；我们主要对他进⾏设置，参数说明详见，进去搜索关键字Cell Styles
// ⽰例
const cell ={
v:'123',
v:'123',
s:{
fill:{patternType:'solid'},
font:{italic:true},
alignment:{wrapText:true}
}
}
s属性⽂档
Style Attribute Sub Attributes Values
fill patternType"solid" or "none"
fgColor COLOR_SPEC
bgColor COLOR_SPEC
font name"Calibri" // default
sz"11" // font size in points
color COLOR_SPEC
bold true or false
underline true or false
italic true or false
strike true or false
outline true or false
shadow true or false
vertAlign true or false
numFmt"0" // integer index to built in formats, see StyleBuilder.SSF property
"0.00%" // string matching a built-in format, see StyleBuilder.SSF
"0.0%" // string specifying a custom format
"0.00%;\\(0.00%\\);\\-;@" // string specifying a custom format, escaping special characters
"m/dd/yy" // string a date format using Excel’s format notation alignment vertical"bottom" or "center" or "top"
horizontal"left" or "center" or "right"
wrapText true or false
readingOrder2 // for right-to-left
textRotation Number from 0 to 180 or 255 (default is 0)
90 is rotated up 90 degrees
45 is rotated up 45 degrees
135 is rotated down 45 degrees
180 is rotated down 180 degrees
255 is special, aligned vertically
border top{ style: BORDER_STYLE, color: COLOR_SPEC }
bottom{ style: BORDER_STYLE, color: COLOR_SPEC }
rotate属性
left{ style: BORDER_STYLE, color: COLOR_SPEC }
left
{ style: BORDER_STYLE, color: COLOR_SPEC }right
{ style: BORDER_STYLE, color: COLOR_SPEC }diagonal { style: BORDER_STYLE, color: COLOR_SPEC }
diagonalUp true  or false diagonalDown
true  or false
Style Attribute
Sub Attributes
Values
2）、aoa_to_sheet  ⽅法构造cell 对象
1. ⼊参data 如下图所⽰，包含了表头部分和数据部分；这个是在步骤3.
2.2经过doMerges(arr)⽅法加⼯后去除占位符后的数据。
2. ⼊参headerRows ，表⽰表头占⽤⼏⾏，为了给表头加样式
3. aoa_to_sheet  ⽅法

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。