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

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

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

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

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

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

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

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

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

一. PPT编辑器实现技术栈

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

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

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

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

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

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

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

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

2.1 实时可预览的画布

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

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

2.2 多样的画布背景设置

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

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

设置背景图片：

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

2.3 开箱即用的PPT组件

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

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

插入图表的效果：

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

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

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

插入自定义表格的效果：

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

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

插入形状：

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

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

插入自定义图标：

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

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

2.4 PPT实时预览演示功能

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

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

2.5 PPT导出功能

PPTX，一款开源且功能强劲的在线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="2147483649" r:id="rId1"/>
</p:sldLayoutIdLst>
</p:sldMaster>`
}