PPTist在线编辑、播放幻灯片

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)克隆仓库到本地

bash 复制代码
git clone https://gitee.com/pptist/PPTist

(2)安装相应的依赖

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

bash 复制代码
npm install

(3)本地运行开发版本

bash 复制代码
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文件,替换掉它。

相关推荐
Bob999814 分钟前
三大浏览器(Firefox、Opera、Chrome)多个Profile管理!
开发语言·javascript·eclipse·sqlite·ecmascript·hbase
Frankabcdefgh22 分钟前
前端面试 js
开发语言·javascript·原型模式
埃兰德欧神33 分钟前
三分钟让你的H5变身‘伪原生’,揭秘H5秒变应用的魔法配置
javascript·html·产品
学习机器不会机器学习41 分钟前
深入浅出JavaScript常见设计模式:从原理到实战(1)
开发语言·javascript·设计模式
hax1 小时前
deepseek-R1 理解代码能力一例
javascript·deepseek
海底火旺1 小时前
JavaScript 原型链检查:从 `instanceof` 到 `isPrototypeOf` 的演进
前端·javascript·面试
埃兰德欧神1 小时前
Lynx:革新跨端开发,一次编写,多端闪耀
前端·javascript·前端框架
一抓掉一大把1 小时前
elementui日历显示红点及根据日程范围判断是否有红点
前端·javascript·elementui
前端.火鸡1 小时前
使用wavesurferJs实现录音音波效果
开发语言·前端·javascript
六边形6661 小时前
JavaScript 中本地对象、内置对象、宿主对象的区别与作用
前端·javascript