Angular(TypeScript ) 中基于 ExcelJS 实现导入模板下载功能（带样式与数据验证）

在 Angular 项目开发中，Excel 导入功能是常见需求，而提供标准化的导入模板能极大提升用户体验。本文将详细介绍如何使用 ExcelJS 库生成带样式、数据验证的考核数据导入模板，解决传统模板无格式、易出错的问题。 npm install exceljs

一、前置准备：安装依赖

首先安装 ExcelJS 库，它支持丰富的 Excel 格式配置和数据验证功能：

css 复制代码

npm install exceljs --save # 若需 TypeScript 类型支持（可选） npm install --save-dev @types/exceljs

二、完整实现代码

以下是基于 TypeScript 的模板下载功能实现，包含样式设置、数据验证、示例数据填充等核心功能： //基于ts

typescript 复制代码

async downloadTemplate() {
  try {
    // 动态导入 ExcelJS
    const ExcelJS = await import('exceljs');

    // 创建工作簿
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('考核数据模板');

    // 设置标题行并加粗
    worksheet.addRow(['考核年度', '个人名称', '身份证', '考核结果']);

    // 获取第一行并设置加粗样式
    const headerRow = worksheet.getRow(1);
    headerRow.font = {
      bold: true,
      size: 12
    };
    headerRow.alignment = { vertical: 'middle', horizontal: 'center' };

    // 添加示例数据
    worksheet.addRow(['2024', '张三', '110101199001011234', '不称职']);
    worksheet.addRow(['2024', '李四', '110101199001011235', '称职']);

    // 获取考核结果的字典值
    const kh003Options = this.dicservice.getSFdic('kha003');
    const dropdownValues = kh003Options.map((item: any) => item.label || item.value);

    // 设置考核结果列的数据验证（使用正确的类型）
    for (let i = 2; i <= 100; i++) {
      worksheet.getCell(`D${i}`).dataValidation = {
        type: 'list' as const, // 使用类型断言
        allowBlank: true,
        formulae: [`"${dropdownValues.join(',')}"`],
        showErrorMessage: true,
        errorTitle: '无效输入',
        error: '请从下拉列表中选择有效的考核结果'
      };
    }

    // 设置列宽
    worksheet.getColumn(1).width = 12; // 考核年度
    worksheet.getColumn(2).width = 10; // 个人名称
    worksheet.getColumn(3).width = 20; // 身份证
    worksheet.getColumn(4).width = 15; // 考核结果

    // 导出文件
    const buffer = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '考核数据导入模板.xlsx';
    link.click();
    URL.revokeObjectURL(link.href);

    this.msg.success('模板下载成功！');
  } catch (err: any) {
    console.error('导出错误', err);
    this.msg.error(`模板下载失败：${err.message}`);
    this.fallbackDownload();
  }
}
fallbackDownload() {
  const templateData = [
    ['考核年度', '个人名称', '身份证', '考核结果'],
    ['2024', '张三', '110101199001011234', '优秀'],
    ['2024', '李四', '110101199001011235', '称职']
  ];

  const exportOptions: XlsxExportOptions = {
    sheets: [
      {
        name: '考核数据模板',
        data: templateData
      }
    ],
    filename: '考核数据导入模板.xlsx',
    format: 'xlsx'
  };

  this.xlsx
    .export(exportOptions)
    .then(() => this.msg.success('模板下载成功！'))
    .catch((err: any) => this.msg.error(`模板下载失败：${err.message}`));
}