
---
title: 用xlsx-style玩转Excel导出——像手动操作Excel表格一样用JS操作Excel          
date: 2022/4/25 09:15:20
tags:                    
- 前端
- xlsx-style
- JavaScript             
author: 李燕         
---

JS里比较知名的Excel导出插件sheetJS免费版没办法修改样式，能修改样式的专业版又要收费，所以我们项目中基本都用xlsx-style实现定制化的Excel导出。

该插件实际上是sheetJS延伸出来的，虽然用了很多次了，但对于该该插件涉及的诸多概念、属性都不是很清晰。所以想通过本文的整理，对该插件的相关概念有一个完整的、清晰的认知，以更好地服务后续项目。

<!-- more -->

**一. 插件安装**

安装命令如下：

```js
npm i xlsx-style --save
```

但是安装完使用的时候会报错，解决办法如下：

找到\node_modules\xlsx-style\dist\cpexcel.js，将807行 的 var cpt = require(’./cpt’ + ‘able’);改成 var cpt = cptable即可。


**二、概念介绍**

（一）workbook Object

即工作簿对象，其常用属性如下：

1.`SheetNames` : 该属性的值是一个数组，用来存储工作表（sheet）的名称。

2.`Sheets` : 该属性的值是一个对象，用来存储所有工作表（sheet）对象。

通过`Sheets[SheetNames]`即可返回对应名称的工作表（sheet）对象。

（二）worsheet Object

即工作表对象，其常用属性如下：

1.每个不以`！`开头的属性，都代表一个单元格。例如`A1`属性，其值为`A1`单元格对象。

2.`!ref`: 该属性的值是一个字符串，用来表示工作表范围，如：`“A1:B5”`

3.`!cols`: 该属性的值是一个对象数组，用来设置列宽。如：


```js
[
  { wpx: 100 }, //设置第1列列宽为200像素
  { wch: 50 }, // 设置第2列列宽为30字符
]
```

4.`!merges`: 该属性的值是一个对象数组，用来合并单元格。如：


```js
[
  { // 合并B2到D4范围内的单元格
    s: { c: 1, r: 1 }, // start：B2
    e: { c: 3, r: 3 }, // end：D4
  } 
]
```
5.`!freeze`: 该属性的值是一个对象，用来冻结单元格（所谓冻结，即鼠标滚动时，该行/该列固定不动）。如：


```js
{
  xSplit: '1', // 冻结列
  ySplit: '1',  // 冻结行
  topLeftCell: 'B2', // 在未冻结区域的左上角显示的单元格，默认为第一个未冻结的单元格。
  state: 'frozen',// 状态为冻结的
}
```

6.打印相关的属性

`!rowBreaks`: 该属性的值是一个数组，用来设置行分页。如：`[1,3]`,表示第1行为一页，第2行和第三行为一页，第三行之后为一页

`!colBreaks`: 该属性的值是一个数组，用来设置列分页。如：`[1,3]`,表示第1列为一页，第2列和第三列为一页，第三列之后为一页

`!pageSetup`: 该属性的值是一个对象，用来设置缩放大小和打印方向。如：


```js
{ 
  scale: '100',  // 缩放100%
  orientation: 'portrait'  //打印方向为纵向
} 
// orientation 取值如下： 'portrait' - 纵向  'landscape' - 横向

```
`!printHeader`: 该属性的值是一个数组，用于分页时设置重复打印的表头，如`[1,3]`,表示需要重复打印的表头为第一行到第三行。

（三）cell Object

即单元格对象。格式如下：


```js
{
  c: C, // C代表列号
  r: R, // r代码行号
}
```

如果想表示单元格范围，则可以如下表示：


```js
{
  s: S, // S表示第一个单元格对象
  e：E, // e表示最后一个单元格对象
}
```

在工作表对象中设置一个单元对象，是以编码后的单元格为属性，进行设置。例如：


```js
A1： {
  v: '123', 
  t: 's', 
  s: {}

}
```
`v`: 单元格的值

`t`: 单元格的类型，b布尔值、n数字、e错误、s字符串、d日期

`s`: 单元格的样式

**三、编码操作**

利用`XLSX.Utils`对象中的以下方法，可以对单元格和单元格范围进行转化，让我们方便地操作单元格。


