使用AG Grid的GridOptions API,配合使用ExcelJS库创建多层表头的Excel文件。示例代码如下:
import * as ExcelJS from 'exceljs';
import * as FileSaver from 'file-saver';
import { GridOptions } from 'ag-grid-community';
// 定义表头
const headers = [
[
{header: 'Row 1 - Col 1', colSpan: 2},
{header: 'Row 1 - Col 3', colSpan: 4},
{header: 'Row 1 - Col 7', colSpan: 3},
],
[
{header: 'Row 2 - Col 1', colSpan: 1},
{header: 'Row 2 - Col 2', colSpan: 1},
{header: 'Row 2 - Col 3', colSpan: 1},
{header: 'Row 2 - Col 4', colSpan: 1},
{header: 'Row 2 - Col 5', colSpan: 1},
{header: 'Row 2 - Col 6', colSpan: 1},
{header: 'Row 2 - Col 7', colSpan: 1},
{header: 'Row 2 - Col 8', colSpan: 1},
{header: 'Row 2 - Col 9', colSpan: 1},
]
];
// 定义表格数据
const rowData = [
{col1: 'Value 1-1', col2: 'Value 1-2', col3: 'Value 1-3', col4: 'Value 1-4', col5: 'Value 1-5', col6: 'Value 1-6', col7: 'Value 1-7', col8: 'Value 1-8', col9: 'Value 1-9'},
{col1: 'Value 2-1', col2: 'Value 2-2', col3: 'Value 2-3', col4: 'Value 2-4', col5: 'Value 2-5', col6: 'Value 2-6', col7: 'Value 2-7', col8: 'Value 2-8', col9: 'Value 2-9'},
];
// 定义AG Grid的GridOptions
const gridOptions: GridOptions = {
columnDefs: [
{headerName: 'Column 1', field: 'col1'},
{headerName: 'Column 2', field: 'col2'},
{headerName: 'Column 3', field: 'col3'},
{headerName: 'Column 4', field: 'col4'},
{headerName: 'Column 5', field: 'col5'},
{headerName: 'Column 6', field: 'col6'},
{headerName: 'Column 7', field: 'col7'},
{headerName: 'Column 8', field: 'col8'},
{headerName: 'Column 9', field: 'col9'},
],
rowData: rowData
};
// 创建Excel
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('My Sheet');
// 设置表头
worksheet.columns = gridOptions.columnDefs.map(column => {
return {header: column.headerName, key: column.field};
});
headers.forEach(headerRow => {
worksheet.addRow(headerRow.map(header => header.header));
});
// 设置表格数据
worksheet.addRows(rowData);
// 导出Excel