前端导出excel之exceljs 封装,导出数据表格到excel
Author: 图恩Category: 编程开发Views: 811Published: 2022-04-12 针对用户提供的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']`)
- 统一管理样式和边框配置
- 独立处理每个工作表的配置
此方案可直接应用于用户提供的代码场景,确保表头合并、样式和边框正确应用。