在Angular中使用ExcelJs库将HTML表格导出为Excel是否可行？

可行性结论 #

这种实现方式完全可行，不存在技术层面的阻碍。ExcelJs 原生支持浏览器端的工作簿生成、单元格内容写入、样式配置、文件导出全流程能力，和Angular的运行环境完全兼容，不需要依赖后端接口中转就能完成整个导出流程。

落地实现的核心流程 #

• 首先安装必要依赖，执行安装命令：
  • npm install exceljs file-saver
  • 其中file-saver用来配合ExcelJs实现浏览器端的文件下载能力，无需额外引入后端服务
• 编写HTML表格内容采集逻辑：
  • 通过Angular的@ViewChild装饰器拿到目标导出表格的DOM元素引用
  • 逐行遍历表格的<thead>、<tbody>结构，逐单元格读取文本内容，同时采集单元格的合并规则（colSpan、rowSpan属性）、基础样式信息（字体加粗、背景色、文本对齐方式）
  • 注意过滤单元格内的无关交互元素文本，比如按钮的提示文字、筛选图标的占位内容，避免混进导出的Excel中
• 完成Excel工作簿组装：
  • 初始化ExcelJs实例，新建工作簿和对应工作表
  • 把采集到的逐单元格内容，按照行列坐标写入工作表对应位置
  • 把采集到的单元格合并规则映射为ExcelJs支持的合并配置，同步把样式信息绑定到对应单元格，最大程度匹配页面表格的视觉效果
• 触发文件导出：
  • 调用ExcelJs的工作簿序列化方法生成Excel二进制内容
  • 通过file-saver的能力，将二进制内容按照自定义的文件名，触发浏览器的文件保存流程

实际开发中的注意事项 #

• 如果表格中包含跨列、跨行的合并单元格，一定要在读取阶段记录好合并范围，不要直接平铺逐单元格写入，否则导出的Excel格式会错乱
• ExcelJs本身不支持直接从DOM节点识别图片内容，如果HTML表格内嵌入了图片资源，需要单独加载图片二进制后，调用ExcelJs的图片插入API完成写入，不能复用文本读取逻辑
• 若表格内的图片资源存在跨域引用，需要提前配置图片服务的CORS规则，否则生成的Excel内图片会加载失败

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