基于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内网穿透工具实现远程访问使用的全部流程,另外由于该服务无需账号即可在浏览器直接访问,出于安全考虑,建议大家远程访问时不要轻易与他人分享地址,感谢您的观看,有任何问题欢迎留言交流。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

step7:“模拟量界面”逻辑

文章目录 文章介绍效果图AnalogPage.qml结构图调用 SerialPortHandler.sendData(message); serialporthandler.cpp 文章介绍 之前的6步实现了案例MF的界面设计和串口界面的逻辑设计,本文将实现模拟量界面的逻辑设计 新增功能: 1)弹出提示框 …

腾讯云点播VOD(sprintboot后端+vue前端)

1. 腾讯云点播 官网文档入口: 云点播简介_云点播购买指南_云点播操作指南-腾讯云 2. 业务需求 2.1.上传视频 2.2.浏览视频 2.3.删除视频 3. 腾讯云提供服务器上传和客户端上传。我使用springboot后端实现客户端上传视频。 3.1 后端要求 生成签名,前端拿着签名凭证,才能上…

四川赤橙宏海商务信息咨询有限公司抖音电商领航者

在数字化浪潮席卷全球的今天,电商行业无疑是其中最为活跃、最具潜力的领域之一。而在中国这片广袤的土地上,四川赤橙宏海商务信息咨询有限公司以其独特的视角和前瞻性的战略布局,成为了抖音电商服务领域的佼佼者。今天,就让我们一…

JavaWeb系列三: JavaScript学习 下

文章目录 js数组定义方式数组遍历 js函数函数入门函数使用方式使用方式一使用方式二 函数注意事项函数练习题 定义对象使用object定义使用{}定义 事件onload事件onclick事件失去焦点事件内容发生改变事件表单提交事件静态注册动态注册表单作业 dom对象文档对象模型document对象…

大数据智能风控:模型、平台与业务实践

人行印发的《金融科技(FinTech)发展规划(2022一2025年)》明确指出金融科技成为防范化解金融风险的利器,运用大数据、人工智能等技术建立金融风控模型,有效甄别高风险交易,智能感知异常交易&…

Linux双网卡默认路由的metric设置不正确,导致SSH连接失败问题定位

测试环境 VMware虚拟机 RockyLinux 9 x86_64 双网卡:eth0(访问外网): 10.206.216.92/24; eth1(访问内网) 192.168.1.4/24 问题描述 虚拟机重启后,SSH连接失败,提示"Connection time out",重启之前SSH连接还是正常的…

Android集成高德地图SDK(2)

1.解压下载的压缩包,找到AMap_Android_SDK_All\AMap3DMap_DemoDocs\AMap_Android_API_3DMap_Demo\AMap3DDemo\app\libs,复制libs里的所有文件,将其粘贴到Android工程的libs目录下,如图所示。 2.打开app下的build.gradle&#xff0…

郭子威:未来香港楼市多方拉动稳健前行

今年2月,香港取消了实行14年的楼市“辣招”。“撤辣”之后,香港楼市迎来迅速反弹,3月一手房成交量环比涨逾10倍。 香港“撤辣”的背景是什么?撤辣之后对楼市的长远影响有哪些?未来香港楼市的表现将会如何? …

vite-plugin-mars3d插件最近版本打包问题

最新vite和最新mars3d不能打包会出现报错,一般是版本没有匹配,或者是相关的配置文件没有对, 参考我们开源仓库,修改相关的配置文件, 下载基础项目git clone mars3d-vue-project: 在Vue 3.x技术栈下的Mars3D平台 基础项…

【Redis】

Redis 常见面试题 认识 Redis 什么是 Redis? 我们直接看 Redis 官方是怎么介绍自己的。 Redis 官方的介绍原版是英文的,我翻译成了中文后截图的,所以有些文字读起来会比较拗口,没关系,我会把里面比较重要的特性抽出来…

AI时代的量化金融:ChatGPT在交易中的应用与前景

文章目录 📑前言一、智能量化:开启金融新世界二、作者简介三、本书特色四、适读人群 在数字化、智能化的时代浪潮中,金融领域正经历着一场前所未有的变革。传统的金融分析方法逐渐被高效、精准的量化金融与算法交易所替代,而人工智…

C语言之进程学习

进程打开的文件列表:就是0 1 2 stdin stdout stderro等 类似于任务管理器是动态分ps是静态的 Zombie状态: 在Linux进程的状态中,僵尸进程是非常特殊的一种,它是已经结束了的进程,但是没有从进程表中删除。太多了会导…

Spring Boot 快速入门2 ——SpringBoot运行原理分析

一、SpringBoot运行原理 父依赖 我们再查看 Spring Boot 项目中 pom.xml 可以看出&#xff0c;所有的 Spring Boot 项目 直接或间接的 依赖于一个 父项目 spring-boot-starter-parent &#xff0c;主要是管理项目的资源及其插件。 <parent><groupId>org.sprin…

2024年天津市安全员C证证模拟考试题库及天津市安全员C证理论考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年天津市安全员C证证模拟考试题库及天津市安全员C证理论考试试题是由安全生产模拟考试一点通提供&#xff0c;天津市安全员C证证模拟考试题库是根据天津市安全员C证最新版教材&#xff0c;天津市安全员C证大纲整理…

vant4的组件气泡弹出框van-popover,在列表中遍历后点击一个全部/显示隐藏,解决办法

环境&#xff1a;vue3 vant-ui4 <div v-for"(info, index) in item.infoListVOs" :key"index"><van-popoverv-model:show"showPopover":actions"actions"overlayplacement"bottom-end"select"onSelect(info…

yaml文件的介绍-K8S

yaml 文件是我们使用K8S管理应用程序常用的部署方式&#xff0c;它主要是通过一系列键值对组成&#xff0c;键和值使用冒号和空格分隔。以下是对yaml的介绍 首先我们可以使用命令生成一个简单的YAML模版文件 Kubectl run nginx-pod –imagenginx:latest –port80 –dry-runcli…

变工况下转子、轴承数据采集及测试

1.固定工况下的数据采集 1.wireshark抓包 通过使用 Wireshark 抓包和 Linux 端口重放技术&#xff0c;可以模拟实际机械设备的运行环境&#xff0c;从而减少实地验证软件和算法的复杂性和麻烦。 打开设备正常运转&#xff0c;当采集器通过网口将数据发送到电脑时&#xff0c…

使用Python和jieba库生成中文词云

使用Python和jieba库生成中文词云 在文本分析和数据可视化的领域中&#xff0c;词云是一种展示文本数据中关键词频率的直观方式。Python作为一种强大的编程语言&#xff0c;提供了多种库来帮助我们生成词云&#xff0c;如wordcloud和jieba。在本文中&#xff0c;我们将通过一个…

sudo: /etc/init.d/ssh: command not found

在 WSL 中尝试启动 SSH 服务时遇到 sudo: /etc/init.d/ssh: command not found 错误 安装 OpenSSH 服务器 更新软件包列表 sudo apt update安装 OpenSSH 服务器 sudo apt install openssh-server启动 SSH 服务 在 WSL 2 上,服务管理与传统 Linux 系统有所不同。你可以手动启动…

awk命令学习

awk 文本三剑客最后一个命令 grep 过滤&#xff08;查&#xff09; sed 增删改查 增和改 awk 按行取列 awk默认的分隔符 &#xff1a; 既是空格 也可以是一个TAB键 多个空格自动压缩成一个空格 awk的工作原理 &#xff1a;根据指令信息&#xff0c;逐行的读取文本内容&am…