基于Vue 3.x与TypeScript的PPTIST本地部署与无公网IP远程演示文稿

文章目录

    • 前言
    • 1. 本地安装PPTist
    • 2. PPTist 使用介绍
    • 3. 安装Cpolar内网穿透
    • 4. 配置公网地址
    • 5. 配置固定公网地址

前言

本文主要介绍如何在Windows系统环境本地部署开源在线演示文稿应用PPTist,并结合cpolar内网穿透工具实现随时随地远程访问与使用该项目。

PPTist 是一个基于Vue3.x和TypeScript构建的在线演示文稿应用,模仿了微软PowerPoint 的大部分常用功能。它允许用户在线编辑和展示 PPT,并支持将文件导出为 PPTX 格式。除此之外,还支持绘制各种图形和图表,支持插入视频和音频,与移动端使用,目前项目在github上面收获了5.6K star!

自己在本地部署PPTist的优势是无需安装和购买许可,也大大减少了在不同设备上出现的兼容性问题。不过只能本地使用也有一定局限性,但只要安装内网穿透工具就能轻松解决没有公网IP,也能远程访问本地服务的问题。

1719299881503

1. 本地安装PPTist

接下来教大家如何在Windows系统本地安装 PPTist

项目地址:https://github.com/pipipi-pikachu/PPTist

