在前端开发中，很多时候需要将数据导出为 Excel 文件，此时可以使用 npm 包 export-excel 来实现。该 npm 包已经被广泛使用，而且它提供了非常灵活的 API，支持自定义样式、表头、数据等。
安装 export-excel
可以使用 npm 安装 export-excel，如下：
npm install export-excel --save
使用 export-excel
基本使用
使用 export-excel 非常简单，只需要组装数据，然后传递到 exportExcel 函数即可。下面是一个简单的例子：
-- -------------------- ---- ------- ------ ----------- ---- --------------- ----- ---- - - - --- ---- ----- ----- ---- -- -- - --- ---- ----- ----- ---- -- -- - --- ---- ----- ----- ---- -- -- -- ----- ------- - - --------- ------------ ---------- ------- -- ----- ------- - - - ------ ----- ---- ---- -- - ------ ----- ---- ------ -- - ------ ----- ---- ----- -- -- ----------------- -------- ---------
上面的代码将 data 数组导出为一个名为“导出数据.xlsx”、表名为“数据列表”的 Excel 文件，其中需要导出的列信息由 columns 数组中的每个对象表示，key 属性表示数据对象的属性名，title 属性则表示在 Excel 文件中显示的列名。
自定义样式
可以通过 headerStyles、cellStyles 和 alternateRowStyles 属性来设置 Excel 文件的样式。下面是一个例子：
-- -------------------- ---- -------
------ ----------- ---- ---------------
----- ---- - -
- --- ---- ----- ----- ---- -- --
- --- ---- ----- ----- ---- -- --
- --- ---- ----- ----- ---- -- --
--
----- ------- - -
--------- ------------
---------- -------
------------- -
----- -
----- -----
--
----- -
----- ----------
------------ --------
-------- - ----- ---------- --
--
--
----------- -
------- -
---- - ------ ------- ------ - ----- ---------- - --
----- - ------ ------- ------ - ----- ---------- - --
------- - ------ ------- ------ - ----- ---------- - --
------ - ------ ------- ------ - ----- ---------- - --
--
--
------------------- -
----- -
----- ----------
------------ --------
-------- - ----- ---------- --
--
--
--
----- ------- - -
- ------ ----- ---- ---- --
- ------ ----- ---- ------ --
- ------ ----- ---- ----- --
--
----------------- -------- ---------上面的代码中，headerStyles 属性用于设置表头的样式，cellStyles 属性用于设置单元格的样式，alternateRowStyles 属性用于设置交替行的样式。在这些属性中，font、fill、border 等属性都是由 ExcelJS 这个库定义的，因此可以参考该库的文档来实现更多自定义的样式。
自定义表头
如果原始数据中的属性名和需要在表头中展示的列名不一致，可以使用 header 数组来自定义表头，如下：
-- -------------------- ---- ------- ------ ----------- ---- --------------- ----- ---- - - - --- ---- ----- ----- ---- -- -- - --- ---- ----- ----- ---- -- -- - --- ---- ----- ----- ---- -- -- -- ----- ------- - - --------- ------------ ---------- ------- -- ----- ------- - - - ------ ----- ---- ---- -- - ------ ----- ---- ------ -- - ------ ----- ---- ----- -- -- ----- ------ - - ----- ----- -------- -- ----------------- -------- -------- - ------ ---
在上述代码中，header 数组中的元素项和 columns 数组中的每个对象的 title 属性相对应。因此，其中的“编号”、“姓名”和“年龄（岁）”分别对应了 columns 数组中的“ID”、“姓名”和“年龄”。
自定义导出数据
在上述例子中，数据直接从数组中提取并导出，但如果有需要进行数据处理、过滤或映射等操作，可以使用 transform 函数来实现自定义的导出数据，如下：
-- -------------------- ---- -------
------ ----------- ---- ---------------
----- ---- - -
- --- ---- ----- ----- ---- -- --
- --- ---- ----- ----- ---- -- --
- --- ---- ----- ----- ---- -- --
--
----- ------- - -
--------- ------------
---------- -------
--
----- ------- - -
- ------ ----- ---- ---- --
- ------ ----- ---- ------ --
- ------ ----- ---- ----- --
--
----- --------- - ------ -- -
------ --------------- ------ -- -
------ -
--------
--- ----- - --
---- ------------ ---
--
---
--
----------------- -------- -------- - --------- ---在上述代码中，transform 函数接受原始数据数组，并返回一个经过处理后的新数组。在这个例子中，我们新增了一个“编号”列，同时将“年龄”列的单位从“岁”改为“岁”。
总结
通过以上几个例子，我们可以看到 export-excel 这个 npm 包非常灵活，支持自定义样式、表头名称、导出数据等功能，很好地满足了前端开发中导出 Excel 数据的需求。因此，我们可以在实际项目中使用该包来优化数据导出的流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c1381e8991b448d9b54