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

news2024/10/5 6:21:27

文章目录

    • 前言
    • 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.coloradmin.cn/o/1869417.html

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

相关文章

基于java + Springboot 的二手物品交易平台实现

目录 📚 前言 📑摘要 📑系统架构 📚 数据库设计 📚 系统功能的具体实现 💬 登录模块 首页模块 二手商品轮播图添加 💬 后台功能模块 二手商品商品列表 添加二手商品商品 添加购物车 &a…

CesiumJS【Basic】- #019 加载glb/gltf文件(Entity方式)

文章目录 加载glb/gltf文件(Entity方式)1 目标2 代码实现3 资源文件加载glb/gltf文件(Entity方式) 1 目标 使用Entity方式加载glb/gltf文件 2 代码实现 import * as Cesium from "cesium";const viewer = new Cesium.Viewer

langchain中的召回增强生成(RAG)一览

什么是RAG?[3] RAG是一种通过额外的、通常是私有或实时的数据来增强LLM知识的技术。LLM能够推理各种广泛的主题,但它们的知识仅限于它们训练时的公共数据,到达其特定时间节点为止。如果你想构建可以推理私人数据或在模型截止日期之后引入的数…

linux 安装腾讯会议和解决ubuntu打开腾讯会议提示:不兼容 wayland 协议

一. 下载腾讯会议安装包 腾讯会议下载链接 二. 命令行安装 cd [安装包路径] sudo dpkg -i TencentMeeting_0300000000_3.19.1.400_x86_64_default.publish.deb 三. 打开腾讯会议提示无法支持wayland 协议 解决方法: 打开终端 sudo vi /etc/gdm3/custom.conf打开 #Wayland…

vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程

一个常见的需求是,同模块的若干页面需要使用同一种布局,比如俱乐部相关的页面的顶部需要展示俱乐部的名称,其他页面顶部需要展示网站名称。 通常实现的方法是,将俱乐部的名称和网站名称定义成公共组件,在每个页面都书…

pycharm terminal终端不能激活 conda 虚拟环境,解决方法

# 1. 确保执行策略已更改 Set-ExecutionPolicy RemoteSigned -Scope CurrentUser# 2. 初始化Conda conda init powershell# 3. 重启PowerShell# 4. 验证Conda初始化 conda --version# 5. 激活Conda环境 conda activate shi_labelme关闭所有的终端,然后重新打开新的终…

算法力扣刷题记录六【203移除链表元素】

前言 链表篇,开始。 记录六:力扣【203移除链表元素】 一、数据结构——链表 来源【代码随想录】,总结: (1)线性结构。内存地址不连续,通过指针指向串联一起。 (2)链表类…

互联网企业出海不得不面对的安全问题

在出海的互联网企业中,为什么游戏、电商企业总是被“D”?究其内因,这或与游戏和电商等业务的商业模式和技术应用有较大的关系。 首先,对于游戏和电商等行业而言,良好的用户体验是业务增长的关键点。对于普通用户而言&a…

当大模型开始「考上」一本

参加 2024 河南高考,豆包和文心 4.0 过了一本线,但比 GPT-4o 还差点。 今天的大模型,智力水平到底如何? 2024 年高考陆续出分,我们想要解开这个过去一年普罗大众一直争论不休的话题。高考是衡量人类智力和学识水平的…

鸿蒙:自定义组件、自定义函数、自定义样式

一、自定义组件 1.新建组件文件夹,新建自定义组件文件 . 2.编辑自定义组件,并通过 Component //声明组件 export struct PageHeader { //结构体private title: stringbuild() { //uiRow() {Image($rawfile(左返回.png)).width(15%)Text(this.title)…

C++实现一个简单的Qt信号槽机制

昨天写这个文章《深入探讨C的高级反射机制(2):写个能用的反射库》的时候就在想,是不是也能在这套反射逻辑的基础上,实现一个类似Qt的信号槽机制? Qt信号槽机制简介 所谓的Qt的信号槽(Signals …

吉时利 Keithley2461 数字源表

Keithley2461吉时利SMU高电流数字源表 2461 型图形化高电流数字 SourceMeter SMU 2461 高电流 SMU 凭借其 10A/1000W 脉冲电流和 7A/100W 直流电流能力以及双 18 位 1MS/s 数字转换器,优化用于检定和测试高功率材料、器件和模块,例如碳化硅 (SiC)、氮化…

WIFI各版本的带宽

带宽的定义: 带宽在网络领域通常指信道带宽,即信号在频谱中占用的频宽,单位是MHz(兆赫)。在无线通信中,带宽越宽,能够传输的数据量越大,因此信道带宽直接影响着数据传输速率。WiFi标…

LeetCode刷题之HOT100之岛屿数量

2024 6/27 酷暑难耐,天气热了,似乎更容易午睡了。上午上了cnn最后一节课。睡一觉买一杯蜜雪冰城,坐在舒适的实验室敲击键盘,做题! 1、题目描述 2、逻辑分析 是的,又是直奔题解的一天哈!题解给…

基于MATLAB仿真设计无线充电系统

通过学习无线充电相关课程知识,通过课程设计无线充电系统,将所学习的WPT,DC-DC,APFC进行整合得到整个无线充电系统,通过进行仿真研究其系统特性,完成我们预期系统功能和指标。 以功率器件为基本元件&#x…

鸿蒙Harmony开发案例教程:如何进行蓝牙设备发现、配对、取消配对功能

如何进行蓝牙连接 场景说明 蓝牙技术是一种无线数据和语音通信开放的全球规范,它是基于低成本的近距离无线连接,为固定和移动设备建立通信环境的一种特殊的连接。本示例通过ohos.bluetoothManager接口实现蓝牙设备发现、配对、取消配对功能。 效果呈现…

《Nest系列 - 4. 听说人人都会CRUD,可是我还不会怎么办???-《4.3结合前端使用实现多表联合查询》

🍑 联合查询 在我们前端来说,会抽离一些公用组件。不会把重复的组件或者所有代码都放在一个文件夹下。对于后端来说,也是一样的, 我们不会把所有数据都放在一张表里,我们回进行分表,根据一些关联关系&…

为什么说展厅数字人是展览未来的趋势?

展厅数字人是利用数字化、智能化和网络化等信息技术手段提升展厅展览服务和游览体验的全新载体。随着人工智能和虚拟现实技术的应用发展,展厅数字人已成为展厅展览转型升级的重要趋势。 展厅数字人凭借其创新性、强可塑性,成为展厅新名片,为各…

数据库工具之 —— SQLite

数据库工具之 —— SQLite SQLite 是一个非常流行的轻量级数据库,它是一个嵌入式的数据库,意味着数据库文件是存储在磁盘上的一个单一文件。SQLite 不需要一个独立的服务器进程,这使得它非常适合用于小型应用、移动应用、桌面应用&#xff0…

阿里云centos7.9 挂载数据盘 并更改宝塔站点根目录

一、让系统显示中文 参考:centos7 怎么让命令行显示中文(英文->中文)_如何在命令行中显示中文-CSDN博客 1、输入命令:locale -a |grep "zh_CN" 可以看到已经存在了中文包 2、输入命令:sudo vi…