这一定是前端Excel导出的天花板~

Posted 2023-03-03

参考技术A 前端导出 Excel 的方案有很多，但是能够导出一份专业的 Excel 表格很少，本文将介绍一款导出 Excel 表格界的天花板，能够满足 99.99% 的业务需求，直呼 yyds !

xlsx 是前端最热门的 Excel 导出方案，又叫做 SheetJS ，默认不支持修改 Excel 的样式。

若在工作业务需求上需要修改 Excel 的样式的话需要使用该作者的付费版本。或者使用 xlsx-style ，但使用起来非常麻烦，需要修改 node_modules 源码，而且作者最近的提交的版本也在 6 年前，不建议使用。

exceljs 是一款可导出，可读取的 Excel 操作工具，可以实现样式的修改以及 Excel 的高级功能，是非常值得推荐的一个处理 Excel 的库，而 exceljs 也是本文介绍的主角！

exceljs 同于写入 Excel，file-sever 用于保存到本地文件。

保存文件本地我们还需要 file-saver 的辅助

当你能够写出 第一行 Hello ExcelJS 的时候也就意味着你已经可以上手 exceljs 了。

我们一般把每列的第一个设置为表头，并且可以设置每一列的宽度。

表头设置后，我们可以直接根据 key 值去添加每一行的数据。

getColumn 用于读取当前列的数据，我们可以使用 eachCell 进行遍历单元格。

getRow 用于读取每一样，同样我们可以使用 exchCell 进行遍历单元格

我们将读取到的表头添加一些样式，让 Excel 变得看起来更加的好看。

单元格已经成功的添加上了样式，只不过表格中第一行的所有的单元格都被添加上样式了，当然这肯定不是我们想要的。

这个时候我们可以使用 eachCell 来遍历单元格，给每一个单元格添加上样式。

在很多的时候我们需要对表格中每一列的数据进行筛选，比如直接筛选班级，我们可以通过 autoFilter 来添加筛选。

表格的合并应该是业务需求中最频繁的功能。当然这一功能使用 xlsx 也可以实现，前提是你的项目对表格没有复杂的需求。

我们可以直接对表格中的数据进行公式计算，比如 求和(SUM) ， 平均数(AVERAGE) 等等。

有时候我们需要为某个单元格添加数据可以方便直接下拉选择指定的值。

我们可以为指定单元格添加数据验证，比如为不及格的分数添加红色背景。

以上介绍的内容仅仅是 exceljs 的冰山一角，能够满足一些基本的对 Excel 有着美化的业务需求。

在官方的文档里面，还有更多好的用、专业的功能，以及读取表格等非常强大的功能需要你去探索。

ExcelJS 中文文档 https://github.com/exceljs/exceljs/blob/master/README_zh.md