首先需要从github上克隆 PPTist(如果没有安装git的话,进入git官网进行下载windows版本 https://git-scm.com/downloads)

image-20240506142150939

打开终端,从github下载项目到本地,执行下面的命令:

git clone https://github.com/pipipi-pikachu/PPTist.git

image-20240625152907269

然后进入项目目录:

cd PPTist

然后安装依赖:

npm install

image-20240625154000788

最后运行项目即可:

npm run dev

1719301237351

可以看到运行成功,出现项目地址: http://localhost:5173

通过浏览器访问,即可开始在线创建编辑与展示幻灯片。

image-20240625155013029

2. PPTist 使用介绍

PPTist 提供了在线演示和编辑的功能,整体观感非常干净美观。

左上角为主菜单,包括了导入、导出与快捷键介绍功能。

image-20240625155640951

image-20240625160115841

中间的主编辑区上方,则是插入文字,图片,表格与音视频功能。

image-20240625160026742

右侧则是可以对PPT进行整体设计,切换效果选择等操作。

image-20240625160515865

点击当前文稿可对当前页面进行样式编辑,位置调整,添加动画等操作。

image-20240625155953876

3. 安装Cpolar内网穿透

作为一个开源的在线PPT演示应用,PPTist提供了与桌面版 PowerPoint 相似的功能和极其快捷方便的用户体验,不需要安装任何软件,跨平台兼容性强。

目前我们在本机安装了PPTist,但如果没有公网IP的话,只能在本地局域网环境使用,有一定局限性。如果出差在外想要远程使用的话,可以结合Cpolar内网穿透生成公网地址,免去了本地重新部署过程,只需要使用公网地址直接就可以访问本地部署的PPTist,进行演示。

下面是安装cpolar步骤:

Cpolar官网地址: https://www.cpolar.com

点击进入cpolar官网,点击免费使用注册一个账号,并下载最新版本的Cpolar

img

登录成功后,点击下载Cpolar到本地并安装(一路默认安装即可)本教程选择下载Windows版本。

image-20240319175308664

Cpolar安装成功后,在浏览器上访问http://localhost:9200,使用cpolar账号登录,登录后即可看到Cpolar web 配置界面,结下来在web 管理界面配置即可。

img

4. 配置公网地址

接下来配置一下本地 PPTist 的公网地址,

登录后,点击左侧仪表盘的隧道管理——创建隧道,

创建一个 PPTist 的公网http地址隧道:

  • 隧道名称:可自定义命名,注意不要与已有的隧道名称重复
  • 协议:选择 http
  • 本地地址:5173
  • 域名类型:免费选择随机域名
  • 地区:选择China Top

点击创建

image-20240625161411946

隧道创建成功后,点击左侧的状态——在线隧道列表,查看所生成的公网访问地址,有两种访问方式,分别是http和https。

image-20240625161941543

使用任意一个上面Cpolar生成的公网地址,在电脑或任意设备在浏览器进行登录访问,即可成功看到 PPTist 界面,这样一个可以远程访问的公网地址就创建好了,使用了Cpolar的公网域名,无需自己购买云服务器,即可在公网访问本地部署的服务了!

image-20240625162402262

小结

由于刚才创建的是随机的公网地址,24小时会发生变化。另外它的网址是由随机字符生成,不容易记忆。如果你有长期远程访问本地部署服务的需求,或者想把域名变成固定,好记的二级子域名,并且不想每次都重新创建隧道来访问你在本地部署的服务,我们可以选择创建一个固定的公网地址来解决这个问题。

5. 配置固定公网地址

我们接下来为其配置固定的HTTP端口地址,该地址不会变化,方便分享给别人长期查看你的本地服务,而无需每天重复修改服务器地址。

配置固定http端口地址需要将cpolar升级到专业版套餐或以上。

登录cpolar官网,点击左侧的预留,选择保留二级子域名,设置一个二级子域名名称,点击保留,保留成功后复制保留的二级子域名名称。

image-20240625162601023

保留成功后复制保留成功的二级子域名的名称:myppt(大家可以自定义)

image-20240625162629519

返回登录Cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道 PPTist ,点击右侧的编辑:

image-20240625162724288

修改隧道信息,将保留成功的二级子域名配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名

点击更新(注意,点击一次更新即可,不需要重复提交)

image-20240625162810498

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定的二级子域名名称的域名:

image-20240625162836062

最后,我们使用固定的公网地址在任何浏览器打开访问,可以看到成功访问 PPTist,这样一个固定且永久不变的二级子域名公网地址就设置好了。

image-20240625163008747

以上就是如何在Windows系统电脑本地部署开源在线演示文稿应用PPTist,并结合cpolar内网穿透工具实现远程访问使用的全部流程,另外由于该服务无需账号即可在浏览器直接访问,出于安全考虑,建议大家远程访问时不要轻易与他人分享地址,感谢您的观看,有任何问题欢迎留言交流。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/36734.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于STM32的智能水质监测系统

目录 引言环境准备智能水质监测系统基础代码实现:实现智能水质监测系统 4.1 数据采集模块4.2 数据处理与分析4.3 控制系统实现4.4 用户界面与数据可视化应用场景:水质管理与优化问题解决方案与优化收尾与总结 1. 引言 智能水质监测系统通过使用STM32嵌…

RISC-V知识总结 —— 向量(扩展)指令集

资源1:晏明 - RISC-V向量扩展指令架构及LLVM自动向量化支持 - 202112118 - 第13届开源开发工具大会(OSDTConf2021)_哔哩哔哩_bilibili资源2:张先轶 - 基于RISC-V向量指令集优化基础计算软件生态【第12届开源开发工具大会(OSDT2020&#xff09…

研导智能科技——AI辅助科研产品开发

人工智能(AI)技术的飞速发展为科研领域带来了革命性的变化。本公司致力于开发基于人工智能的科研辅助产品,旨在通过智能化手段提高科研人员的工作效率和研究质量。目前,我们成功开发了研导学术平台(www.zhiyanxueshu.c…

Linux运维:MySQL数据库(1)

1.信息与数据: 数据是信息的载体,信息是数据的内涵。数据库就是存储数据的仓库,并长期存储在计算机磁盘中,可由多个用户和应用程序共享的数据集合,就是数据库。 2.数据库中的数据的特点: 2.1.数据是按照某…

RuleApp1.4.6文章社区客户端 广告联盟支持Docx导入

支持编译为安卓,苹果,小程序,H5网页的社区客户端代码,包括文章模块,用户模块,动态模块,支付模块,聊天模块,广告模块,商城模块等基础功能,包含VIP会…

10位时间戳、13位时间戳、17位时间戳,以及在JavaScript中的格式转换

一、介绍 1、10位时间戳 2、13位时间戳 3、17位时间戳 4、时间戳转换工具 二、13位时间戳的转换 1、转标准日期 2、转格式化日期 三、10位时间戳的转换 1、转标准日期 2、转格式化日期 四、17位时间戳的转换 1、解析思路 2、解析过程 (1)统…

C++系统编程篇——Linux第一个小程序--进度条

&#xff08;1&#xff09;先引入一个概念&#xff1a;行缓冲区 \r和\n \r表示回车 \n表示回车并换行 ①代码一 #include<stdio.h> #include<unistd.h> int main()…

django学习入门系列之第三点《伪类简单了解》

文章目录 hover&#xff08;伪类&#xff09;after&#xff08;伪类&#xff09;往期回顾 hover&#xff08;伪类&#xff09; 伪类指的是用冒号加的 hover样式指的是&#xff0c;当用户光标移动到设定区域后&#xff0c;所执行的用法 如&#xff1a; <!DOCTYPE html>…

通过代理从ARDUINO IDE直接下载开发板包

使用免费代理 实现ARDUINO IDE2.3.2 下载ESP8266/ESP32包 免费代理 列表 测试代理是否可用的 网站 有时&#xff0c;代理是可用的&#xff0c;但依然有可能找不到开发板管理器的资料包。 可以多换几个代理试试。 代理的配置 文件 -> 首选项 -> 网络 进入后做如下配置…

2024百度之星第二场-小度的01串

补题链接&#xff1a; 码蹄集 一道经典线段树板子题。 区间修改01置换&#xff0c;区间查询子串权值。 唯一区别&#xff0c;权值要求的是相邻字符都不同所需修改的最小字符个数。 我们在线段树节点上分别维护当前连续区间&#xff1a; 奇数位是0的个数&#xff08;j0&…

Python和tkinter实现的字母记忆配对游戏

Python和tkinter实现的字母记忆配对游戏 因为这个小游戏用到了tkinter&#xff0c;先简要介绍一下它。tkinter是Python的标准GUI(图形用户界面)库&#xff0c;它提供了一种简单而强大的方式来创建图形界面应用程序。它提供了创建基本图形界面所需的所有工具&#xff0c;同时保…

OSI七层模型TCP/IP四层面试高频考点

OSI七层模型&TCP/IP四层&面试高频考点 1 OSI七层模型 1. 物理层&#xff1a;透明地传输比特流 在物理媒介上传输原始比特流&#xff0c;定义了连接主机的硬件设备和传输媒介的规范。它确保比特流能够在网络中准确地传输&#xff0c;例如通过以太网、光纤和无线电波等媒…

什么是有效的电子签名?PDF电子签名怎样具备法律效力?

电子签名逐渐成为商务文书和法律文件中不可或缺的一部分。《电子签名法》自2005年4月1日起施行&#xff0c;这一立法是中国信息化法律的重要里程碑&#xff0c;为电子签名应用奠定了法律基础。电子签名不仅仅是一种技术手段&#xff0c;更是一种法律认可的签名形式。那么究竟什…

Python私教张大鹏 PyWebIO通过事件回调实现表格的编辑和删除功能

从上面可以看出&#xff0c;PyWebIO把交互分成了输入和输出两部分&#xff1a;输入函数为阻塞式调用&#xff0c;会在用户浏览器上显示一个表单&#xff0c;在用户提交表单之前输入函数将不会返回&#xff1b;输出函数将内容实时输出至浏览器。这种交互方式和控制台程序是一致的…

学习TTS遇到的问题2 什么是TCN模型

学习TTS遇到的问题2 什么是TCN模型 什么是TCN模型怎么理解 TCN中的 dilation&#xff1f;什么是 Dilation具体例子数学表达作用例子代码示例 什么是TCN模型 https://juejin.cn/post/7262269863343079479 https://blog.csdn.net/weixin_57726558/article/details/132163074 由下…

出手便是王炸,曙光存储将高端存储推向新高度

二十年磨一剑&#xff0c;今朝试锋芒。 近日&#xff0c;曙光存储重磅发布全球首个亿级IOPS集中式全闪存储FlashNexus&#xff0c;正式宣告进入高端存储市场。 作为存储产业皇冠上的明珠&#xff0c;高端存储一向以技术难度大、市场准入门槛高和竞争格局稳定著称&#xff0c;…

从0-1搭建一个web项目(package.json)详解

本章分析package.json文件详解 本文主要对packge.json配置子文件详解 ObJack-Admin一款基于 Vue3.3、TypeScript、Vite3、Pinia、Element-Plus 开源的后台管理框架。在一定程度上节省您的开发效率。另外本项目还封装了一些常用组件、hooks、指令、动态路由、按钮级别权限控制等…

Centos7源码方式安装sqle及开发相关

官方文档-源码安装 操作系统&#xff1a;centos:7.9,everything (DVD版应该也可以) (在ubuntu22.04装了两天之后乖乖开了一个新Centos7虚拟机) 镜像&#xff1a;清华大学开源软件镜像站 centos/7.9.2009 安装git sudo yum update -y sudo yum install -y git git --version安…

数据结构与算法笔记:高级篇 - B+树:MySql数据库索引是如何实现的?

概述 作为一名软件开发工程师&#xff0c;你对数据库肯定再熟悉不过了。MySQL 作为主流的数据库存储系统&#xff0c;它在我们的业务开发中&#xff0c;有着举足轻重的地位。在工作中&#xff0c;为了加速数据库中数据的查找速度&#xff0c;我们常用的处理思路是&#xff0c;…

01.Ambari自定义服务开发-项目初始化

文章目录 基础环境在PyCharm中初始化项目配置项目相关依赖在PyCharm中导入依赖 基础环境 PyCharmPython 2.7已经安装完成的Ambari服务端 在PyCharm中初始化项目 项目名称就是我们要安装服务的名称&#xff0c;要求名称为全大写&#xff0c;如&#xff1a;DORIS创建Python2.7…