PPTX，一款开源且功能强大的在线PPT编辑器

大家好，欢迎来到IT知识分享网。

hi, 大家好, 我是徐小夕.

徐小夕【知乎专栏作家】掘金签约作者，定期分享AI创业，可视化，企业实战项目知识，深度复盘企业中经常遇到的500+技术问题解决方案。【关注趣谈前端，技术路上不迷茫】

之前一直在社区分享零代码&低代码的技术实践，也陆陆续续设计并开发了多款可视化搭建产品，比如：

• H5-Dooring（页面可视化搭建平台）
• 灵语智能文档
• Flowmix/Docx 多模态文档编辑器: 让文档不止于文档

这段时间一直在研发AI在线办公软件，顺手写了一款轻量级PPT在线编辑器，采用最新技术栈实现，演示效果如下：

下面我就和大家介绍一下我开发的PPT在线编辑器，后面会进一步分享技术实现，大家感兴趣可以持续关注。

github地址：https://github.com/MrXujiang/pptx

一. PPT编辑器实现技术栈

为了顺便学习研究一下最新的技术，我采用了如下核心技术栈：

• Nextjs
• @radix-ui
• tailwindcss
• html2canvas
• recharts
• 自研PPT结构转换算法

我们可以用它实现功能复杂的PPT编辑器，并集成AI能力，以下是我设计的PPT的数据结构：

每一个组件元素都设计成了结构化的JSON，方便数据驱动的PPT渲染。

二. PPT在线编辑器功能介绍

2.1 实时可预览的画布

我们可以创建画布，并在顶部菜单中选中对应的组件插入到画布，左侧画布列表会实时展示画布的更新情况（实时缩略图）：

2.2 多样的画布背景设置

我们可以对每一张PPT画布设置不同的背景样式，比如背景色，渐变色，背景图片，甚至能自定义编写css代码来设置背景：

设置背景图片：

2.3 开箱即用的PPT组件

我们可以在PPT中插入文本，图片，图表，表格，图标，形状等元素，来满足我们PPT设计的各种需求。

插入图表的效果：

目前图表支持六种，柱状图，折线图，饼图，面积图，散点图，雷达图，当然后续还会继续扩展。同时图表还支持各种高级配置，比如图表配色方案，图表动画等：

插入自定义表格的效果：

我们可以在配置面板编辑表格数据，并设置更多表格的自定义样式。

插入形状：

目前支持各种复杂形状，并支持各种形状的样式配置。

插入自定义图标：

同时所有的组件都支持旋转，层级调整等，满足各种样式设计需求。

2.4 PPT实时预览演示功能

点击演示按钮，我们可以一键演示PPT，并轻松切换PPT页面。

2.5 PPT导出功能

上面是我实现的导出PPT的效果，在WPS可以直接预览。导出PPT功能需要设计PPT底层数据结构相关的技术，比如需要将数据转化为XML，如下：

// 创建幻灯片母版关系XML function createSlideMasterRelsXml() {   return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"> <Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/slideLayout" Target="../slideLayouts/slideLayout1.xml"/> <Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme" Target="../theme/theme1.xml"/> </Relationships>` } 

// 创建幻灯片母版XML function createSlideMasterXml() {   return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <p:sldMaster xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"> <p:cSld>   <p:bg>     <p:bgRef idx="1001">       <a:schemeClr val="bg1"/>     </p:bgRef>   </p:bg>   <p:spTree>     <p:nvGrpSpPr>       <p:cNvPr id="1" name=""/>       <p:cNvGrpSpPr/>       <p:nvPr/>     </p:nvGrpSpPr>     <p:grpSpPr>       <a:xfrm>         <a:off x="0" y="0"/>         <a:ext cx="0" cy="0"/>         <a:chOff x="0" y="0"/>         <a:chExt cx="0" cy="0"/>       </a:xfrm>     </p:grpSpPr>   </p:spTree> </p:cSld> <p:clrMap bg1="lt1" tx1="dk1" bg2="lt2" tx2="dk2" accent1="accent1" accent2="accent2" accent3="accent3" accent4="accent4" accent5="accent5" accent6="accent6" hlink="hlink" folHlink="folHlink"/> <p:sldLayoutIdLst>   <p:sldLayoutId id="" r:id="rId1"/> </p:sldLayoutIdLst> </p:sldMaster>` }

实现过程相对复杂，这里就不一一介绍了，如果大家有好的方案，也可以在留言区交流反馈。

2.6 PPT属性配置面板

当然还有很多功能后续会和大家持续分享，大家有好的想法和建议可以在评论区留言反馈～

最后

最近我们基于flowmix/docx文档编辑器做了一款智能文档引擎, 叫灵语文档, 这里简单和大家分享一下:

大家可以基于它轻松打造类似飞书文档和钉钉文档的专业级文档管理系统.

文档地址: https://mindlink.turntip.cn

每个月我们都会根据用户的需求和规划的迭代计划持续迭代。当然，如果大家对AI和互联网技术感兴趣，也欢迎在留言区讨论“AI之大变革”。