js幻灯片（幻灯片代码）

小小码 • 2023-09-18 17:30 • 未分类 • 阅读 163

记得在5年前，当时我还在上个东家负责实施项目管理系统的时候，当时的方案是项目计划管理子系统主要用Project Server实现，这个主要由供应商帮我们负责实施落地，但其他子系统均在Sharepoint上进行内部自行开发实施，其中我负责自研实施的项目风险管理子系统，业务有一个需求就是针对每个风险不仅能够方便网页展示，另外需要一个导出项目风险一页纸的PPT的功能，所以我当时就想，当时前端已很强大了（另外一个项目风险Excel导入功能，我就是找了一个免费Javascript Excel库完成的），那有没有前端生成PPT的免费JS库呢？经过一番查找和研究测试，我发现了一个免费功能强大的Javascript生成PowerPoint库：PptxGenJS，并按业务需求最终完成了导出项目风险一页纸的PPT功能。2021年12月13日发布了PptxGenJS最新版本V3.9.0，它的官网地址：
http://gitbrent.github.io/PptxGenJS/，在线Demo地址：
http://gitbrent.github.io/PptxGenJS/demos/

demo

它的github源代码仓库：
https://github.com/gitbrent/PptxGenJS。PptxGenJS创建与Microsoft PowerPoint、Apple Keynote和其他应用程序兼容的Open Office XML(OOXML) 演示文稿。它的功能特性如下：

一、Works Everywhere

1.支持所有现代桌面和移动浏览器

2.与Node、Angular、React和 Electron集成

3.与PowerPoint、Keynote等兼容

二、Full Featured

1.所有主要对象类型均可用（图表、形状、表格等）

2.用于学术/企业品牌的主幻灯片

3.SVG图像、GIF动画、YouTube视频、RTL文本和亚洲字体

三、Simple And Powerful

1.绝对最容易使用的PowerPoint库

2.在编写代码时学习将包括完整的typescript定义

3.包含大量演示代码（超过75张功能幻灯片）

四、Export Your Way

1.将文件直接导出到具有正确MIME类型的客户端浏览器

2.其他可用的导出格式：base64、blob、流等。

3.演示压缩选项等

五、HTML To PowerPoint

1.PowerPoint功能，只需一行代码即可将HTML表格转换为演示文稿

安装：

1、打包: Modern Browsers and IE 11

<script src =" pptxGenJS/dist/pptxgen.bundle.js " > </script >

2、最小：Modern Browsers

<script src =" PptxGenJS/libs/jszip.min.js " > </script > <script src =" PptxGenJS/dist/pptxgen.min.js " > </script >

简单实例：

1、HTML转PowerPoint

let pptx = new PptxGenJS();
pptx.tableToSlides("tableElementId");

   
    
    

   pptx.writeFile({ fileName: "html2pptx-demo.pptx" });

2、创建一个PowerPoint

let pres = new PptxGenJS();

3、创建并保存多个PowerPoint

let pptx = null;

// Presentation 1:
pptx = new PptxGenJS();
pptx.addSlide().addText("Presentation 1", { x: 1, y: 1 });
pptx.writeFile({ fileName: "PptxGenJS-Presentation-1" });

// Presentation 2:
pptx = new PptxGenJS();
pptx.addSlide().addText("Presentation 2", { x: 1, y: 1 });
pptx.writeFile({ fileName: "PptxGenJS-Presentation-2" });

4、添加多媒体到PowerPoint

// Path: full or relative
slide.addMedia({ type: "video", path: "https://example.com/media/sample.mov" });
slide.addMedia({ type: "video", path: "http://www.toutiao.com/media/sample.mov" });

// Base64: pre-encoded string
slide.addMedia({ type: "audio", data: "audio/mp3;base64,iVtDafDrBF[...]=" });

// YouTube: Online video (supported in Microsoft 365)
slide.addMedia({ type: "online", link: "https://www.youtube.com/embed/Dph6ynRVyUc" });