Loading...
Loading...
Compare original and translation side by side
| Task | Approach |
|---|---|
| Read/analyze content | |
| Edit or create from template | See Editing Presentations |
| Create from scratch | See Creating from Scratch below |
| Item | Value |
|---|---|
| Dimensions | 10" x 5.625" (LAYOUT_16x9) |
| Colors | 6-char hex without # (e.g., |
| English font | Arial (default), or approved alternatives |
| Chinese font | Microsoft YaHei |
| Page badge position | x: 9.3", y: 5.1" |
| Theme keys | |
| Shapes | RECTANGLE, OVAL, LINE, ROUNDED_RECTANGLE |
| Charts | BAR, LINE, PIE, DOUGHNUT, SCATTER, BUBBLE, RADAR |
| 任务 | 实现方式 |
|---|---|
| 读取/分析内容 | |
| 基于模板编辑或创建 | 查看编辑演示文稿 |
| 从头创建 | 查看下方的从头创建工作流 |
| 项目 | 取值 |
|---|---|
| 尺寸 | 10" x 5.625" (LAYOUT_16x9) |
| 颜色 | 6位十六进制值(不带#,例如 |
| 英文字体 | Arial(默认)或经批准的替代字体 |
| 中文字体 | 微软雅黑 |
| 页码标识位置 | x: 9.3", y: 5.1" |
| 主题键 | |
| 形状 | RECTANGLE, OVAL, LINE, ROUNDED_RECTANGLE |
| 图表 | BAR, LINE, PIE, DOUGHNUT, SCATTER, BUBBLE, RADAR |
| File | Contents |
|---|---|
| slide-types.md | 5 slide page types (Cover, TOC, Section Divider, Content, Summary) + additional layout patterns |
| design-system.md | Color palettes, font reference, style recipes (Sharp/Soft/Rounded/Pill), typography & spacing |
| editing.md | Template-based editing workflow, XML manipulation, formatting rules, common pitfalls |
| pitfalls.md | QA process, common mistakes, critical PptxGenJS pitfalls |
| pptxgenjs.md | Complete PptxGenJS API reference |
| 文件 | 内容 |
|---|---|
| slide-types.md | 5种幻灯片页面类型(封面、目录、章节分隔页、内容页、摘要页)+ 额外布局模式 |
| design-system.md | 调色板、字体参考、样式方案(Sharp/Soft/Rounded/Pill)、排版与间距规范 |
| editing.md | 基于模板的编辑工作流、XML操作、格式规则、常见问题 |
| pitfalls.md | QA流程、常见错误、PptxGenJS关键注意事项 |
| pptxgenjs.md | 完整的PptxGenJS API参考 |
undefinedundefined
---
---slides/createSlide(pres, theme)slides/slide-01.jsslides/slide-02.jsslides/imgs/slides/output/"FF0000"slides/createSlide(pres, theme)slides/slide-01.jsslides/slide-02.jsslides/imgs/slides/output/"FF0000"slides/compile.js// slides/compile.js
const pptxgen = require('pptxgenjs');
const pres = new pptxgen();
pres.layout = 'LAYOUT_16x9';
const theme = {
primary: "22223b", // dark color for backgrounds/text
secondary: "4a4e69", // secondary accent
accent: "9a8c98", // highlight color
light: "c9ada7", // light accent
bg: "f2e9e4" // background color
};
for (let i = 1; i <= 12; i++) { // adjust count as needed
const num = String(i).padStart(2, '0');
const slideModule = require(`./slide-${num}.js`);
slideModule.createSlide(pres, theme);
}
pres.writeFile({ fileName: './output/presentation.pptx' });cd slides && node compile.jsslides/compile.js// slides/compile.js
const pptxgen = require('pptxgenjs');
const pres = new pptxgen();
pres.layout = 'LAYOUT_16x9';
const theme = {
primary: "22223b", // 背景/文本用深色
secondary: "4a4e69", // 次要强调色
accent: "9a8c98", // 高亮色
light: "c9ada7", // 浅色强调色
bg: "f2e9e4" // 背景色
};
for (let i = 1; i <= 12; i++) { // 根据需要调整数量
const num = String(i).padStart(2, '0');
const slideModule = require(`./slide-${num}.js`);
slideModule.createSlide(pres, theme);
}
pres.writeFile({ fileName: './output/presentation.pptx' });cd slides && node compile.jsslides/
├── slide-01.js # Slide modules
├── slide-02.js
├── ...
├── imgs/ # Images used in slides
└── output/ # Final artifacts
└── presentation.pptxslides/
├── slide-01.js # 幻灯片模块
├── slide-02.js
├── ...
├── imgs/ # 幻灯片中使用的图片
└── output/ # 最终产物
└── presentation.pptx// slide-01.js
const pptxgen = require("pptxgenjs");
const slideConfig = {
type: 'cover',
index: 1,
title: 'Presentation Title'
};
// MUST be synchronous (not async)
function createSlide(pres, theme) {
const slide = pres.addSlide();
slide.background = { color: theme.bg };
slide.addText(slideConfig.title, {
x: 0.5, y: 2, w: 9, h: 1.2,
fontSize: 48, fontFace: "Arial",
color: theme.primary, bold: true, align: "center"
});
return slide;
}
// Standalone preview - use slide-specific filename
if (require.main === module) {
const pres = new pptxgen();
pres.layout = 'LAYOUT_16x9';
const theme = {
primary: "22223b",
secondary: "4a4e69",
accent: "9a8c98",
light: "c9ada7",
bg: "f2e9e4"
};
createSlide(pres, theme);
pres.writeFile({ fileName: "slide-01-preview.pptx" });
}
module.exports = { createSlide, slideConfig };// slide-01.js
const pptxgen = require("pptxgenjs");
const slideConfig = {
type: 'cover',
index: 1,
title: 'Presentation Title'
};
// 必须为同步函数(不能是async)
function createSlide(pres, theme) {
const slide = pres.addSlide();
slide.background = { color: theme.bg };
slide.addText(slideConfig.title, {
x: 0.5, y: 2, w: 9, h: 1.2,
fontSize: 48, fontFace: "Arial",
color: theme.primary, bold: true, align: "center"
});
return slide;
}
// 独立预览 - 使用幻灯片特定文件名
if (require.main === module) {
const pres = new pptxgen();
pres.layout = 'LAYOUT_16x9';
const theme = {
primary: "22223b",
secondary: "4a4e69",
accent: "9a8c98",
light: "c9ada7",
bg: "f2e9e4"
};
createSlide(pres, theme);
pres.writeFile({ fileName: "slide-01-preview.pptx" });
}
module.exports = { createSlide, slideConfig };| Key | Purpose | Example |
|---|---|---|
| Darkest color, titles | |
| Dark accent, body text | |
| Mid-tone accent | |
| Light accent | |
| Background color | |
backgroundtextmuteddarkestlightest| 键名 | 用途 | 示例 |
|---|---|---|
| 最深色,用于标题 | |
| 深色强调色,用于正文文本 | |
| 中间色调强调色 | |
| 浅色强调色 | |
| 背景色 | |
backgroundtextmuteddarkestlightest303303slide.addShape(pres.shapes.OVAL, {
x: 9.3, y: 5.1, w: 0.4, h: 0.4,
fill: { color: theme.accent }
});
slide.addText("3", {
x: 9.3, y: 5.1, w: 0.4, h: 0.4,
fontSize: 12, fontFace: "Arial",
color: "FFFFFF", bold: true,
align: "center", valign: "middle"
});slide.addShape(pres.shapes.OVAL, {
x: 9.3, y: 5.1, w: 0.4, h: 0.4,
fill: { color: theme.accent }
});
slide.addText("3", {
x: 9.3, y: 5.1, w: 0.4, h: 0.4,
fontSize: 12, fontFace: "Arial",
color: "FFFFFF", bold: true,
align: "center", valign: "middle"
});slide.addShape(pres.shapes.ROUNDED_RECTANGLE, {
x: 9.1, y: 5.15, w: 0.6, h: 0.35,
fill: { color: theme.accent },
rectRadius: 0.15
});
slide.addText("03", {
x: 9.1, y: 5.15, w: 0.6, h: 0.35,
fontSize: 11, fontFace: "Arial",
color: "FFFFFF", bold: true,
align: "center", valign: "middle"
});slide.addShape(pres.shapes.ROUNDED_RECTANGLE, {
x: 9.1, y: 5.15, w: 0.6, h: 0.35,
fill: { color: theme.accent },
rectRadius: 0.15
});
slide.addText("03", {
x: 9.1, y: 5.15, w: 0.6, h: 0.35,
fontSize: 11, fontFace: "Arial",
color: "FFFFFF", bold: true,
align: "center", valign: "middle"
});pip install "markitdown[pptx]"npm install -g pptxgenjsnpm install -g react-icons react react-dom sharppip install "markitdown[pptx]"npm install -g pptxgenjsnpm install -g react-icons react react-dom sharp