```js
//编码行号 
XLSX.utils.encode_row(2); //"3" 
//解码行号 
XLSX.utils.decode_row("2"); //1 /

/编码列标 
XLSX.utils.encode_col(2); //"C" 
//解码列标 
XLSX.utils.decode_col("A"); //0

//编码单元格 
XLSX.utils.encode_cell({ c: 1, r: 1 }); //"B2" 
//解码单元格 
XLSX.utils.decode_cell("B1"); //{c: 1, r: 0} 

//编码单元格范围 
XLSX.utils.encode_range({ s: { c: 1, r: 0 }, e: { c: 2, r: 8 } }); //"B1:C9" 
//解码单元格范围 
XLSX.utils.decode_range("B1:C9"); //{s:{c: 1, r: 0},e: {c: 2, r: 8}}

```

**四、样式设置**

设置单元格的样式，就是设置工作表对象中的单元格对象的s属性。这个属性的值也是一个对象。它有五个属性,具体如下：

`fill`: 填充属性，其子属性如下：

- patternType: 设置填充时的图案样式，取值如下：none、solid、darkGray、mediumGray、lightGray、gray125、gray0625、darkHorizontal、darkVertical、 darkDown、darkUp、darkGrid、darkTrellis、lightHorizontal、lightVertical、lightDown、lightUp、 lightGrid、lightTrellis

- bgColor: 设置填充时的图案背景色，是一个对象，取值如：{rgb: "FFFFAA00"}（十六进制ARGB值）, 或{theme: "1"}（主题颜色的整数索引，默认是'0'）

- bgColor: 设置填充时的图案前景色，取值同bgColor属性。

   
`font`: 字体属性，其子属性如下：

- name: 字体名称，值为字符串
- sz: 字号,值为数字
- color: 字体颜色,值为对象，同上述bgColor
- bold: 加粗，值为true 或 fasle
- underline：下划线，值为true 或 fasle
- italic：倾斜，值为true 或 fasle
- italic：倾斜，值为true 或 fasle
- strike：删除线，值为true 或 fasle
- vertAlign：上标或下标，值为'superscript'或 'subscript'

`numFmt`: 对数字类型的单元格进行格式化，其值为字符串或数字，如：{ numFmt： 'yyyy/m/d h:mm'} 或 { numFmt： '[=1]"男";[=0]"女"'}，具体格式化规则参见Excel中设置单元格格式中的数字格式设置。

`alignment`: 对其属性，其子属下如下：

- vertical： 垂直对齐，值为"bottom"、"center"或 "top"
- horizontal： 水平对齐，值为"left"、"center"或 "right"
- wrapText：自动换行，值为true 或 false
- readingOrder：文字方向，值为数字0（根据内容决定)、1(从左到有) 或 2（从右到左）
- textRotation：文本旋转角度，值为数字,0至180或 255(垂直排列) ，默认为0

`border`: 边框属性，其子属下如下：

- top：上边框样式，值为对象，如：{style: 'thin', color:{rgb: "FFFFAA00"}}，其中，style的值集包括：thin、medium、thick、dotted、hair、dashed、mediumDashed、dashDot、mediumDashDot、dashDotDot、mediumDashDotDot、slantDashDot、double
- bottom: 下边框样式，值同top
- left: 左边框样式，值同top
- right: 右边框样式，值同top
- diagonalUp: 上对角线，值为true 或 fasle
- diagonalDown: 下对角线，值为true 或 fasle

**五、数据输出**

xlsx-style有两个输出数据的方法 `write` 和 `writeFile` 方法。因为 writeFile方法需要基于 node 环境才可以使用，我们常用的是write方法，所以此处重点介绍以write方法。


```js
XLSX.write(workbook, wopts)
```
workbook参数即是我们要导出的工作簿对象，上面已经介绍过。

wopt参数也是一个对象，其属性如下：

`type`： 输出数据类型，值集包括："base64"、"binary"（二进制字符串）、"buffer"（node.js缓冲区）、"file"（直接创建文件，node环境下有效）

`cellDates`：是否将日期存储为类型'd'(默认为'n')，默认为fasle

`bookType`: 工作簿的类型(xlsx、xlsm或 xlsb),默认为xlsx

`showGridLines`： 是否显示网格线，默认为true

`Props`: 可以设置为一个对象，存入以下与工作簿相关的信息，其子属性包括：title、subject（主题）、creator（创建者）、keywords（关键字）、description（描述）

**六、后记**

本篇文章仅仅是对xlsx-style相关的概念、属性和方法进行了一个详细的整理，至于如何利用xlsx-style玩转Excel实现定制化的导出，我们下篇文章再细说。