使用ExcelJS精准实现Ant-Table数据到Excel的模板化导出

作者：新兰2025.10.12 09:09浏览量：2

简介：本文详细介绍如何使用ExcelJS库将Ant Design的Table组件数据按照预设模板导出为Excel文件，涵盖模板设计、数据填充、样式优化等核心环节，提供完整的代码实现方案。

一、技术选型与场景分析

在Web开发中，将前端表格数据导出为Excel是常见需求。Ant Design的Table组件提供了丰富的数据展示功能，但原生不支持直接导出为带有复杂样式的Excel文件。ExcelJS作为一款功能强大的Node.js库，能够精确控制Excel文件的单元格样式、合并区域、公式计算等特性，非常适合实现模板化导出。

典型应用场景包括：

  1. 财务报表导出（需保持固定格式）
  2. 业务数据模板下载（如订单模板、考勤表）
  3. 多Sheet协同展示（主表+明细表结构）
  4. 条件格式应用（如数据异常高亮）

与xlsx等库相比，ExcelJS的优势在于：

  • 更精细的样式控制（字体、边框、填充等）
  • 支持模板文件加载与修改
  • 异步写入大文件能力
  • 跨平台兼容性（Node.js/浏览器）

二、核心实现步骤

1. 环境准备与依赖安装

  1. npm install exceljs antd @ant-design/icons
  2. # 或使用yarn
  3. yarn add exceljs antd @ant-design/icons

2. 模板设计原则

优秀模板应具备：

  • 固定表头区域（冻结首行）
  • 动态数据区域（预留扩展空间）
  • 样式隔离区（标题、页脚独立样式）
  • 公式计算区（如自动求和）

建议采用分层设计：

  1. const templateConfig = {
  2.   sheetName: '业务数据',
  3.   headerRange: 'A1:F1',  // 表头区域
  4.   dataRange: 'A2:F100',  // 数据预留区域
  5.   footerRange: 'A101:F101', // 页脚区域
  6.   styles: {
  7.     header: { /* 样式定义 */ },
  8.     data: { /* 样式定义 */ },
  9.     footer: { /* 样式定义 */ }
  10.   }
  11. };

3. 数据填充实现

基础数据填充

  1. const ExcelJS = require('exceljs');
  2. const { Table } = require('antd');
  4. async function exportToExcel(tableData, templatePath) {
  5.   const workbook = new ExcelJS.Workbook();
  7.   // 加载模板或新建工作簿
  8.   if (templatePath) {
  9.     await workbook.xlsx.readFile(templatePath);
  10.   } else {
  11.     const sheet = workbook.addWorksheet('Sheet1');
  12.     // 初始化模板结构...
  13.   }
  15.   const worksheet = workbook.getWorksheet('业务数据');
  17.   // 填充表头（示例）
  18.   const headerRow = worksheet.getRow(1);
  19.   headerRow.values = ['序号', '名称', '数量', '单价', '金额', '备注'];
  21.   // 填充数据
  22.   tableData.forEach((item, index) => {
  23.     const row = worksheet.getRow(index + 2);
  24.     row.values = [
  25.       index + 1,
  26.       item.name,
  27.       item.quantity,
  28.       item.price,
  29.       item.quantity * item.price,
  30.       item.remark
  31.     ];
  32.   });
  34.   // 自动调整列宽
  35.   worksheet.columns.forEach(column => {
  36.     let maxLength = 0;
  37.     column.eachCell({ includeEmpty: true }, cell => {
  38.       const columnLength = cell.value ? cell.value.toString().length : 0;
  39.       if (columnLength > maxLength) {
  40.         maxLength = columnLength;
  41.       }
  42.     });
  43.     column.width = maxLength < 10 ? 10 : maxLength + 2;
  44.   });
  46.   // 生成Excel文件
  47.   const buffer = await workbook.xlsx.writeBuffer();
  48.   // 后续处理（如触发下载）...
  49. }

高级样式处理

  1. // 应用表头样式
  2. function applyHeaderStyle(row) {
  3.   row.eachCell(cell => {
  4.     cell.font = { bold: true, color: { argb: 'FFFFFF' } };
  5.     cell.fill = {
  6.       type: 'pattern',
  7.       pattern: 'solid',
  8.       fgColor: { argb: '4472C4' }
  9.     };
  10.     cell.border = {
  11.       top: { style: 'thin' },
  12.       left: { style: 'thin' },
  13.       bottom: { style: 'thin' },
  14.       right: { style: 'thin' }
  15.     };
  16.     cell.alignment = { vertical: 'middle', horizontal: 'center' };
  17.   });
  18. }
  20. // 应用数据行样式
  21. function applyDataStyle(row, isOdd) {
  22.   row.eachCell(cell => {
  23.     cell.border = {
  24.       top: { style: 'thin' },
  25.       left: { style: 'thin' },
  26.       bottom: { style: 'thin' },
  27.       right: { style: 'thin' }
  28.     };
  29.     cell.alignment = { vertical: 'middle' };
  30.   });
  32.   if (isOdd) {
  33.     row.eachCell(cell => {
  34.       cell.fill = {
  35.         type: 'pattern',
  36.         pattern: 'solid',
  37.         fgColor: { argb: 'EDEDED' }
  38.       };
  39.     });
  40.   }
  41. }

4. 与Ant-Table深度集成

