PPTist在线编辑、播放幻灯片

devtools/2024/11/13 10:52:00/

PPTist简介

“一个基于 Vue3.x + TypeScript 的在线演示文稿(幻灯片)应用,还原了大部分 Office PowerPoint 常用功能,支持 文字、图片、形状、线条、图表、表格、视频、音频、公式 几种最常用的元素类型,每一种元素都拥有高度可编辑能力,同时支持丰富的快捷键和右键菜单,力求还原桌面应用级体验。”

代码仓库地址:

GitHub - pipipi-pikachu/PPTist: An online presentation application that replicates most of the commonly used features of Microsoft Office PowerPoint, allowing for the editing and presentation of PPT online. It also supports the export of PPT files.

PPTist: 一个基于 Vue3.x + TypeScript 的在线演示文稿应用,实现PPT幻灯片的在线编辑、演示。还原了大部分PPT常用功能,支持 文字、图片、形状、线条、图表、表格 6种最常用的元素类型,每一种元素都拥有高度可编辑能力,同时支持丰富的快捷键和右键菜单,尽可能还原本地桌面应用的使用体验。

工作中需要应用一套PPTX轻量化播放工具,之前看过这个仓库,就打算在本地应用一下。

本地化使用

(1)克隆仓库到本地

git clone https://gitee.com/pptist/PPTist

(2)安装相应的依赖

进入本地PPTist目录,运行如下命令:

npm install

(3)本地运行开发版本

npm run dev

关于默认打开PPT内容的设置

通过查看代码,我们发现,/src/store/slides.ts描述了默认打开的幻灯片内容:

查看这个slides变量,我们发现,这是一个json格式的Slide对象数组:

javascript">import type { Slide } from '@/types/slides'export const slides: Slide[] = [{id: 'test-slide-1',elements: [{type: 'shape',id: '4cbRxp',left: 0,top: 200,width: 546,height: 362.5,viewBox: [200, 200],path: 'M 0 0 L 0 200 L 200 200 Z',fill: '#5b9bd5',fixedRatio: false,opacity: 0.7,rotate: 0},{type: 'shape',id: 'ookHrf',left: 0,top: 0,width: 300,height: 320,viewBox: [200, 200],path: 'M 0 0 L 0 200 L 200 200 Z',fill: '#5b9bd5',fixedRatio: false,flipV: true,rotate: 0},{type: 'text',id: 'idn7Mx',left: 355,top: 65.25,width: 585,height: 188,lineHeight: 1.2,content: '<p><strong><span style=\'font-size:  112px\'>PPTIST</span></strong></p>',rotate: 0,defaultFontName: 'Microsoft Yahei',defaultColor: '#333'},{type: 'text',id: '7stmVP',left: 355,top: 253.25,width: 585,height: 56,content: '<p><span style=\'font-size:  24px\'>基于 Vue 3.x + TypeScript 的在线演示文稿应用</span></p>',rotate: 0,defaultFontName: 'Microsoft Yahei',defaultColor: '#333'},{type: 'line',id: 'FnpZs4',left: 361,top: 238,start: [0, 0],end: [549, 0],points: ['', ''],color: '#5b9bd5',style: 'solid',width: 2,},],background: {type: 'solid',color: '#ffffff',},},{id: 'test-slide-2',elements: [{type: 'text',id: 'ptNnUJ',left: 145,top: 148,width: 711,height: 77,lineHeight: 1.2,content: '<p style=\'text-align: center;\'><strong><span style=\'font-size: 48px\'>在此处添加标题</span></strong></p>',rotate: 0,defaultFontName: 'Microsoft Yahei',defaultColor: '#333',},{type: 'text',id: 'mRHvQN',left: 207.50000000000003,top: 249.84259259259264,width: 585,height: 56,content: '<p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处添加副标题</span></p>',rotate: 0,defaultFontName: 'Microsoft Yahei',defaultColor: '#333',},{type: 'line',id: '7CQDwc',left: 323.09259259259267,top: 238.33333333333334,start: [0, 0],end: [354.8148148148148, 0],points: ['', ''],color: '#5b9bd5',style: 'solid',width: 4},{type: 'shape',id: '09wqWw',left: -27.648148148148138,top: 432.73148148148147,width: 1056.2962962962963,height: 162.96296296296296,viewBox: [200, 200],path: 'M 0 20 C 40 -40 60 60 100 20 C 140 -40 160 60 200 20 L 200 180 C 140 240 160 140 100 180 C 40 240 60 140 0 180 L 0 20 Z',fill: '#5b9bd5',fixedRatio: false,rotate: 0}],background: {type: 'solid',color: '#fff',},},{id: 'test-slide-3',elements: [{type: 'shape',id: 'vSheCJ',left: 183.5185185185185,top: 175.5092592592593,width: 605.1851851851851,height: 185.18518518518516,viewBox: [200, 200],path: 'M 0 0 L 200 0 L 200 200 L 0 200 Z',fill: '#5b9bd5',fixedRatio: false,rotate: 0},{type: 'shape',id: 'Mpwv7x',left: 211.29629629629628,top: 201.80555555555557,width: 605.1851851851851,height: 185.18518518518516,viewBox: [200, 200],path: 'M 0 0 L 200 0 L 200 200 L 0 200 Z',fill: '#5b9bd5',fixedRatio: false,rotate: 0,opacity: 0.7},{type: 'text',id: 'WQOTAp',left: 304.9074074074074,top: 198.10185185185182,width: 417.9629629629629,height: 140,content: '<p style=\'text-align: center;\'><strong><span style=\'color: #ffffff;\'><span style=\'font-size: 80px\'>感谢观看</span></span></strong></p>',rotate: 0,defaultFontName: 'Microsoft Yahei',defaultColor: '#333',wordSpace: 5}],background: {type: 'solid',color: '#fff',},},
]

