export2excel.js纯前端进行多级数据同一张excel多sheet导出

业务需求:进行一键导出多sheet页的表格。

关键代码:

 在Export2Excel.js文件处添加这个导出函数,此处需要注意的jsonData格式为多维数组

export function export2ExcelMultiSheet(th, jsonData, defaultTitle) {
    var data = jsonData;
    //添加标题
    // debugger
    for (var i = 0; i < th.length; i++) {
        data[i].unshift([th[i]])
    }
    //这里是定义sheet的名称 有几个sheet就加几个
    var ws_name = ["Sheet1","Sheet2"];

    var wb = new Workbook(),ws=[];
    //数据转换
    for (var j = 0; j < th.length; j++) {
      ws.push(sheet_from_array_of_arrays(data[j]))
    }

    /* add worksheet to workbook */
    //生成多个sheet
    for (var k = 0; k < th.length; k++) {
      wb.SheetNames.push(ws_name[k])
      wb.Sheets[ws_name[k]] = ws[k]
    }

    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
    var title = defaultTitle || '列表'
    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
} 

可以参考网上示例,如下图list三维数组结构,将需要导出的数据放入list[0],list[1]位置,内部数据结构,请自行处理。

 我的实际代码如下,

说明,excelVal数组是图2excel第二行展示字段对应的接口返回字段集合,lis则是需要导出的数据源。data为处理之后的一级数据集合即上面提到的list[0],result为处理之后的三级数据集合即上面提到的list[1]

Export2Excel.js是一个用于将数据导出Excel文件的JavaScript库。如果你想修改表格样式,可以在Export2Excel.js文件中进行以下操作: 1. 单元格宽度设置:可以通过设置列的宽度来调整单元格的宽度。例如,可以使用以下代码设置第一列的宽度为100px: ``` ws.col(1).setWidth(100) ``` 2. 边框设置:可以使用以下代码设置单元格的边框样式: ``` const borderStyle = { top: { style: 'thin', color: { rgb: '000000' } }, bottom: { style: 'thin', color: { rgb: '000000' } }, left: { style: 'thin', color: { rgb: '000000' } }, right: { style: 'thin', color: { rgb: '000000' } } } ws.cell(row, col).style.border = borderStyle ``` 3. 字体设置:可以使用以下代码设置单元格的字体样式: ``` const font = { name: 'Arial', size: 10, bold: true, color: { rgb: 'FF0000' } } ws.cell(row, col).style.font = font ``` 4. 颜色设置:可以使用以下代码设置单元格的背景色和字体颜色: ``` ws.cell(row, col).style.fill = { type: 'pattern', patternType: 'solid', fgColor: { rgb: 'FFFF00' }, bgColor: { rgb: '000000' } } ws.cell(row, col).style.font = { color: { rgb: 'FF0000' } } ``` 5. 复杂表头处理:可以使用以下代码设置复杂表头: ``` const header = [ [ { title: '姓名', rowspan: 2, align: 'center', valign: 'middle' }, { title: '语文', colspan: 2, align: 'center', valign: 'middle' }, { title: '数学', colspan: 2, align: 'center', valign: 'middle' } ], [ { title: '成绩', align: 'center', valign: 'middle' }, { title: '排名', align: 'center', valign: 'middle' }, { title: '成绩', align: 'center', valign: 'middle' }, { title: '排名', align: 'center', valign: 'middle' } ] ] header.forEach((row, rowIndex) => { const newRow = ws.addRow([]) row.forEach((cell, cellIndex) => { const newCell = newRow.addCell(cell.title) newCell.style.alignment = { horizontal: 'center', vertical: 'middle' } if (cell.rowspan) { ws.mergeCells(rowIndex + 1, cellIndex + 1, rowIndex + cell.rowspan, cellIndex + 1) } if (cell.colspan) { ws.mergeCells(rowIndex + 1, cellIndex + 1, rowIndex + 1, cellIndex + cell.colspan) } }) }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值