1) 获取表格数据

  1. // 在Ant-Table组件中
  2. const [dataSource, setDataSource] = useState([]);
  3. const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  5. const columns = [
  6.   { title: '名称', dataIndex: 'name', key: 'name' },
  7.   { title: '数量', dataIndex: 'quantity', key: 'quantity' },
  8.   // 其他列定义...
  9. ];
  11. // 导出按钮处理
  12. const handleExport = () => {
  13.   // 获取当前显示数据（可添加筛选条件）
  14.   const exportData = dataSource.filter(item => 
  15.     selectedRowKeys.includes(item.key) || selectedRowKeys.length === 0
  16.   );
  18.   exportToExcel(exportData);
  19. };

2) 动态列映射

  1. function mapAntColumnsToExcel(antColumns) {
  2.   return antColumns.map(col => ({
  3.     header: col.title,
  4.     key: col.dataIndex,
  5.     width: col.width ? col.width / 7.5 : 15, // 近似转换
  6.     style: col.className ? getStyleByClassName(col.className) : null
  7.   }));
  8. }
  10. // 在导出函数中使用
  11. const excelColumns = mapAntColumnsToExcel(columns);

三、性能优化策略

1. 大数据量处理

  • 分块写入：对于超过10万行数据，采用流式写入

    1. async function exportLargeData(data, chunkSize = 5000) {
    2. const workbook = new ExcelJS.Workbook();
    3. const sheet = workbook.addWorksheet('大数据');
    5. // 写入表头...
    7. for (let i = 0; i < data.length; i += chunkSize) {
    8.   const chunk = data.slice(i, i + chunkSize);
    9.   chunk.forEach((item, index) => {
    10.     const rowIdx = i + index + 2; // +2因为表头占1行，索引从0开始
    11.     const row = sheet.getRow(rowIdx);
    12.     // 填充数据...
    13.   });
    15.   // 定期保存（浏览器环境需特殊处理）
    16.   if (i % (chunkSize * 5) === 0) {
    17.     console.log(`已处理 ${i} 条数据`);
    18.   }
    19. }
    21. // 最终写入...
    22. }

2. 样式复用

  • 创建样式模板库
    ```javascript
    const styleTemplates = {
    currency: {
    numFmt: ‘“¥”#,##0.00’,
    alignment: { horizontal: ‘right’ }
    },
    percentage: {
    numFmt: ‘0.00%’,
    alignment: { horizontal: ‘right’ }
    },
    date: {
    numFmt: ‘yyyy-mm-dd’,
    alignment: { horizontal: ‘center’ }
    }
    };

// 应用样式
sheet.getCell(‘D2’).numFmt = styleTemplates.currency.numFmt;

  2. # 四、常见问题解决方案
  3. ## 1. 中文乱码问题
  4. - 解决方案：确保文件以UTF-8编码保存，并设置正确的字体
  5. ```javascript
  6. workbook.creator = 'My App';
  7. workbook.created = new Date();
  8. // 设置中文字体
  9. workbook.eachSheet((sheet, id) => {
  10.   sheet.columns.forEach(column => {
  11.     column.style = { font: { name: '微软雅黑', family: 2 } };
  12.   });
  13. });

2. 浏览器端导出

  1. // 前端导出实现
  2. function downloadExcel(buffer, fileName = '导出数据.xlsx') {
  3.   const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  4.   const url = URL.createObjectURL(blob);
  5.   const a = document.createElement('a');
  6.   a.href = url;
  7.   a.download = fileName;
  8.   a.click();
  9.   URL.revokeObjectURL(url);
  10. }
  12. // 在async函数中调用
  13. const buffer = await workbook.xlsx.writeBuffer();
  14. downloadExcel(buffer);

3. 合并单元格处理

  1. // 合并表头示例
  2. worksheet.mergeCells('A1:B1');
  3. const mergedCell = worksheet.getCell('A1');
  4. mergedCell.value = '基本信息';
  5. mergedCell.alignment = { horizontal: 'center', vertical: 'middle' };
  7. // 动态合并相同内容单元格
  8. function mergeSameCells(sheet, columnKey, startRow = 2) {
  9.   let mergeStart = null;
  10.   let prevValue = null;
  12.   for (let i = startRow; i <= sheet.rowCount; i++) {
  13.     const cell = sheet.getCell(`${columnKey}${i}`);
  14.     if (cell.value === prevValue) {
  15.       if (!mergeStart) mergeStart = i - 1;
  16.     } else {
  17.       if (mergeStart !== null && i - 1 > mergeStart) {
  18.         sheet.mergeCells(`${columnKey}${mergeStart + 1}:${columnKey}${i - 1}`);
  19.       }
  20.       mergeStart = null;
  21.       prevValue = cell.value;
  22.     }
  23.   }
  24. }

五、最佳实践建议

  1. 模板分离原则：将模板设计与数据填充分离，便于维护
  2. 样式命名规范：建立统一的样式命名体系（如header-primary）
  3. 错误处理机制：
    1. try {
    2. await exportToExcel(data);
    3. } catch (error) {
    4. console.error('导出失败:', error);
    5. message.error('导出失败，请重试');
    6. }
  4. 进度反馈：对于大数据量导出，显示进度条
  5. 多环境适配：区分开发/生产环境的模板路径配置

通过以上方法，开发者可以高效实现Ant-Table数据到Excel的模板化导出，既保持前端展示的一致性，又满足业务对Excel文件格式的严格要求。实际项目中，建议结合具体业务场景进行定制化开发，建立可复用的导出组件库。

最热文章