前端导出excel之exceljs 封装,导出数据表格到excel

针对用户提供的ExcelJS使用场景,以下是结构化解决方案,涵盖表头合并、边框设置、样式应用等关键点: --- ### ✅ 核心解决方案结构 ```javascript const { ExcelJS } = require('exceljs'); function createWorkbook(config) { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet(config.name); // 1. 表头合并 config.mergeCells = config.mergeCells || []; config.mergeCells.forEach((cellRange, index) => { worksheet.mergeCells(cellRange); }); // 2. 表头样式 config.cellStyle = config.cellStyle || []; config.cellStyle.forEach((style, index) => { worksheet.getCell(style.coords).style = { alignment: { vertical: style.alignment.vertical, horizontal: style.alignment.horizontal } }; }); // 3. 表格边框 if (config.tableBorder) { worksheet.getCell(config.ref).style.border = { top: { style: 'thin', color: { argb: '000000' } }, bottom: { style: 'thin', color: { argb: '000000' } }, left: { style: 'thin', color: { argb: '000000' } }, right: { style: 'thin', color: { argb: '000000' } } }; } // 4. 多个工作表配置 if (config.worksheets) { config.worksheets.forEach((sheetConfig, index) => { const sheet = workbook.addWorksheet(sheetConfig.name); sheet.mergeCells(sheetConfig.mergeCells || []); sheet.getCell(sheetConfig.ref).style = { alignment: { vertical: sheetConfig.cellStyle?.alignment?.vertical, horizontal: sheetConfig.cellStyle?.alignment?.horizontal } }; // 添加其他配置... }); } return workbook; } ``` --- ### 🛠️ 关键配置说明 1. **表头合并** - 使用`mergeCells`数组传递合并范围(如`['C3:C5']`),确保合并的单元格正确应用。 - 示例:`config.mergeCells = ['C3:C5', 'D3:H3']`。 2. **样式应用** - 通过`cellStyle`数组传递样式配置,每个元素包含`coords`(单元格位置)和`alignment`(对齐方式)。 - 示例:`config.cellStyle = [{ coords: [0, 2], alignment: { vertical: 'middle', horizontal: 'left' } }]`。 3. **边框设置** - 通过`tableBorder`布尔值控制表格边框,需指定具体单元格(如`config.ref`)。 - 示例:`config.tableBorder = true`,并传入`config.ref`。 4. **多工作表配置** - 使用`workheets`数组传递多个工作表配置,每个工作表独立处理。 - 示例:`config.worksheets = [{ name: 'Sheet1', mergeCells: ['C3:C5'], cellStyle: [{ coords: [0, 2], alignment: { vertical: 'middle', horizontal: 'left' } ] }, { name: 'Sheet2', mergeCells: ['C18:C20'] }]`。 --- ### 📌 常见问题排查 | 问题 | 解决方案 | |------|-----------| | **合并单元格未生效** | 检查`mergeCells`数组是否正确传递,确保格式为`['A1:A3']`。 | | **样式未应用** | 确保`cellStyle`数组中的每个元素包含`coords`和`alignment`,且`coords`为有效坐标(如`[0, 2]`)。 | | **边框未显示** | 在`tableBorder`为`true`时,需指定`config.ref`(如`C3`),否则可能未生效。 | | **多工作表冲突** | 确保每个工作表的`mergeCells`和`cellStyle`独立配置,避免覆盖问题。 | --- ### 📝 示例使用 ```javascript const config = { name: 'MyWorkbook', mergeCells: ['C3:C5', 'D3:H3'], cellStyle: [ { coords: [0, 2], alignment: { vertical: 'middle', horizontal: 'left' } } ], tableBorder: true, worksheets: [ { name: 'Sheet1', mergeCells: ['C3:C5'], cellStyle: [{ coords: [0, 2], alignment: { vertical: 'middle', horizontal: 'left' } ] }, { name: 'Sheet2', mergeCells: ['C18:C20'] } ] }; const workbook = createWorkbook(config); workbook.xlsx.writeToDisk('output.xlsx'); ``` --- ### 📝 总结 通过结构化配置(合并范围、样式、边框、多工作表),可高效生成符合需求的Excel文件。关键点在于: - 正确传递合并范围(如`['C3:C5']`) - 统一管理样式和边框配置 - 独立处理每个工作表的配置 此方案可直接应用于用户提供的代码场景,确保表头合并、样式和边框正确应用。