如何在Angular导出Excel表格时添加边框、颜色等自定义样式

首选方案：exceljs #

这是目前Angular生态中实现带样式导出Excel最成熟的开源方案，完整支持自定义单元格边框、填充色、字体格式、对齐规则、单元格合并等几乎所有常见Excel格式需求，和Angular各版本兼容性良好。

基础使用要点： #

• 先安装核心依赖：npm install exceljs file-saver
• 若担心打包体积，可以在angular.json的build.options.scripts数组中引入预构建文件：node_modules/exceljs/dist/exceljs.min.js
• 核心逻辑流程：创建工作簿实例 → 新增工作表 → 定义所需的样式对象 → 写入单元格数据时绑定对应样式 → 生成Blob文件流后调用file-saver的saveAs方法触发下载
• 如果要导出页面上已经渲染完成的表格，直接遍历DOM的<tr>、<td>节点获取内容和已有的CSS样式，映射到exceljs的样式配置项即可实现所见即所得的导出效果。

替代方案：SheetJS（xlsx 库） #

如果之前项目已经基于SheetJS做了纯数据导出的逻辑，不想全量重构，可以搭配xlsx-style扩展包实现样式能力，也可以直接使用SheetJS的带样式分支版本。

• 基础版开源SheetJS默认不提供样式支持，需要额外安装扩展依赖，配置复杂度比exceljs略高
• 支持的样式覆盖范围和exceljs基本一致，可满足边框、填充色、字体等常规样式设置需求。

以上两种方案均为纯前端实现，不需要依赖后端接口，导出的文件兼容微软Excel、WPS、Numbers等所有主流表格处理工具。

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