Angular 8 如何将带下拉选项的JSON数据导出为支持多Sheet的Excel

核心疑问解答 #

• 直接把数组作为单元格值传入内置XLSX库，能否生成带预设选项的下拉列表？
  完全不能。免费版XLSX（SheetJS Community）本身不支持写入Excel的数据验证规则，传入的数组会被直接序列化为逗号拼接的纯文本存在单元格内，不会生成任何可交互的下拉组件，这也是之前测试时数据无法正常按预期显示的核心原因。
• 是否存在支持下拉功能的Angular专用导出库？
  目前没有专门针对Angular封装、完整支持带数据验证导出功能的小众专用库。主流成熟方案是使用exceljs作为底层文件生成引擎，在Angular中通过可注入服务封装即可实现，不存在框架适配障碍，相比小众专用库，其版本兼容性、长期维护可靠性更有保障。

落地实现要点 #

依赖选型 #

• 替换原有的免费版内置XLSX实现，安装exceljs作为导出依赖。该库原生支持完整的单元格数据验证、多Sheet写入、格式自定义能力，不需要额外的Angular适配包即可在项目中正常运行。

动态多Sheet配置 #

• 在导出服务中接收上游传入的多数据集数组，每个数据对象需包含「Sheet名称」和「表格行数据」两个核心字段。
• 遍历数据集数组逐个创建Worksheet，直接将数据对象中的名称字段赋值给对应Worksheet的name属性，即可实现Sheet名称和传入数据对象动态绑定的效果。
• 每个Sheet的表头写入、行数据填充逻辑和单Sheet导出完全一致，仅需在外层增加遍历循环即可。

单元格下拉列表实现 #

需要明确核心误区：下拉列表不是靠给单元格传数组值生成的，必须通过独立的数据验证配置才能触发：

1. 定位到需要配置下拉的目标单元格或单元格范围
2. 给目标单元格绑定dataValidation规则，将下拉类型设为list，把预设选项拼接为逗号分隔的字符串作为公式传入
3. 基础配置代码示例：

   // 给A2单元格配置下拉，选项为"是、否"，允许空值
   worksheet.getCell('A2').dataValidation = {
     type: 'list',
     allowBlank: true,
     formulae: ['"是,否"']
   }
   

常见踩坑提示 #

• 不要把选项数组直接作为单元格的value传入，这只会把数组转为静态文本存储，永远不会生成下拉交互
• 当下拉选项总长度超过255字符时，不要直接把全部选项拼在公式字符串里，需要把选项列表写到一个隐藏的辅助Sheet中，通过单元格区域引用的方式配置数据验证，避免Excel打开时报格式错误
• 创建动态Sheet时需要增加名称重复校验，避免不同数据对象的Sheet名称完全一样导致文件打开失败

内容的提问来源于stack exchange，提问作者Bravo