表格
使用 table 向幻灯片添加结构化的表格数据。
基本表格
{
"slides": [
{
"children": [
{
"table": {
"x": "1.3cm",
"y": "1.3cm",
"width": "21.2cm",
"height": "7.9cm",
"rows": [
{ "cells": [{ "text": "Name" }, { "text": "Role" }, { "text": "Department" }] },
{ "cells": [{ "text": "Alice" }, { "text": "Engineer" }, { "text": "Dev" }] },
{ "cells": [{ "text": "Bob" }, { "text": "Designer" }, { "text": "UX" }] }
]
}
}
]
}
]
}
import { generatePresentation } from "@office-open/pptx";
generatePresentation({
slides: [
{
children: [
{
table: {
x: "1.3cm",
y: "1.3cm",
width: "21.2cm",
height: "7.9cm",
rows: [
{
cells: [{ text: "Name" }, { text: "Role" }, { text: "Department" }],
},
{ cells: [{ text: "Alice" }, { text: "Engineer" }, { text: "Dev" }] },
{ cells: [{ text: "Bob" }, { text: "Designer" }, { text: "UX" }] },
],
},
},
],
},
],
});
单元格格式
使用 children 配合段落对象实现格式化的单元格内容:
{
"slides": [
{
"children": [
{
"table": {
"x": "1.3cm",
"y": "1.3cm",
"width": "21.2cm",
"height": "7.9cm",
"rows": [
{
"cells": [
{
"fill": "2E74B5",
"verticalAlign": "center",
"children": [
{
"children": [
{ "text": "Header", "bold": true, "size": 14, "fill": "FFFFFF" }
]
}
]
}
]
},
{
"cells": [
{
"fill": "F2F2F2",
"children": [
{
"children": [{ "text": "Data cell", "size": 12 }]
}
]
}
]
}
]
}
}
]
}
]
}
import { generatePresentation } from "@office-open/pptx";
generatePresentation({
slides: [
{
children: [
{
table: {
x: "1.3cm",
y: "1.3cm",
width: "21.2cm",
height: "7.9cm",
rows: [
{
cells: [
{
fill: "2E74B5",
verticalAlign: "center",
children: [
{
children: [{ text: "Header", bold: true, size: 14, fill: "FFFFFF" }],
},
],
},
],
},
{
cells: [
{
fill: "F2F2F2",
children: [
{
children: [{ text: "Data cell", size: 12 }],
},
],
},
],
},
],
},
},
],
},
],
});
丰富的单元格内容
单元格可以包含多个段落:
{
cells: [
{
children: [
{
children: [
{ text: "Bold title", bold: true, size: 14 },
],
},
{
children: [
{ text: "Description", size: 11, fill: "666666" },
],
},
],
},
],
}
合并单元格
使用 rowSpan 和 columnSpan 合并单元格:
{
"slides": [
{
"children": [
{
"table": {
"x": "1.3cm",
"y": "1.3cm",
"width": "21.2cm",
"height": "9.3cm",
"rows": [
{
"cells": [{ "text": "Category", "rowSpan": 2 }, { "text": "Q1" }, { "text": "Q2" }]
},
{
"cells": [{ "text": "100" }, { "text": "120" }]
},
{
"cells": [
{ "text": "Products", "rowSpan": 2 },
{ "text": "200" },
{ "text": "250" }
]
},
{ "cells": [{ "text": "210" }, { "text": "270" }] }
]
}
}
]
}
]
}
import { generatePresentation } from "@office-open/pptx";
generatePresentation({
slides: [
{
children: [
{
table: {
x: "1.3cm",
y: "1.3cm",
width: "21.2cm",
height: "9.3cm",
rows: [
{
cells: [{ text: "Category", rowSpan: 2 }, { text: "Q1" }, { text: "Q2" }],
},
{
cells: [
// 第一个单元格与上方行合并
{ text: "100" },
{ text: "120" },
],
},
{
cells: [{ text: "Products", rowSpan: 2 }, { text: "200" }, { text: "250" }],
},
{
cells: [{ text: "210" }, { text: "270" }],
},
],
},
},
],
},
],
});
列宽
显式控制列宽:
{
"slides": [
{
"children": [
{
"table": {
"x": "1.3cm",
"y": "1.3cm",
"width": "21.2cm",
"columnWidths": [200, 300, 300],
"rows": [
{ "cells": [{ "text": "ID" }, { "text": "Name" }, { "text": "Email" }] },
{ "cells": [{ "text": "1" }, { "text": "Alice" }, { "text": "alice@example.com" }] }
]
}
}
]
}
]
}
import { generatePresentation } from "@office-open/pptx";
generatePresentation({
slides: [
{
children: [
{
table: {
x: "1.3cm",
y: "1.3cm",
width: "21.2cm",
columnWidths: [200, 300, 300], // 每列的宽度
rows: [
{ cells: [{ text: "ID" }, { text: "Name" }, { text: "Email" }] },
{ cells: [{ text: "1" }, { text: "Alice" }, { text: "alice@example.com" }] },
],
},
},
],
},
],
});
边框
自定义单元格边框:
{
text: "Cell with border",
borders: {
top: { width: 2, color: "2E74B5" },
bottom: { width: 2, color: "2E74B5" },
left: { width: 2, color: "2E74B5" },
right: { width: 2, color: "2E74B5" },
},
}
表格级边框会分配到边缘单元格:
{
"slides": [
{
"children": [
{
"table": {
"x": "1.3cm",
"y": "1.3cm",
"width": "21.2cm",
"rows": [
{ "cells": [{ "text": "A" }, { "text": "B" }] },
{ "cells": [{ "text": "C" }, { "text": "D" }] }
],
"borders": {
"top": { "width": 2, "color": "2E74B5" },
"bottom": { "width": 2, "color": "2E74B5" },
"left": { "width": 2, "color": "2E74B5" },
"right": { "width": 2, "color": "2E74B5" }
}
}
}
]
}
]
}
import { generatePresentation } from "@office-open/pptx";
generatePresentation({
slides: [
{
children: [
{
table: {
x: "1.3cm",
y: "1.3cm",
width: "21.2cm",
rows: [
{ cells: [{ text: "A" }, { text: "B" }] },
{ cells: [{ text: "C" }, { text: "D" }] },
],
borders: {
top: { width: 2, color: "2E74B5" },
bottom: { width: 2, color: "2E74B5" },
left: { width: 2, color: "2E74B5" },
right: { width: 2, color: "2E74B5" },
},
},
},
],
},
],
});
Table 选项
| 属性 | 类型 | 说明 |
| -------------- | ------------------- | ----------------- | -------- |
| x | number | UniversalMeasure | 水平位置 |
| y | number | UniversalMeasure | 垂直位置 |
| width | number | UniversalMeasure | 框架宽度 |
| height | number | UniversalMeasure | 框架高度 |
| rows | TableRowOptions[] | 表格行 |
| columnWidths | number[] | 每列宽度 |
| borders | object | 表格级边缘边框 |
| firstRow | boolean | 首行加粗样式 |
| bandRow | boolean | 交替行条纹 |
单元格选项
| 属性 | 类型 | 说明 |
|---|---|---|
text | string | 纯文本内容 |
children | (ParagraphOptions | string)[] | 段落对象 |
fill | FillOptions | 单元格背景填充 |
borders | object | 单元格边框 |
columnSpan | number | 水平合并数 |
rowSpan | number | 垂直合并数 |
verticalAlign | "top" | "center" | "bottom" | "justify" | "distribute" | 垂直文本对齐 |
margins | { top, bottom, left, right } | 单元格内边距 |
边框选项
| 属性 | 类型 | 说明 |
| ----------- | --------------------------------------------------- | ----------------- | -------- |
| width | number | UniversalMeasure | 边框宽度 |
| color | string | 十六进制颜色 |
| dashStyle | "solid" \| "dash" \| "dashDot" \| "lgDash" \| ... | 虚线样式 |