PPTist 免费开源在线PPT编辑器：Web演示文稿制作与编辑新手完整指南-育师

PPTist 免费开源在线PPT编辑器：Web演示文稿制作与编辑新手完整指南

【免费下载链接】PPTistPowerPoint-ist（/'pauəpɔintist/）, An online presentation application that replicates most of the commonly used features of MS PowerPoint, allowing for the editing and presentation of PPT online. It also supports AIPPT and local PPTX file preview.项目地址: https://gitcode.com/gh_mirrors/pp/PPTist

PPTist 是一个基于 Vue 3 + TypeScript 构建的免费开源在线演示文稿应用，在浏览器中还原了 PowerPoint 的大部分常用功能，支持富文本、图片、形状、图表、表格、公式、音视频的编辑，以及页面过渡和元素动画。它还提供了模板式 AI 生成 PPT 能力和本地 PPTX 文件的在线预览。本文面向想在浏览器里制作并导出演示材料的用户，也适合计划把它当作底座、构建自己演示类产品的 Web 开发者阅读。

它是什么：开源的在线 PPT 编辑与演示应用

PPTist 的定位是 Web 演示文稿编辑器/放映器，把编辑、放映、移动端预览整套能力放在浏览器里完成。核心特性如下：

还原 PowerPoint 常用元素：文字、图片、形状、线条、七类图表、表格、视频、音频、LaTeX 公式
桌面级交互：右键菜单、数十种快捷键、吸附对齐线、多选批处理、撤销重做
与 Office 文件双向打通：导入、导出 PPTX，另支持 JSON、图片、PDF（打印）、自有 pptist 格式
模板式 AIPPT：先制作模板并标注页面类型，AI 再按大纲生成整套结构化页面数据
移动端可用：基础编辑、预览和播放都支持手机设备

上手指南：从第一次打开到第一次导出

本地运行

需要 Node.js 20 及以上版本，以下命令即可启动：

git clone https://gitcode.com/gh_mirrors/pp/PPTist cd PPTist npm install npm run dev

用浏览器访问 http://localhost:5173，编辑器即打开。

第一次打开你会看到什么

界面分五个区域：顶部工具栏负责文件操作和视图开关；左侧是幻灯片缩略图与模板区，可增删页面、拖拽调整顺序；中央画布支持拖拽、缩放、旋转和框选；右侧属性面板随选中元素切换，调整字体、颜色、动画、位置等；底部可展开备注区，用富文本写演讲提词。打开后会自动加载一份默认文稿和内置模板，无需建文件即可直接上手。

开始编辑

双击画布空白处即可快速创建文本框；按 R、O、L 可快速画出矩形、椭圆和直线；图片可以直接从本地拖进画布，也可以从系统剪贴板粘贴。选中元素后，右侧面板会按类型切换：文字支持加粗、颜色、列表、行距等富文本格式；图片支持裁剪、滤镜、圆角；形状、表格各自有独立样式面板。想统一风格时，可多选元素批量调整，或用格式刷复制一个形状的样式。

第一次导出

点击顶部工具栏的导出按钮打开导出对话框，可选 PPTX（Office 直接打开）、PDF（打印分发）、图片（逐页或合并）、JSON（留存数据二次利用）四类格式，选定格式点击生成，完成后自动下载。

功能详解：四个最常用到的能力

PPTX 导入导出

适用场景：手头已有本地 Office 文件想在浏览器里继续改，或把在线编辑成果带回 Office 环境。使用要点：导入 PPTX 的综合还原度约 85%，导出约 95%，日常商务文档足够直接使用；动画、特殊图表、多层嵌套等细节建议用真实样例先验证还原效果。

模板式 AIPPT 生成

适用场景：只有内容大纲，希望快速得到一整套可编辑的初稿。使用要点：流程不是让模型直接画图，而是在 PPTist 里先制作模板并标注页面类型（封面、目录、正文等），AI 基于模板生成结构化数据，再与模板结合渲染成完整文稿。原理细节见 doc/AIPPT.md。

元素动画与放映

适用场景：正式场合现场演示，需要页面过渡、元素出入场和临场标注。使用要点：元素可分别设置入场、退场、强调三类动画，页面单独设置切换方式；放映模式提供演讲者视图、计时器、画笔工具和激光笔，还带黑板模式，基本覆盖现场讲解的全部需要。

移动端编辑与预览

适用场景：手机上对内容做小改动，或临时播放核对。使用要点：移动端支持页面的增删复制、文字/图片/矩形/椭圆插入、位置尺寸旋转调整及基础文字样式，也能播放预览；功能有取舍，但应对"临时改一改"完全够用。

典型使用情境

Web 开发团队：需求是为自己的 H5 演示或编辑器找一个可控底座，不被组件库绑死。PPTist 基于 Vue 3 + TypeScript，样式完全自定义，且提供 doc/CustomElement.md 讲解如何扩展自定义元素类型，团队可以直接在其上加业务节点，不用从零做画布层。

个人制作季度汇报：需求是短时间内完成制作并导出到会议室使用。做法是选一个内置模板，用 AIPPT 按大纲快速出初稿，插入柱状图展示数据，微调动画后导出 PPTX，整体风格统一，导出结果 Office 可直接打开。

团队轻量校对：需求是收到 PPTX 后不装软件、快速在线浏览内容并批注。直接导入 PPTist 逐页查看、写批注，需要流转时导出 PDF 分发，省去了"下载软件再打开文件"的环节。

给开发者

PPTist 基于 Vue 3 + TypeScript + Pinia + Vite，不依赖任何 UI 组件库，二次开发比较顺手。核心代码组织如下：

src/ ├── components/ # 与业务无关的通用组件 ├── configs/ # 字体、动画、形状、快捷键等配置 ├── hooks/ # 可复用逻辑（导出、导入、历史记录等） ├── store/ # Pinia 状态，幻灯片数据在 slides.ts ├── types/ # TypeScript 类型定义 ├── utils/ # 工具函数（剪贴板、图片、富文本等） └── views/ # Editor 编辑器 / Screen 播放器 / Mobile 移动端

幻灯片数据结构与存储方式说明见 doc/DirectoryAndData.md，画布与元素的渲染、坐标系原理在 doc/Canvas.md。提 Issue 或 PR 前建议先读 doc/Q&A.md。