引言

在Web开发中，数据可视化与导出是常见的业务需求。ant-design的ant-table组件以其强大的表格展示与交互能力，成为前端开发者的首选。然而，当需要将表格数据导出到Excel时，如何保持原有的格式与结构，成为了一个挑战。本文将详细介绍如何使用exceljs库，按照ant-table的模板格式，将数据精准导入到Excel表格中，实现前端数据的高效导出。

一、exceljs库简介

exceljs是一个功能强大的Node.js库，用于创建、读取和操作Excel文件（.xlsx）。它支持丰富的Excel特性，包括单元格格式设置、公式、图表、数据验证等。与传统的xlsx库相比，exceljs提供了更简洁的API和更灵活的操作方式，非常适合用于数据导出场景。

1.1 安装与引入

首先，需要在项目中安装exceljs：

npm install exceljs

然后，在需要使用的文件中引入：

const ExcelJS = require('exceljs');
// 或者使用ES6模块语法
// import ExcelJS from 'exceljs';

二、ant-table数据结构分析

ant-table组件的数据通常以数组形式呈现，每个元素代表一行数据，属性对应列。例如：

const tableData = [
  { id: 1, name: '张三', age: 25, gender: '男' },
  { id: 2, name: '李四', age: 30, gender: '女' },
  // 更多数据...
];

同时，ant-table的列定义（columns）包含了列的标题、数据键、宽度等属性，这些信息对于构建Excel模板至关重要。

三、构建Excel模板

3.1 创建工作簿与工作表

使用exceljs创建工作簿和工作表：

const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Sheet1');

3.2 设置列宽与标题

根据ant-table的columns定义，设置Excel的列宽和标题：

const columns = [
  { title: 'ID', dataIndex: 'id', width: 100 },
  { title: '姓名', dataIndex: 'name', width: 150 },
  { title: '年龄', dataIndex: 'age', width: 80 },
  { title: '性别', dataIndex: 'gender', width: 80 },
];
columns.forEach((col, index) => {
  const cell = worksheet.getCell(1, index + 1);
  cell.value = col.title;
  worksheet.getColumn(index + 1).width = col.width / 7.2; // 调整宽度单位
});

3.3 填充数据

遍历tableData，将数据填充到Excel中：

tableData.forEach((rowData, rowIndex) => {
  columns.forEach((col, colIndex) => {
    const cell = worksheet.getCell(rowIndex + 2, colIndex + 1);
    cell.value = rowData[col.dataIndex];
  });
});

四、高级格式设置

4.1 单元格样式

exceljs允许对单元格进行丰富的样式设置，包括字体、颜色、边框等：

// 设置标题行样式
const headerRow = worksheet.getRow(1);
headerRow.eachCell((cell) => {
  cell.font = { bold: true, color: { argb: 'FFFFFF' } };
  cell.fill = {
    type: 'pattern',
    pattern: 'solid',
    fgColor: { argb: '4472C4' },
  };
  cell.alignment = { vertical: 'middle', horizontal: 'center' };
  cell.border = {
    top: { style: 'thin' },
    left: { style: 'thin' },
    bottom: { style: 'thin' },
    right: { style: 'thin' },
  };
});
// 设置数据行样式（可选）
tableData.forEach((_, rowIndex) => {
  const dataRow = worksheet.getRow(rowIndex + 2);
  dataRow.eachCell((cell) => {
    cell.border = {
      top: { style: 'thin' },
      left: { style: 'thin' },
      bottom: { style: 'thin' },
      right: { style: 'thin' },
    };
  });
});

4.2 数据验证与条件格式

对于需要数据验证的列（如性别只能为“男”或“女”），可以使用exceljs的数据验证功能：

const genderColumn = worksheet.getColumn(4); // 假设性别是第4列
genderColumn.eachCell({ includeEmpty: true }, (cell) => {
  cell.dataValidation = {
    type: 'list',
    allowBlank: false,
    formulae: ['"男,女"'],
  };
});

条件格式可用于突出显示特定数据，如年龄大于30的行：

worksheet.addConditionalFormatting({
  ref: 'A2:D' + (tableData.length + 1), // 调整范围
  rules: [
    {
      type: 'cellIs',
      operator: 'greaterThan',
      formulae: [30],
      style: {
        fill: {
          type: 'pattern',
          pattern: 'solid',
          fgColor: { argb: 'FFC7CE' },
        },
      },
    },
  ],
});

五、导出Excel文件

完成所有设置后，将工作簿导出为Excel文件：

workbook.xlsx.writeFile('ant-table-export.xlsx')
  .then(() => {
    console.log('Excel文件已导出');
  })
  .catch((err) => {
    console.error('导出失败:', err);
  });

六、实际应用与优化

6.1 动态列处理

在实际应用中，ant-table的列可能是动态的。可以通过函数接收columns和tableData作为参数，实现通用导出：

async function exportToExcel(columns, tableData, fileName = 'export.xlsx') {
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('Sheet1');
  // 设置列宽与标题（同上）
  // 填充数据（同上）
  // 设置样式（同上）
  await workbook.xlsx.writeFile(fileName);
  console.log(`Excel文件已导出: ${fileName}`);
}
// 使用示例
exportToExcel(columns, tableData, 'custom-export.xlsx');

6.2 大数据量优化

对于大数据量的表格，直接遍历填充可能导致性能问题。可以考虑分批处理或使用流式写入（如果exceljs支持）。此外，减少不必要的样式设置也能提升性能。

6.3 多工作表支持

如果需要导出多个ant-table到同一个Excel文件的不同工作表，可以创建多个worksheet并分别填充数据。

七、总结与展望

本文详细介绍了如何使用exceljs库，按照ant-table的模板格式，将数据精准导入到Excel表格中。通过设置列宽、标题、数据填充、样式调整等步骤，实现了前端数据的高效导出。未来，随着前端技术的不断发展，数据导出功能将更加智能化和自动化，如自动识别数据类型、智能调整格式等。同时，对于大数据量的处理，也将有更高效的解决方案出现。

通过掌握exceljs与ant-table的结合使用，开发者可以更加灵活地应对各种数据导出需求，提升用户体验和开发效率。希望本文能为广大开发者提供有益的参考和启发。