在导出Excel时,想要设置不一样的表头样式以及自定义的单元格样式,每次都需要手动去数,赋值再去设置样式很麻烦,如果每次都会根据数据字段的长度自动生成对应的列名岂不是很方便?
例如,有一份数据,长度为5,每一条记录里有5个栏位,就需要自动为 A B C D E 列设置样式
实现思想:
一、定义通用方法 get_excel_column 将导出数据data作为参数传递过来
function get_excel_column (data) {}
二、获取data栏位的个数
随机取data中某一条数据,通过Object.keys()方法,取出key值,key值的个数即使Excel栏位的个数
var code=Object.keys(data[0])
三、定义26个英文字母并生成列名
// 构建字典,便于查询
const num_set = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
var colList = [];
for(var key=1;key<=code.length;key++){
// 存放结果
var result = [];
// 初始化数据
var num = key;
var index;
// 循环判断,并在结果列前插入,直到小于等于26再退出循环
while(num > 26) {
index = num % 26;
num = Math.floor(num / 26);
if (index === 0) {
result.unshift(num_set[25]);
num = num-1;
} else {
result.unshift(num_set[index-1]);
}
}
// 将最后一个值插入
result.unshift(num_set[num-1]);
// 存放字符串结果
colList.push(result.join(""))
}
四、get_excel_column完整代码
function get_excel_column (data) {
var code=Object.keys(data[0])
// 构建字典,便于查询
const num_set = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
var colList = [];
for(var key=1;key<=code.length;key++){
// 存放结果
var result = [];
// 初始化数据
var num = key;
var index;
// 循环判断,并在结果列前插入,直到小于等于26再退出循环
while(num > 26) {
index = num % 26;
num = Math.floor(num / 26);
if (index === 0) {
result.unshift(num_set[25]);
num = num-1;
} else {
result.unshift(num_set[index-1]);
}
}
// 将最后一个值插入
result.unshift(num_set[num-1]);
// 存放字符串结果
colList.push(result.join(""))
}
return colList
}
五、通过excel.setExportCellStyle方法设置样式
var colList=get_excel_column(data)
//标题范围
var round=colList[0]+'1:'+colList[colList.length-1]+'1'
//单元格范围
var dataRound=colList[0]+'2:'+colList[colList.length-1]+data.length
//表头样式
excel.setExportCellStyle(data,round,{
s:{
fill: { patternType:"solid", bgColor: { indexed: 64 }, fgColor: { rgb: "ccff99" }},
border:{
top:{ style: "thin" },
bottom:{ style: "thin"},
left:{ style: "thin"},
right:{ style: "thin"}
},
alignment: {
horizontal: 'center',
vertical: 'center',
wrapText:true //单元格文本换行
}
}
})
//单元格样式
excel.setExportCellStyle(data,dataRound,{
s:{
fill: { patternType:"solid", bgColor: { indexed: 64 }, fgColor: { rgb: "ffffff" }},
border:{
top:{ style: "thin" },
bottom:{ style: "thin"},
left:{ style: "thin"},
right:{ style: "thin"}
},
alignment: {
horizontal: 'center',
vertical: 'center',
wrapText:true //单元格文本换行
}
}
})
六、最终结果