vue中前端导出excel表,使用Export2Excel导出多级表头的表格

tech2023-02-23  93

如图要导出表头分组的表格

1.为了不影响其他表格的导出,我复制了一份Export2Excel文件进行修改 只需修改方法为export_json_to_excel下的代码

/*export_json_to_excel文件*/ export function export_json_to_excel({ multiHeader = [], // 第一行表头 multiHeader2 = [], // 第二行表头 // header, // 第三行表头 data, filename, //文件名 merges = [], // 合并 bookType = 'xlsx' } = {}) { /* original data */ filename = filename || '列表'; data = [...data]; // data.unshift(header); var ws_name = "SheetJS"; data.unshift(multiHeader) data.unshift(multiHeader2) var wb = new Workbook(), ws = sheet_from_array_of_arrays(data); if (merges.length > 0) { if (!ws['!merges']) ws['!merges'] = []; merges.forEach(item => { ws['!merges'].push(XLSX.utils.decode_range(item)) }) } /* add worksheet to workbook */ wb.SheetNames.push(ws_name); wb.Sheets[ws_name] = ws; var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' }); saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), `${filename}.${bookType}`)

2.在vue文件中使用 需要注意的是写表头名数组时当一级表头下包含3个子标题时,只要两个占位符,字段名写最下级的就行

// 写在需要执行的方法下面 import("../js/Export2Excel2").then((excel) => { const multiHeader =[ "日期", "渠道", "收入", "", "", "DAU", "", "", ]; // 导出的表头名 const multiHeader2 = [ "", "", "全部", "新用户", "老用户", "DAU", "新安装", "去新dau" ]; // 导出的表头名 const filterVal = [ "day", "channelId", "amtPayerAllDevice", "amtPayerNewDevice", "amtPayerOldDevice", "dau", "numRoleTotal", "noNewDau" ]; // 导出的表头字段名 const merges = [ "A1:A2", "B1:B2", "C1:E1", "F1:H1" ]; // 根据Excel确定要合并的单元格 const data = this.formatJson(filterVal, this.sumTable.tableDatas); let filterName = "渠道详情数据"; excel.export_json_to_excel({ multiHeader, //这里是第一行的表头 multiHeader2, // 这里是第二行的表头 // header: tHeader, //这里应该是算第三行的表头 data, merges, filename: filterName, }); });

3.最终效果

最新回复(0)