推荐一个免费功能强大JS前端生成幻灯片库PptxGenJS

yumo6662个月前 (03-16)技术文章18

记得在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: "../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" });

其他功能就不一一介绍了,有兴趣的话,您可以自行研究或也欢迎联系我进行交流。

如果您喜欢这篇文章,请关注我,收藏、点赞、评论和转发,会让更多需要帮助的人看到这篇文章。举手之劳,善莫大焉!

相关文章

DeepSeek写的网页,可以一键、无缝插入到PPT,还免费!

前几天给大家分享了《让AI生成一些网页小功能》,当时我让AI生成的这个HTML网页是帮大家部署到了服务器上,所以大家可以一键访问或插入网页中。我们自己让AI生成的HTML页面,怎么插入到PPT中?普通...

盘点如何利用PHP生成PDF文件

在PHP代码中生成PDF文件是一项非常耗时的工作,早期的程序员通常是在PHP代码中利用FPDF生成PDF文件。但在如今,有很多的函数库可以使用,借助它们你可以从你提供的HTML文档生成PDF文件,从而...