PptxGenJS 保姆级实战教程用 JavaScript 把报名数据一键变成 PPTX 演示文稿【免费下载链接】PptxGenJSBuild PowerPoint presentations with JavaScript. Works with Node, React, web browsers, and more.项目地址: https://gitcode.com/gh_mirrors/pp/PptxGenJS每次活动收尾最折磨人的往往不是活动本身而是那份要给领导、给学员看的汇报演示文稿数据要从报名表里一格一格复制图表要在软件里手动拖拽几十页的版式还得保证长一个样。PptxGenJS 就是为这种数据变 PPT的场景而生的 JavaScript 库它在 Node、浏览器、React 里都能运行用几行代码就能把文本、表格、图表、图片、母版、音视频全部塞进一份符合标准的 PPTX 演示文稿全程不需要安装任何 Office 软件。这篇文章不聊空概念直接带你把一份读书会结营汇报从头到尾做出来。做完你会发现PPT 和 Excel 一样也是能被计算出来的。先看看这份 PPT 最终能长什么样设想一下这样的成品一共十二页封面铺着散景海报背景第二页是报名人数明细表中段是四周出勤率、作业完成率的柱状图每页右上角还统一挂着一行青橙读书会 · 内部资料的小字页眉。而它的全部生产原料只有一张报名数据的 JSON 和一段一百来行的脚本。数据一更新脚本重跑一遍一分钟内又是一份崭新的汇报。这就是我们接下来要亲手做到的事。它的底气从哪来PPTX 不过是一只拉链包没写过代码的同事听说用代码生成 PPT第一反应往往是PPT 不是 Office 软件才能做出来的东西吗答案可能和你想的不一样。别看文件后缀叫.pptx用解压工具拆开里面根本不是你想的那种一个文件而是一堆 XML 小纸条外加图片、音频等素材。每张小纸条上都写着这一页该有什么内容、摆在哪个坐标、尺寸多大PowerPoint 打开文件时不过是照着纸条把画面渲染出来。所以 PptxGenJS 干的事可以浓缩成一句话你递需求单它出图纸最后装盒。你写一个 JavaScript 对象告诉它这里放标题、那里放表格它负责把这些对象改写成 Office 认得的 XML 零件再统一打包成.pptx。整套流程像点外卖你只管选菜品、填送餐地址后厨怎么颠勺不用操心。开工之前花两分钟装好环境在项目目录里执行一行命令安装依赖npm install pptxgenjsNode 环境可以直接跑脚本想在网页里用引入打包好的 JS 文件同样可行。装好之后最朴素的能跑起来版本只有四步建演示文稿 → 加幻灯片 → 放内容 → 存文件。const pptx new pptxgen(); const slide pptx.addSlide(); slide.addText(结营汇报, { x: 1, y: 1, fontSize: 40, bold: true }); pptx.writeFile({ fileName: camp-done.pptx });跑完这四行你的目录里就躺着一个能双击打开的 PPTX 文件。接下来要做的所有花样都建立在这四步之上。第一步让标题在封面上站起来加文本用addText除了位置字号、颜色、加粗、对齐都是顺手的事slide.addText(2026 春季读书会结营汇报, { x: 0.6, y: 0.6, w: 8, h: 1.2, fontSize: 36, bold: true, color: 0f4c81 });这里有个容易忽略的细节坐标单位是英寸默认画布宽 10 英寸、高 5.625 英寸x 加上 w 别超过 10否则内容就悄悄溜到画布外面去了。第二步把报名数据倒进表格页读书会的报名数据在系统里本来就是现成的二维结构直接喂给addTableslide.addTable([ [{ text: 学员, options: { fill: { color: 0088CC }, color: ffffff } }, 出勤, 作业], [林小满, 10/10, A], [周大川, 9/10, B] ], { x: 0.6, y: 1.2, w: 8 });表格的本质就是一个二维数组每个格子可以是纯文本也可以是内容 样式的对象想让表头带底色给那一格单独配一个options就行。数据在 JSON 里是什么样摆到页面上就是什么样再也不用手动复制粘贴。第三步图表页让数据自己开口说话汇报里最硬的证据是图表。addChart的数据结构和 ECharts 的思路类似一组数据就是一个对象slide.addChart(pptx.ChartType.bar, [ { name: 出勤率, labels: [第1周,第2周,第3周,第4周], values: [92, 95, 88, 96] }, { name: 作业完成率, labels: [第1周,第2周,第3周,第4周], values: [80, 86, 91, 94] } ], { x: 0.6, y: 1.2, w: 7, h: 3.5, barDir: col, showTitle: true, title: 四周参与情况 });柱状图、折线图、饼图都列在ChartType这个枚举里换一个值就能换一种图。数据是活的图表就是活的——下期数据更新脚本重跑图自己跟着变。第四步封面换上一张海报背景封面光秃秃的没气质addImage支持本地文件、URL 和 base64 三种来源。仓库的演示素材里恰好有一张现成的散景背景图铺满整页当封面正合适slide.addImage({ path: demos/common/images/title_bkgd_alt.jpg, x: 0, y: 0, w: 10, h: 5.625 });图片的用法就两个要点路径别写错尺寸别超界。剩下的事交给代码。第五步用母版统一整份 PPT 的长相结营汇报十几页如果每页都手动加页眉、页脚、Logo改一次样式就要动十几处。母版功能就是为这个设计的只定义一次后面每一页都自动带上这套底子。pptx.defineSlideMaster({ title: CAMP_MASTER, background: { color: F7F3E8 }, objects: [ { text: { text: 青橙读书会 · 内部资料, options: { x: 0.3, y: 0.15, fontSize: 10, color: 888888 } } } ] }); const slide pptx.addSlide({ masterName: CAMP_MASTER });母版就像给整栋楼定了统一的精装标准每间房每页幻灯片自动带上相同的墙纸和吊顶你只需要往房间里摆家具。再配合 JSON 数据驱动批量生成几十页结构相同、数据不同的汇报就成了水到渠成的事。进阶彩蛋把网页上的报名表整张搬进 PPT如果报名数据本来就展示在一个网页表格里还有个更省事的玩法——tableToSlides能把网页里那张表格整张复印进演示文稿自动拆成好几页单元格的底色和文字格式都保留得清清楚楚pptx.tableToSlides(signupTable); pptx.writeFile({ fileName: html2pptx-demo.pptx });财务导出的报表、后台管理的列表、BI 工具里的看板这些平时只能截图贴进 PPT 的东西现在一行代码就能变成可编辑的 PPT 页面。想找更多现成玩法仓库的 demos 目录里躺着七十多个示例幻灯片比读文档直观得多。新手最容易卡住的四个地方把这些高频问题提前排掉能帮你省下大把排查时间。1. 中文变成方块或乱码。生成的文件在别人电脑上打开中文显示成□□。解决方式是给文本显式指定中文字体slide.addText(中文内容, { x: 1, y: 1, fontFace: Microsoft YaHei });2. 图片显示不出来。多半是路径写错或者用了本机的绝对路径。要么改用和脚本同目录的相对路径要么干脆把图片转成 base64 塞进代码里一劳永逸。3. 元素跑到了页面外面。记住默认画布是 10 × 5.625 英寸。动手前先在草稿纸上把各元素的位置排一遍比反复跑脚本试错省心得多。4. 文件生成了却打不开。最常见的原因是保存时没写文件名或者文件名里带了特殊字符。养成习惯每次writeFile都显式指定fileName。把做 PPT这件事交给代码回头看看整个流程装依赖、建演示文稿、加文本、倒表格、插图表、铺背景、定母版——你全程没打开过一次 Office却交出了一份带封面、带图表、版式统一的结营汇报。改一个数据重跑一遍一分钟出新版。这就是代码做 PPT 和手工做 PPT 的本质区别前者是一条流水线后者是一次性苦力。如果你想告别手工排版现在就可以动手执行npm install pptxgenjs把上面的示例脚本跑通克隆仓库https://gitcode.com/gh_mirrors/pp/PptxGenJS翻一翻 demos 目录找到和你业务最像的示例照着改挑一份你手头最重复、最枯燥的汇报试着用代码重做一遍。完成第三步之后你大概会发出和很多人一样的感叹PPT 不是做出来的是算出来的。下次再有人问你汇报是怎么做的你大可以云淡风轻地回一句数据喂的。【免费下载链接】PptxGenJSBuild PowerPoint presentations with JavaScript. Works with Node, React, web browsers, and more.项目地址: https://gitcode.com/gh_mirrors/pp/PptxGenJS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
PptxGenJS 保姆级实战教程：用 JavaScript 把报名数据一键变成 PPTX 演示文稿
PptxGenJS 保姆级实战教程用 JavaScript 把报名数据一键变成 PPTX 演示文稿【免费下载链接】PptxGenJSBuild PowerPoint presentations with JavaScript. Works with Node, React, web browsers, and more.项目地址: https://gitcode.com/gh_mirrors/pp/PptxGenJS每次活动收尾最折磨人的往往不是活动本身而是那份要给领导、给学员看的汇报演示文稿数据要从报名表里一格一格复制图表要在软件里手动拖拽几十页的版式还得保证长一个样。PptxGenJS 就是为这种数据变 PPT的场景而生的 JavaScript 库它在 Node、浏览器、React 里都能运行用几行代码就能把文本、表格、图表、图片、母版、音视频全部塞进一份符合标准的 PPTX 演示文稿全程不需要安装任何 Office 软件。这篇文章不聊空概念直接带你把一份读书会结营汇报从头到尾做出来。做完你会发现PPT 和 Excel 一样也是能被计算出来的。先看看这份 PPT 最终能长什么样设想一下这样的成品一共十二页封面铺着散景海报背景第二页是报名人数明细表中段是四周出勤率、作业完成率的柱状图每页右上角还统一挂着一行青橙读书会 · 内部资料的小字页眉。而它的全部生产原料只有一张报名数据的 JSON 和一段一百来行的脚本。数据一更新脚本重跑一遍一分钟内又是一份崭新的汇报。这就是我们接下来要亲手做到的事。它的底气从哪来PPTX 不过是一只拉链包没写过代码的同事听说用代码生成 PPT第一反应往往是PPT 不是 Office 软件才能做出来的东西吗答案可能和你想的不一样。别看文件后缀叫.pptx用解压工具拆开里面根本不是你想的那种一个文件而是一堆 XML 小纸条外加图片、音频等素材。每张小纸条上都写着这一页该有什么内容、摆在哪个坐标、尺寸多大PowerPoint 打开文件时不过是照着纸条把画面渲染出来。所以 PptxGenJS 干的事可以浓缩成一句话你递需求单它出图纸最后装盒。你写一个 JavaScript 对象告诉它这里放标题、那里放表格它负责把这些对象改写成 Office 认得的 XML 零件再统一打包成.pptx。整套流程像点外卖你只管选菜品、填送餐地址后厨怎么颠勺不用操心。开工之前花两分钟装好环境在项目目录里执行一行命令安装依赖npm install pptxgenjsNode 环境可以直接跑脚本想在网页里用引入打包好的 JS 文件同样可行。装好之后最朴素的能跑起来版本只有四步建演示文稿 → 加幻灯片 → 放内容 → 存文件。const pptx new pptxgen(); const slide pptx.addSlide(); slide.addText(结营汇报, { x: 1, y: 1, fontSize: 40, bold: true }); pptx.writeFile({ fileName: camp-done.pptx });跑完这四行你的目录里就躺着一个能双击打开的 PPTX 文件。接下来要做的所有花样都建立在这四步之上。第一步让标题在封面上站起来加文本用addText除了位置字号、颜色、加粗、对齐都是顺手的事slide.addText(2026 春季读书会结营汇报, { x: 0.6, y: 0.6, w: 8, h: 1.2, fontSize: 36, bold: true, color: 0f4c81 });这里有个容易忽略的细节坐标单位是英寸默认画布宽 10 英寸、高 5.625 英寸x 加上 w 别超过 10否则内容就悄悄溜到画布外面去了。第二步把报名数据倒进表格页读书会的报名数据在系统里本来就是现成的二维结构直接喂给addTableslide.addTable([ [{ text: 学员, options: { fill: { color: 0088CC }, color: ffffff } }, 出勤, 作业], [林小满, 10/10, A], [周大川, 9/10, B] ], { x: 0.6, y: 1.2, w: 8 });表格的本质就是一个二维数组每个格子可以是纯文本也可以是内容 样式的对象想让表头带底色给那一格单独配一个options就行。数据在 JSON 里是什么样摆到页面上就是什么样再也不用手动复制粘贴。第三步图表页让数据自己开口说话汇报里最硬的证据是图表。addChart的数据结构和 ECharts 的思路类似一组数据就是一个对象slide.addChart(pptx.ChartType.bar, [ { name: 出勤率, labels: [第1周,第2周,第3周,第4周], values: [92, 95, 88, 96] }, { name: 作业完成率, labels: [第1周,第2周,第3周,第4周], values: [80, 86, 91, 94] } ], { x: 0.6, y: 1.2, w: 7, h: 3.5, barDir: col, showTitle: true, title: 四周参与情况 });柱状图、折线图、饼图都列在ChartType这个枚举里换一个值就能换一种图。数据是活的图表就是活的——下期数据更新脚本重跑图自己跟着变。第四步封面换上一张海报背景封面光秃秃的没气质addImage支持本地文件、URL 和 base64 三种来源。仓库的演示素材里恰好有一张现成的散景背景图铺满整页当封面正合适slide.addImage({ path: demos/common/images/title_bkgd_alt.jpg, x: 0, y: 0, w: 10, h: 5.625 });图片的用法就两个要点路径别写错尺寸别超界。剩下的事交给代码。第五步用母版统一整份 PPT 的长相结营汇报十几页如果每页都手动加页眉、页脚、Logo改一次样式就要动十几处。母版功能就是为这个设计的只定义一次后面每一页都自动带上这套底子。pptx.defineSlideMaster({ title: CAMP_MASTER, background: { color: F7F3E8 }, objects: [ { text: { text: 青橙读书会 · 内部资料, options: { x: 0.3, y: 0.15, fontSize: 10, color: 888888 } } } ] }); const slide pptx.addSlide({ masterName: CAMP_MASTER });母版就像给整栋楼定了统一的精装标准每间房每页幻灯片自动带上相同的墙纸和吊顶你只需要往房间里摆家具。再配合 JSON 数据驱动批量生成几十页结构相同、数据不同的汇报就成了水到渠成的事。进阶彩蛋把网页上的报名表整张搬进 PPT如果报名数据本来就展示在一个网页表格里还有个更省事的玩法——tableToSlides能把网页里那张表格整张复印进演示文稿自动拆成好几页单元格的底色和文字格式都保留得清清楚楚pptx.tableToSlides(signupTable); pptx.writeFile({ fileName: html2pptx-demo.pptx });财务导出的报表、后台管理的列表、BI 工具里的看板这些平时只能截图贴进 PPT 的东西现在一行代码就能变成可编辑的 PPT 页面。想找更多现成玩法仓库的 demos 目录里躺着七十多个示例幻灯片比读文档直观得多。新手最容易卡住的四个地方把这些高频问题提前排掉能帮你省下大把排查时间。1. 中文变成方块或乱码。生成的文件在别人电脑上打开中文显示成□□。解决方式是给文本显式指定中文字体slide.addText(中文内容, { x: 1, y: 1, fontFace: Microsoft YaHei });2. 图片显示不出来。多半是路径写错或者用了本机的绝对路径。要么改用和脚本同目录的相对路径要么干脆把图片转成 base64 塞进代码里一劳永逸。3. 元素跑到了页面外面。记住默认画布是 10 × 5.625 英寸。动手前先在草稿纸上把各元素的位置排一遍比反复跑脚本试错省心得多。4. 文件生成了却打不开。最常见的原因是保存时没写文件名或者文件名里带了特殊字符。养成习惯每次writeFile都显式指定fileName。把做 PPT这件事交给代码回头看看整个流程装依赖、建演示文稿、加文本、倒表格、插图表、铺背景、定母版——你全程没打开过一次 Office却交出了一份带封面、带图表、版式统一的结营汇报。改一个数据重跑一遍一分钟出新版。这就是代码做 PPT 和手工做 PPT 的本质区别前者是一条流水线后者是一次性苦力。如果你想告别手工排版现在就可以动手执行npm install pptxgenjs把上面的示例脚本跑通克隆仓库https://gitcode.com/gh_mirrors/pp/PptxGenJS翻一翻 demos 目录找到和你业务最像的示例照着改挑一份你手头最重复、最枯燥的汇报试着用代码重做一遍。完成第三步之后你大概会发出和很多人一样的感叹PPT 不是做出来的是算出来的。下次再有人问你汇报是怎么做的你大可以云淡风轻地回一句数据喂的。【免费下载链接】PptxGenJSBuild PowerPoint presentations with JavaScript. Works with Node, React, web browsers, and more.项目地址: https://gitcode.com/gh_mirrors/pp/PptxGenJS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考