如不喜欢这个默认PPT,我们可以导入一个PPT,然后生成json文件,替换掉它。


http://www.ppmy.cn/devtools/6427.html

相关文章

学习STM32第十五天

SPI外设 一、简介 STM32F4XX内部集成硬件SPI收发电路&#xff0c;可以由硬件自动执行时钟生成、数据收发等功能&#xff0c;减轻CPU负担&#xff0c;可配置8位/16位数据帧&#xff0c;高位&#xff08;最常用&#xff09;/低位先行&#xff0c;三组SPI接口&#xff0c;支持DMA…

排序算法集合

912. 排序数组 趁着这道题总结下排序方法 1.快速排序 算法描述 1.从数列中挑出一个元素&#xff0c;称为"基准"&#xff08;pivot&#xff09;&#xff0c; 2.重新排序数列&#xff0c;所有比基准值小的元素摆放在基准前面&#xff0c;所有比基准值大的元素摆在基…

问题:react函数中的state是上一次的值

场景 有一个聊天输入框组件&#xff0c;输入框上面有表情包组件。 通过redux创建了store&#xff0c;存储一个message的状态&#xff0c;用于表情包和输入框共享状态。 输入框通过设置value和onClick做了一个简单双向绑定&#xff0c;其中value的值为store里的message。 impor…

5G网络建设--并查集--最小生成树

题目描述 现需要在某城市进行5G网络建设&#xff0c;已经选取N个地点设置5G基站&#xff0c;编号固定为1到N&#xff0c;接下来需要各个基站之间使用光纤进行连接以确保基站能互联互通&#xff0c;不同基站之间假设光纤的成本各不相同&#xff0c;且有些节点之间已经存在光纤相…

CentOS系统常用命令

CentOS系统是基于Red Hat Enterprise Linux&#xff08;RHEL&#xff09;的流行Linux发行版&#xff0c;它在服务器和桌面环境中广泛使用。以下是一些在CentOS系统中常用的命令及其用法&#xff1a; 1. **文件和目录操作** - ls&#xff1a;列出目录内容ls -lh # 以易读的格式…

TensorFlow 的基本概念和使用场景

TensorFlow 的基本概念和使用场景 TensorFlow 是一个开源的机器学习框架&#xff0c;由 Google 的 Google Brain 团队开发。它广泛用于数据科学、机器学习、深度学习和其他相关领域。以下是一篇关于 TensorFlow 的基本概念和使用场景的概述文章。 1. TensorFlow 简介 Tensor…

idea 将项目上传到gitee远程仓库具体操作

目录标题 一、新建仓库二、初始化项目三、addcommit四、配置远程仓库五、拉取远程仓库内容六、push代码到仓库七、如果是私有仓库可能会拉取失败&#xff08;一&#xff09;需要增加SSH 公钥&#xff08;二&#xff09;把远程仓库地址换成ssh的连接八、如果是私有仓库&#xff…

STM32 CAN控制的相关结构体(标准库)

STM32 CAN控制的相关结构体&#xff08;标准库&#xff09; 初始化结构体&#xff1a; CAN_InitTypeDef CAN_Prescaler 本成员设置CAN外设的时钟分频&#xff0c;它可控制时间片Tq的时间长度&#xff0c;这里设置的值最终会减1后再写入BRP寄存器位&#xff0c;即前面介绍的Tq计…