layui复杂动态表格怎么导出

Question

正常网页展示的样式

导出后的样式

导出后的表头直接少了一级，怎么正常导出？前端导出！

Answer 1

参考这个

//创建工作簿和工作表
var wb = XLSX.utils.book_new();
var ws = XLSX.utils.json_to_sheet([]);

//合并表头单元格
ws['!merges'] = [];
ws['!merges'].push({s:{r:0,c:0},e:{r:1,c:0}});
ws['!merges'].push({s:{r:0,c:1},e:{r:1,c:1}});
ws['!merges'].push({s:{r:0,c:2},e:{r:1,c:2}});

//设置表头样式
ws['A1'].s = {alignment: {horizontal: "center", vertical: "center"}, font: {bold: true}, fill: {fgColor: {rgb: "FFC000"}}};
ws['B1'].s = {alignment: {horizontal: "center", vertical: "center"}, font: {bold: true}, fill: {fgColor: {rgb: "FFC000"}}};
ws['C1'].s = {alignment: {horizontal: "center", vertical: "center"}, font: {bold: true}, fill: {fgColor: {rgb: "FFC000"}}};

//设置第二行表头样式
ws['A2'].s = {alignment: {horizontal: "center", vertical: "center"}, font: {bold: true}, fill: {fgColor: {rgb: "92D050"}}};
ws['B2'].s = {alignment: {horizontal: "center", vertical: "center"}, font: {bold: true}, fill: {fgColor: {rgb: "92D050"}}};
ws['C2'].s = {alignment: {horizontal: "center", vertical: "center"}, font: {bold: true}, fill: {fgColor: {rgb: "92D050"}}};

//设置表格数据
var data = [
  {col1: '数据1', col2: '数据2', col3: '数据3'},
  {col1: '数据4', col2: '数据5', col3: '数据6'},
  {col1: '数据7', col2: '数据8', col3: '数据9'}
];

for(var i=0;i<data.length;i++){
  ws['A'+(i+3)] = {v: data[i].col1};
  ws['B'+(i+3)] = {v: data[i].col2};
  ws['C'+(i+3)] = {v: data[i].col3};
}

//将工作表添加到工作簿中，并将其导出为Excel文件
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, 'filename.xlsx');