在前端开发过程中，我们经常需要处理 Excel 文件，例如从后端接口获取到的数据可能是表格数据，需要转化为 Excel 格式下载；或者前端应用中需要将某些数据导出为 Excel 文件等。而在实现这些功能时，通常需要使用第三方库来操作 Excel 文件。在本文中，我们将会介绍一个非常方便的 npm 包 - styled-xlsx，它可以帮助我们非常方便地生成 Excel 文件，同时支持自定义表格样式。
styled-xlsx 的安装
在使用 styled-xlsx 之前，需要先安装该 npm 包。可以使用 npm 或者 yarn 安装。
npm install styled-xlsx # 或者 yarn add styled-xlsx
安装好之后，就可以愉快地使用 styled-xlsx 了。
基本使用
styled-xlsx 的使用非常简单，只需导入 exportXLSX 函数即可。该函数接收两个参数：
- sheetData：要生成 Excel 文件的数据。
- options：表格样式配置项。
下面是一个简单的使用示例：
-- -------------------- ---- -------
------ - ---------- - ---- --------------
-- ----
----- --------- - -
-- --
-- ------ ----- ----------- ---------- ----- - ----- --- ----- ---- - -- - ------ ----- ----------- ---------- ----- - ----- --- ----- ---- - ---
-- ----
-- ------ ----- ----- - ------ ----- - -- - ------ ------- ---
-- ------ ---- -- - ------ ------- ---
-- ------ ---- -- - ------ ------- ---
-- ------ ---- -- - ------ ------- ---
--
-- -------
----- ------- - -
------ -
----- --------
--
-------- -
- ------ -- --
- ------ -- --
--
--
--------------------- ---------上面代码中，我们首先定义了一个表格数据 sheetData，它包含了表头和表格内容。然后定义了表格样式配置项 options，包括表格名称、列宽等信息。接着调用 exportXLSX 函数生成 Excel 文件即可。
表格样式配置
styled-xlsx 支持非常丰富的表格样式配置项，如字体、颜色、加粗、斜体、下划线等，还支持单元格边框、填充颜色等配置。下面我们介绍一下主要的配置项。
简单样式
font: { bold?: boolean, italic?: boolean, underline?: boolean | { style: 'single' | 'double' }, color?: string, size?: number, name?: string }
示例：
{ font: { bold: true, color: 'red' } }背景样式
background: string
示例：
{ background: 'blue' }边框样式
border: { top?: { style: 'thin' | 'medium' | 'thick', color?: string }, bottom?: {...}, left?: {...}, right?: {...} }
示例：
{ border: { top: { style: 'thin', color: 'black' }, bottom: { style: 'thick' } } }合并单元格
merge: { cols: number, rows: number }
示例：
{ merge: { cols: 2, rows: 1 } }列宽
示例：
{ width: 15 } // 15 个字符宽度过长省略
ellipsis: boolean
示例：
{ ellipsis: true }示例
下面是一个更复杂的示例，它展示了如何使用 styled-xlsx 创建一个包含多个选项卡的 Excel 文件。每个选项卡都包含不同的数据和样式。
-- -------------------- ---- -------
------ - ---------- - ---- --------------
----- -------- - -
-- --
-
- ------ ----- ----------- ---------- ----- - ----- --- ----- ---- - --
- ------ ------ ----------- ---------- ----- - ----- --- ----- ---- - --
- ------ ------ ----------- ---------- ----- - ----- --- ----- ---- - --
- ------ ----- ----------- ---------- ----- - ----- --- ----- ---- - --
--
-- ----
-- ------ - -- - ------ ------ -- - ------ --- -- - ------ ------ ---
-- ------ - -- - ------ ---- -- - ------ -- -- - ------ ------ ---
-- ------ - -- - ------ ---- -- - ------ --- -- - ------ ------ ---
--
----- ----------- - -
------ -
----- ----- -- -----
--
-------- -
- ------ - --
- ------ -- --
- ------ -- --
- ------ -- --
--
--
----- ---------- - -
-- --
-
- ------ ----- ----------- ---------- ----- - ----- --- ----- ---- - --
- ------ ------ ----------- ---------- ----- - ----- --- ----- ---- - --
- ------ ------ ----------- ---------- ----- - ----- --- ----- ---- - --
- ------ ------- ----------- ---------- ----- - ----- --- ----- ---- - --
--
-- ----
-- ------ - -- - ------ ----- -- - ------ -- -- - ------ ------ ---
-- ------ - -- - ------ ----- -- - ------ -- -- - ------ ------ ---
-- ------ - -- - ------ ----- -- - ------ -- -- - ------ ------ ---
--
----- ------------- - -
------ -
----- ----- -- -----
--
-------- -
- ------ - --
- ------ -- --
- ------ -- --
- ------ -- --
--
--
----- -------- - -
-- --
-
- ------ ----- ----------- ---------- ----- - ----- --- ----- ---- - --
- ------ ----- ----------- ---------- ----- - ----- --- ----- ---- - --
- ------ ----- ----------- ---------- ----- - ----- --- ----- ---- - --
- ------ ------- ----------- ---------- ----- - ----- --- ----- ---- - --
--
-- ----
-- ------ - -- - ------ ------------ -- - ------ ---- --- -- - ------ ----------- --------- ---
-- ------ - -- - ------ ------------- -- - ------ ---- --- -- - ------ ----------- --------- ---
-- ------ - -- - ------ ------------ -- - ------ ---- --- -- - ------ ----------- --------- ---
--
----- ----------- - -
------ -
----- ----- -- -----
--
-------- -
- ------ - --
- ------ -- --
- ------ -- --
- ------ -- --
--
--
----- ------- - ------------- -------------- -------------
--------------------- ----------- ---------- ---------上面代码中，我们创建了三个选项卡，分别为 英雄、武器、文件，分别包含了不同的数据和样式。通过传入一个数组，在调用 exportXSLX 函数时可以同时生成多个选项卡的 Excel 文件。
总结
本文介绍了非常方便的 npm 包 styled-xlsx，在前端开发中使用它可以非常容易地生成 Excel 文件，并且支持自定义表格样式。在实际开发过程中，我们可以根据具体需求进行更加复杂的表格样式设计，从而使生成的 Excel 文件更加美观和实用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663081e8991b448e2173