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

yumo6663个月前 (03-16)技术文章38

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

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

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

相关文章

浪漫编程,七夕程序员表白Html代码、烟花特效、相册动画等40款

说起程序员,外行的人对程序员古板的印象是格子衫、双肩包、黑眼睛框、不懂浪漫的指南。但实际上,程序员也是很浪费的!七夕马上到了,我整理了一些程序员七夕表白代码,总共有40款。计划告别的同学收藏起来了(文...

全栈工程师的百宝箱:黑魔法之文档篇

今天收集Session数据的时候收集到了这样的一条,就是“全栈工程师的工具箱”。星期一又想不到什么可以写的内容,就来这样的一篇好了。以下的内容都是压箱底的,找个地方好好收藏。这篇是文档相关篇,介绍一些...

word转html?html是什么格式?图文详解教程

word转html?html是什么格式?打工人经常使用的文档格式就是pdf和word,但是领导突然叫你将word转html格式的时候,你知道如何完成这个任务吗?你知道html是什么格式吗?通过这篇图文...

【AI工具】利用TRAE工具编写在线工具平台

# Trae 在线工具集系统说明文档1. 系统概述Trae是一个综合性的在线工具集系统,集成了多种实用工具,涵盖了日常办公、开发调试、文件处理等多个领域。系统采用前后端分离架构,提供直观的Web界面,...

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

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