开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

表格

语法

slide.addTable(rows, OPTIONS);

平时我们遇到的表格其实就是一个二维数组，所以在PptxGenJS中，表格也是用二维数组来表示的，参数rows就是一个二维数组，数组中的每一个元素代表一行，每一行又是一个数组，然后数组中的每一个元素代表一个单元格。像下面这样：

const rows = [
    ['姓名', '年龄', '爱好'],
    ['小明', 18, '敲代码'],
    ['小红', 16, '看小明敲代码']
]

上面的代码生成出来的表格如下图：

默认的表格是不具有任何样式的，我们可以通过配置属性来为表格添加样式。

配置属性

布局配置

布局配置属性有两个，分别是列宽和行高

列宽 - colW

这个属性有两种形式，当它的值为一个数值的时候，表示为该表格的每一列都设置相同的宽度，比如像下面这样：

colW:2.0 // 表示为表格的每一列设置2的宽度

当这个属性的值为一个数组的时候，表示按照数组中的顺序为表格每一列设置宽度，如下：

colW:[1,2,3,4,5]

上面的代码表示，为表格的第一列设置1的宽度，第二列设置2的宽度，第三列设置3的宽度，以此类推。

行高 - rowH

行号的属性用法与列宽一样，它同样是有两种形式，当其值为一个数值的时候，表示为整个表格的每一行都设置相同的行高，如果是一个数组的话，表示按照数组中元素的顺序为每一行设置各自的高度。

格式化配置

格式化配置是用来配置表格样式的，比如说表格的字体大小，字体颜色，边框等等

水平对齐：align
垂直对齐：valign
粗体：bold
单元格边框：border
字体颜色：color
背景填充：fill
字族：fontFace
字体大小：fontSize
斜体：italic
列合并：colSPan
行合并：rowSpan
下划线：underline

这些属性很多都是和文本框的用法一样的，就不重复叙述了，不同的有3个属性，如下：

单元格边框 - border

border属性是一个对象，有 type,pt,color 三个属性，分别代表边框的类型、边框厚度、边框颜色。

边框的类型一共有3种：solid,none,dash，分别是实线、无边框、虚线边框。

行/列合并 - row/colSpan

这两个属性的取值范围都是 2-n，有一点要注意的是，使用列合并的时候，一定一定要记得写上表格的w属性。

表格自动分页 - autoPage

当表格内容过多，一页PPT装不下的时候，可以考虑使用表格的自动分页功能，会将表格的内容切割出来，放到下一页，直到全部内容都被放完。

这个功能，我试了一下，一般般。

如果想要启用这个功能，只需要将表格的 autoPage 属性设为 true 即可。

表格的一些进阶用法

单元格配置

有时候，我们的表格中希望某几个单元格有着特别的样式，比如说单元格中值小于90的就将背景色变成红色。这个时候我们可以像下面这样来实现。

首先前面我们也说过了，表格第一个参数是一个二维数组，最外层数组装着一个一个的行数组，行数组中又装着一个一个的单元格。

在我们上面的例子中，单元格的类型是字符串或者数值类型，除此之外，它还可以是对象类型的。 比如写成下面这样“

const rows = [
    [
        { text: '姓名', options: { bold: true } },
        { text: '年龄', options: { bold: true } },
        { text: '爱好', options: { bold: true } },
    ],
    ['小明', 18, '敲代码'],
    ['小红', 16, '看小明敲代码']
]

每个单元格可以是一个对象，这个对象包含两个属性，必有的text属性和可选的options属性，通过给每一个单元格的options配置不同的配置，就可以做到单元格的样式差异化了。比如说上面的表格就变成下面这样了：

然后有时候，我们还会希望，单元格中的文字也各自有各自的样式，这个也可以实现。当单元格元素是一个对象的时候，它的text属性除了是基本类型之外，还可以是一个数组。 这个时候，数组中的每一个元素都是一个text文本对象，这个文本对象都有一个text属性和options属性，进而实现文字内容的样式差异化。看文字可能比较绕，看代码：

const rows = [
    [
        {
            text: [
                { text: '姓', options: { color: 'FF0000' } }, // 红色字
                { text: '名', options: { color: '00FF00' } }, // 绿色字
            ], options: { bold: true }
        },
        { text: '年龄', options: { bold: true } },
        { text: '爱好', options: { bold: true } },
    ],
    ['小明', 18, '敲代码'],
    ['小红', 16, '看小明敲代码']
]

上面的代码生成的表格如下：

表格使用技巧

一般来说，在书写表格相关的代码，我都不会直接写配置，比如说表格的表头有“姓名”，“性别”，“年龄”这三列，然后希望它们的背景色是蓝色，字体加粗，字号为20，我不会采用单元格对象的形式，而是直接写个字符串数组，然后搭配数组的map方法来统一为它们复制样式属性。一来减少代码量，二来修改起来会更加的方便。

【PptxGenJS】表格的基本使用教程

表格

语法