logo
0
0
WeChat Login
pipipi-pikachu<pipipi_pikachu@163.com>
feat: 支持自定义SVG图标

stars forks license language issue gitee gitcode

简体中文 | English

🎨 PPTist

PowerPoint-ist(/'pauəpɔintist/),一个基于 Web 的在线演示文稿(幻灯片)应用,还原了大部分 Office PowerPoint 常用功能,支持 文字、图片、形状、线条、图表、表格、视频、音频、公式 几种最常用的元素类型,可以在 Web 浏览器中编辑/演示幻灯片。

在线体验地址👉:https://pipipi-pikachu.github.io/PPTist/

国内镜像(定期同步):GiteeGitCode

✨ 项目特色

  1. 易开发:基于 Vue3.x + TypeScript 构建,不依赖UI组件库,尽量避免第三方组件,样式定制更轻松、功能扩展更方便。
  2. 易使用:随处可用的右键菜单、几十种快捷键、无数次编辑细节打磨,力求还原桌面应用级体验。
  3. 功能丰富:支持 PPT 中的大部分常用元素和功能,支持AI生成PPT、支持多种格式导出、支持移动端基础编辑和预览...

👀 前排提示

  1. 本项目的目标受众是有Web幻灯片开发需求的开发者,需要有基础的web开发经验,提供的链接只是一个演示地址,不提供任何在线服务。你不应该直接将本项目作为工具使用,也不支持开箱即用。如果你只是需要一个服务或工具,可以选择更优秀和成熟的产品。
  2. 这里总结了一些常见问题,第一次提 Issues 和 PR 时,务必提前阅读此文档。
  3. 商用相关请参阅商业用途

🧩项目定位

本项目定位为一个Web 幻灯片编辑/演示应用,而不是AIPPT生成工具、低代码平台、H5编辑器、图片编辑器 、白板应用等。以下是一些常见使用场景推荐度:

  • 低代码平台/H5编辑器/图片编辑器/白板应用(推荐度:完全不推荐):建议选择匹配度更高的开源项目。
  • PPT文件预览工具(推荐度:⭐):导入PPTX文件的能力有限(综合来看,大约仅有60%的还原度),除非你预览样式要求不高,只追求基本的内容展示,否则不建议使用。
  • AIPPT生成工具(推荐度:⭐⭐):本项目虽然提供了基础的模板式AIPPT生成功能,但并非核心,随着AI技术的发展,AIPPT的形态会不断变化(模板式 -> HTML网页式 -> 纯图式),本项目不会跟进。但如果你只是想做一个模板式的AIPPT生成工具,并且愿意自行实现/优化更好的生成流程,那么依托于PPTist完善的后续编辑能力,本项目可能会是一个不错的选择。
  • Office PPT制作工具(推荐度:⭐⭐):本项目支持大量Office PPT常用功能,也支持基本的导出本地PPTX文件,但毕竟导出功能做不到100%还原,最关键的是这种场景下对导入PPTX文件的要求一般也非常高,而前面提到导入PPTX文件的能力及其有限。因此,除非你能接受残缺的导入能力,否则请谨慎选择。
  • Web 幻灯片编辑/演示应用(推荐度:⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐):这是最推荐的场景,编辑能力和编辑体验是PPTist最核心的优势,你可以在本项目的基础上,根据自己的需求,定制/新增一些个性化的节点/功能,不以导入导出为最终目的(毕竟这些定制化的东西在Office PPT中是不存在的)。一句话总结:我更希望你基于PPTist打造一个不同于Office PPT的演示类产品,而不只是做一个Office PPT的编辑中转站。

🚀 项目运行

npm install npm run dev

浏览器访问:http://127.0.0.1:5173/

📚 功能列表

基础功能

  • 历史记录(撤销、重做)
  • 快捷键
  • 右键菜单
  • 导出本地文件(PPTX、JSON、图片、PDF)
  • 导入导出特有 .pptist 文件
  • 打印
  • AI生成PPT

幻灯片页面编辑

  • 页面添加、删除
  • 页面顺序调整
  • 页面复制粘贴
  • 幻灯片分节
  • 背景设置(纯色、渐变、图片)
  • 设置画布尺寸
  • 网格线
  • 标尺
  • 画布缩放、移动
  • 主题设置
  • 提取已有幻灯片风格
  • 演讲者备注(富文本)
  • 幻灯片模板
  • 翻页动画
  • 元素动画(入场、退场、强调)
  • 选择面板(隐藏元素、层级排序、元素命名)
  • 页面和节点类型标注(可用于模板相关功能)
  • 查找/替换
  • 批注

幻灯片元素编辑

  • 元素添加、删除
  • 元素复制粘贴
  • 元素拖拽移动
  • 元素旋转
  • 元素缩放
  • 元素多选(框选、点选)
  • 多元素组合
  • 多元素批量编辑
  • 元素锁定
  • 元素吸附对齐(移动和缩放)
  • 元素层级调整
  • 元素对齐到画布
  • 元素对齐到其他元素
  • 多元素均匀分布
  • 拖拽添加图文
  • 粘贴外部图片
  • 元素坐标、尺寸和旋转角度设置
  • 元素超链接(链接到网页、链接到其他幻灯片页面)

文字

  • 富文本编辑(颜色、高亮、字体、字号、加粗、斜体、下划线、删除线、角标、行内代码、引用、超链接、对齐方式、序号、项目符号、段落缩进、清除格式)
  • 行高
  • 字间距
  • 段间距
  • 首行缩进
  • 填充色
  • 边框
  • 阴影
  • 透明度
  • 竖向文本
  • AI改写/扩写/缩写

图片

  • 裁剪(自定义、按形状、按纵横比)
  • 圆角
  • 滤镜
  • 着色(蒙版)
  • 翻转
  • 边框
  • 阴影
  • 替换图片
  • 重置图片
  • 设置为背景图

形状

  • 绘制任意多边形
  • 绘制任意线条(未封闭形状模拟)
  • 替换形状
  • 填充(纯色、渐变、图片)
  • 边框
  • 阴影
  • 透明度
  • 翻转
  • 形状格式刷
  • 编辑文字(支持富文本,与文字元素的富文本编辑功能近似)

线条

  • 直线、基础折线/曲线
  • 颜色
  • 宽度
  • 样式(实线、虚线、点线)
  • 端点样式

图表(柱状图、条形图、折线图、面积图、散点图、饼图、环形图、雷达图)

  • 图表类型转换
  • 数据编辑
  • 背景填充
  • 主题色
  • 坐标轴/坐标文字颜色
  • 网格颜色
  • 堆积模式、平滑曲线等

表格

  • 行、列添加删除
  • 主题设置(主题色、表头、汇总行、第一列、最后一列)
  • 合并单元格
  • 单元格样式(填充色、文字颜色、加粗、斜体、下划线、删除线、对齐方式)
  • 边框

视频

  • 预览封面设置
  • 自动播放

音频

  • 图标颜色
  • 自动播放
  • 循环播放

公式

  • LaTeX编辑
  • 颜色设置
  • 公式线条粗细设置

幻灯片放映

  • 画笔工具(画笔/形状/箭头/荧光笔标注、橡皮擦除、黑板模式)
  • 全部幻灯片预览
  • 触底显示缩略图导航
  • 计时器工具
  • 激光笔
  • 自动放映
  • 演讲者视图

移动端

  • 基础编辑
    • 页面添加、删除、复制、备注、撤销重做
    • 插入文字、图片、矩形、圆形
    • 元素通用操作:移动、缩放、旋转、复制、删除、层级调整、对齐
    • 元素样式:文字(加粗、斜体、下划线、删除线、字号、颜色、对齐方向)、填充色
  • 基础预览
  • 播放预览

🎯 开发

目前没有完整的开发文档,但下面这些文档可能会对你有一些帮助:

下面是一些辅助开发的工具/仓库:

📄 版权声明/开源协议

AGPL-3.0 License | Copyright © 2020-PRESENT pipipi-pikachu

🧮 商业用途

  • 本项目禁止闭源商用,如果你希望将其用于商业项目,请尊重开源,严格遵循 AGPL-3.0 协议,回馈开源社区;
  • 如果你因为任何原因,无法执行 AGPL-3.0 协议,可以选择:
    1. 使用早期 Apache 2.0 协议版本(最后更新时间为2022年5月,已停止维护,点击此处下载);
    2. 成为项目的重要贡献者(先违反协议后再成为贡献者不适用此项),包括:
      • 你的代码被本项目作为依赖引用,包括:npm安装、文件引用、代码片段引用(引用处会注明);
      • 你给本项目提交过重要的 PR 或 Issue(由作者主观判断,符合的 PR 或 Issue 会打上important contribution标签);
    3. 邮件联系作者付费获取独立的商业授权(违反协议后被作者找到的不适用此项)。独立授权价格:
      • 一年:2999元;
      • 永久:5499元(不含税);
  • 建议优先考虑执行AGPL-3.0协议,如需付费获取独立的商业授权,请务必在联系作者前阅读以下内容:
    • 独立商业授权表示
      • 作者单独出具商业授权协议文件(邮件联系作者获取),双方按流程签署协议;
      • 允许将代码用于商业行为,且不必执行 AGPL-3.0 协议;
      • 授权对象可以是个人或组织(企业),允许授权对象名下的所有产品使用本项目代码;
    • 授权流程
      1. 被授权方确认协议内容,若无异议,需提供协议中所需的个人/企业信息;
      2. 由作者补充好协议双方信息后打印签字,并将电子扫描件发给被授权方;
      3. 被授权方收到后,将协议打印盖章,再扫描电子档发回给作者,此时协议开始生效;
      4. 被授权方在协议规定时间内支付费用,并保留好支付凭证,授权结束;
    • 授权不等于出售软件或服务
      • 不存在其他“商业版本”、不提供任何API/SDK/在线服务/技术支持/技术咨询/定制开发;
      • 不提供可直接交付的产品,你仍需从本仓库获取代码自行开发;
      • 该软件无法开箱即用,至少也得自行接入后端能力(使用本项目需要有最基本的web开发经验);
      • 不保证未来版本的兼容性,不保证代码没有bug;
      • 作者不承担任何因使用本项目代码而导致的直接或间接损失;
      • 务必提前做好调研,判断该软件是否符合需求,包括:功能(是否能满足业务需求)和开发(是否上手当前技术栈/实现方案);
  • 不接受黑名单/耻辱柱或存在违反协议行为的对象通过任何形式获取商业授权;
  • 作者倡导异步沟通(正式、信息量大、信息整合度高),不加私人微信/QQ/手机号等,有任何授权相关疑问请邮件联系,谢谢理解;
  • 提需求/报bug/询问技术方案等非授权相关咨询,请在 Issues 中进行。

🔔 其他说明

什么是 AGPL-3.0 协议

协议的核心要求用通俗的语言解释如下:

  • 开源义务:如果你用了 AGPL 的代码,无论你或你的下游怎么使用/修改,都必须把你最终的代码全部完整公开出来(不只是给出修改的部分,也不是说换个框架重写一遍就能和原始代码脱离关系了),并继续以 AGPL 协议开源(强调:必须延续 AGPL 协议,保持开源的传染性,不能更换其他协议)。
  • 网络服务也要开源:即使你只是用 AGPL 的代码做了一个网站或网络服务,别人通过网络用你的服务时,你也需要遵守上一条开源义务
  • 保留版权声明:你不能删掉代码里原来的作者信息和许可证声明,得告诉大家这代码是从哪儿来的。
  • 不能加额外限制:你不能在衍生出来的 AGPL 代码上加一些限制,比如不让别人再分发代码,或者要求别人付费才能使用代码(包括但不限于:要求别人购买授权/服务/产品等)。
  • 免责声明:作者不保证代码没有 bug,也不对使用后果负责。

详细协议内容见官方文档:AGPL-3.0 协议

声明

Github、Gitee等代码托管平台存在一些仓库基于本项目代码进行了二次开发,但未遵守AGPL-3.0协议,擅自删除了AGPL-3.0协议许可证声明或改用其他协议,作者在此提醒:这些仓库的代码在事实上仍然属于AGPL-3.0协议,切勿受其误导。