CN116226418B - 一种网页版演示幻灯片ppt的实现方法 - Google Patents
一种网页版演示幻灯片ppt的实现方法 Download PDFInfo
- Publication number
- CN116226418B CN116226418B CN202310042699.7A CN202310042699A CN116226418B CN 116226418 B CN116226418 B CN 116226418B CN 202310042699 A CN202310042699 A CN 202310042699A CN 116226418 B CN116226418 B CN 116226418B
- Authority
- CN
- China
- Prior art keywords
- data
- slide
- template
- interface
- demonstration
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 36
- 238000012545 processing Methods 0.000 claims abstract description 13
- 230000008859 change Effects 0.000 claims abstract description 9
- 230000004048 modification Effects 0.000 claims abstract description 7
- 238000012986 modification Methods 0.000 claims abstract description 7
- 238000012544 monitoring process Methods 0.000 claims description 9
- 230000004044 response Effects 0.000 claims description 9
- 230000001360 synchronised effect Effects 0.000 claims description 9
- 238000009877 rendering Methods 0.000 claims description 8
- 230000000694 effects Effects 0.000 claims description 4
- 230000008569 process Effects 0.000 claims description 4
- 238000010367 cloning Methods 0.000 claims description 2
- 238000003780 insertion Methods 0.000 claims description 2
- 230000037431 insertion Effects 0.000 claims description 2
- 230000000712 assembly Effects 0.000 claims 1
- 238000000429 assembly Methods 0.000 claims 1
- 230000005540 biological transmission Effects 0.000 abstract description 2
- 238000011161 development Methods 0.000 abstract description 2
- 238000012546 transfer Methods 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 239000002184 metal Substances 0.000 description 1
- 230000006855 networking Effects 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/40—Information retrieval; Database structures therefor; File system structures therefor of multimedia data, e.g. slideshows comprising image and additional audio data
- G06F16/43—Querying
- G06F16/438—Presentation of query results
- G06F16/4387—Presentation of query results by the use of playlists
- G06F16/4393—Multimedia presentations, e.g. slide shows, multimedia albums
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Multimedia (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种网页版演示幻灯片PPT的实现方法,其涉及计算机网页开发前端和后端技术领域。该方法包括:搭建前端***和后端***;所述前端***包括:H5页面;所述后端***包括:服务器、模板数据库、模板图片数据库、模板数据处理组件和演示网页地址生成组件;基于前端***和后端***,构建网页版演示幻灯片;所述网页版演示幻灯片包括一级“新建”功能、“打开”功能、“播放预览”功能、“保存”功能。该方法支持修改模板文本数据改变整个演示幻灯片内容,提高了使用效率;联网使用时能把数据传送到后端***,可生成互联网的web浏览地址,方便跨端分享,尤其在文件比较大的情况下,不需要跨端传输及下载,直接打开网页展示演示幻灯片即可。
Description
技术领域
本发明涉及计算机网页开发前端技术领域和后端技术领域,特别涉及一种支持离线和在线的网页版演示幻灯片PPT的实现方法。
背景技术
目前,对演示幻灯片的功能依赖除了微软的OFFICE软件和金山的WPS之外,其他的在线版都需要高额的收费,且能下载的都是试用的版本,并不能开源。
现有技术中,一般常规的演示幻灯片只涉及对某个幻灯片的编辑,并没有涉及对模板文本数据的修改,所以在制作批量相近似幻灯片时,需要对每个幻灯片进行编辑,如此造成了重复劳动、且降低了使用效率;还有,一般常规的演示幻灯片依附于PPT软件,其使用时必须先安装PPT软件,才能打开文件在PPT软件上使用、其跨端传输时,需要传输文件本身,特别在文件比较大的情况下,跨端传输需要第三方工具,如邮箱或者其他传输媒介,操作不便、且需要大量的传输时间和下载时间,其给使用者带来了不便。
发明内容
基于此,有必要针对上述技术问题,提供一种网页版演示幻灯片PPT的实现方法,以使用户能在脱离软件本体的情况,利用浏览器进行离线或在线的PPT幻灯片编辑及演示。
本发明实施例提供一种网页版演示幻灯片PPT的实现方法,该方法包括:
搭建前端***和后端***;所述前端***包括:H5页面;所述后端***包括:服务器、模板数据库、模板图片数据库、模板数据处理组件和演示网页地址生成组件;
基于前端***和后端***,构建网页版演示幻灯片;所述网页版演示幻灯片包括一级“新建”功能、“打开”功能、“播放预览”功能、“保存”功能;
其中:
所述一级“新建”功能包括:基本编辑功能和模板编辑功能;所述模板编辑功能的实现包括:采用dragula.js的实现原理、且基于对DOM结构的js程序操作,对模板数据库中的演示幻灯片进行编辑;
所述“打开”功能包括:离线模板数据打开功能和在线模板数据打开功能;所述在线模板数据打开功能的实现包括:通过网络地址输入的方式作为向后端***接口请求的参数,采用Axios技术向后端***请求模板数据、并展示在前端***的界面上;
所述“播放预览”功能的实现包括:在浏览器界面,通过前端***流式布局的方式展示完整演示幻灯片的全部幻灯片内容;
所述“保存”功能的实现包括:采用FileSaver.js技术将数据模板文件保存到本地,并向后端***上送模板数据,后端***返回一个在线web地址。
进一步地,所述H5页面,包括:
css文件夹,实现网页版演示幻灯片PPT所需的所有css文件;
js文件夹,实现网页版演示幻灯片PPT所需的所有js文件,其中包括插件FileSaver.js、dragula.js;
image文件夹,实现网页版演示幻灯片PPT所需的所有图标文件;
一个HTML文件,其为index.html入口文件,用户在个人计算机设备上手动用浏览器打开该文件,即为操作界面,用户按照界面图标提示正常编辑操作。
进一步地,所述基本编辑功能的实现,包括:
新建全新的演示幻灯片界面,在界面左侧上新建、选择幻灯片,并在界面右侧编辑内容;将右侧每一张幻灯片的内部结构、内容同步到左侧预览界面,其区别是***相同的DOM结构,左侧预览图只预览不能编辑,右侧编辑界面其编辑的结构图形变化,同步到右侧预览界面,在样式和内容上用css3和js技术进行比例缩小控制,设计为1:5的比例;在左侧幻灯片预览图用鼠标左键点击事件,触发右侧编辑界面的更换,使右侧结构、内容和所选左侧幻灯片结构、内容一致。
进一步地,所述模板编辑功能的实现,具体包括:
左侧每一张幻灯片支持鼠标右键点击事件出现编辑框,编辑框中有二级“新建”、“隐藏”、“复制”、“删除”功能按钮;
二级“新建”为左侧增加一张幻灯片,即DOM中***新幻灯片结构,以及右侧编辑界面结构恢复为默认编辑界面,编辑页面展示结构和预览幻灯片结构同步,并在模板数据集合中新增一条默认数据;
“隐藏”为左侧预览幻灯片出现隐藏图标,在播放幻灯片时不展示该幻灯片,即在模板数据集合中该幻灯片对应数据中的display数值为true;
“复制”为在左侧幻灯片中再次***所复制幻灯片的DOM结构及其内容,右侧编辑界面同步左侧缩略幻灯片的结构内容,在数据模板集合中复制其单条数据***,index索引数据根据集合排列下标变化;
“删除”为移除该预览幻灯片,同时移除其DOM结构和内容,即在模板数据集合中删除该条数据,其整个数据集合索引有序变化;
其中,右侧每张预览幻灯片支持拖拉移动调整预览幻灯片顺序,使用的是插件dragula.js实现,并且在模板数据集合中,根据其预览幻灯片的拖拽顺序,调整其模板数据集合中的索引;右侧编辑界面编辑内容使用的是input标签技术,支持文本或者图片编辑;文本存储格式为字符串String,保存在数据模板参数text中,图片将会用前端canvas技术转化成base64格式,保存在数据模板参数image中。
进一步地,所述插件dragula.js的实现原理包括:
点击其幻灯片DOM节点的监听鼠标mousedown事件,克隆当前节点;
监听mousemove事件,修改其克隆出来的节点坐标,实现节点跟随鼠标的效果,监听mouseup事件和判断是否在右侧幻灯片区域内,在其右侧幻灯片区域内,放下克隆节点,删除原节点,不在右侧幻灯片区域内,删除克隆节点,原节点不变。
进一步地,离线模板数据打开功能的实现,包括:
复制保存时生成文件里的模板数据,输入其模板数据,同时支持编辑数据。
进一步地,所述在线模板数据打开功能的实现,具体包括:
选择在线数据模板,输入网络地址后,该网络地址将作为请求参数,通过Axios技术请求后端接口,接口响应成功后,后端***中的应用组件将返回模板数据,前端用后端返回的模板数据赋值到界面展示的input标签上,value为该模板数据,该数据模板只支持复制,不支持在线编辑;
其中,模板数据的修改,直接对应界面的改变,用数据驱动界面的DOM结构变化及其内容,涉及左侧预览幻灯片内容及右侧编辑区域的内容;
其中,数据模板参数是一个数组,包含不定数量的每张幻灯片的数据对象,每个对象的参数包含以下信息:
index:索引;
title:幻灯片标题;
animation:幻灯片动画展示模式;
display:幻灯片内容是否在演示中显示;
page:幻灯片内容数组,数组内包含以下数据组成的多个JSON对象:
width:幻灯片内容里单独内容的宽度设置;
height:幻灯片内容里单独内容的高度设置;
text:幻灯片内容里单独内容的文案;
image:幻灯片内容里单独内容的图片地址,支持base64和在线图片地址;
layer:幻灯片内容里单独内容的展示层级,层级数值最大置于最上层,层级数值最小置于最底层。
进一步地,所述“播放预览”功能的实现,具体包括:
前端***触发预览页面模块,预览页面模块的层级最高,将覆盖在整个浏览器界面中,直接演示幻灯片;同时触发渲染数据组件,该组件通过模板数据集合,计算出每一页幻灯片的结构和展示内容,通过前端***流式布局的方式展示出完整的演示幻灯片的全部幻灯片内容;幻灯片演示支持全屏点击事件切换幻灯片以及鼠标滚轮事件切换幻灯片;鼠标双击事件触发退出预览幻灯片模式,回到编辑页面的模式;
其中,渲染数据组件,是一套完整的DOM结构模板,独立的js逻辑,预制的css文件,通过传入的模板数据集合,循环该模板数据集合,对每条数据进行DOM的递归展示,并根据数据的内容,***到DOM中渲染数据内容,js技术控制其操作事件及播放,css控制页面的样式;数据改变,DOM及内容跟着变化,js逻辑和css样式根据数据的不同其逻辑程序相应变化,呈现不同的渲染结果。
进一步地,所述“保存”功能的实现,具体包括:
生成模板数据文件组件,通过FileSaver.js技术将数据模板文件保存到本地,在“打开”功能中选择编辑数据模板复制在编辑框中,进行数据编辑,实现演示幻灯片的二次编辑;
数据上送组件,向后端***上送模板数据,后端响应后返回一个在线web地址,前端程序打开新的浏览器窗口,访问该地址;
其中,生成模板数据文件组件的组件原理是:把编辑好的模板数据通过给隐藏的input(type=“textarea”)标签赋值value,再使用插件FileSaver.js的接口获取input的value生成Blob,通过浏览器下载到用户个人计算机的下载本地文件夹;所下载的文件是一个txt文件,该文件内容能够编辑能够复制;
其中,数据上送组件的原理是:封装好一个function,传入变量模板数据,使用Axios技术把整理好的模板数据,通过接口上送到后端***应用组件;接口响应成功后,接口返回该演示文件的web浏览地址,然后使用js的window.open()打开该地址,用户将在浏览器新窗口中看到在线演示网页。
进一步地,所述服务器,包括:
获取到前端上送的模板数据,触发应用组件,该组件接收前端请求参数,根据需求调用底层后端组件,获取底层数据后,再返回前端所需求的数据,该组件处理两个接口的相关逻辑需求:
在线数据接口,接收到在线数据模板发出的请求后,根据参数在线web演示网页的地址,访问对应地址的模板数据库,查询匹配在线地址的数据,返回对应的模板数据给前端***;
数据上送接口,后端***应用组件接收到前端接口返回的模板数据,传入模板数据处理组件,并等待演示网页地址生成组件返回对应的在线web网络地址,作为数据上送接口的响应数据,返回到前端数据上送组件;前端数据上送组件拿到演示网页地址,前端程序自动在浏览器新窗口中打开该网页地址;演示网页在浏览器中初始化后,获取地址栏数据索引TDI为请求参数,向后端应用组件发起请求,获取相应的模板数据,拿到模板数据后,页面渲染出完整的演示页面;
其中TDI为获取请求参数的key,key名定义为TDI;
其中,模板数据处理组件:接收到前端模板数据后,做三个同步逻辑处理:提取图片信息,把图片存入图片数据库的同时,将取得每张图在图片数据库中地址;每张图在图片数据库中地址和模板数据建立对应的关系后,处理成新的模板数据,存入模板数据库;存入模板数据库成功后,将调用演示网页地址生成组件传入数据索引TDI;
其中,演示网页地址生成组件:用数据索引TDI作为查询模板数据的钥匙,将已知的前端演示网页H5服务器访问地址通过地址栏的形式拼接TDI,形成在线演示网页唯一的访问地址,并将该访问地址通过接口响应,返回到前端数据上送组件。
本发明实施例提供的上述网页版演示幻灯片PPT的实现方法,与现有技术相比,其有益效果如下:
本发明的网页版演示幻灯片支持一般常规演示幻灯片新建页面及编辑,同时也支持修改模板文本数据改变整个演示幻灯片内容,包括改变演示幻灯片内容的文本、图片、布局等,使用效率上比一般演示幻灯片软件更简单快捷,节省编辑时间。本发明的网页版演示幻灯片支持单机离线使用和联网使用:单机使用免安装,容易上手且方便裸机使用;联网使用,能把数据传送到后端***,可生成互联网的web浏览地址,方便跨端分享,尤其在文件比较大的情况下,不需要跨端传输,直接打开网页展示演示幻灯片,更贴合商务环境下演示需要迅捷简单的使用需求。
另外,本发明的网页版演示幻灯片能丰富常规演示幻灯片的使用资源,弥补商业演示幻灯片不能覆盖的人群。
附图说明
图1为一个实施例中提供的一种网页版PPT的实现方法流程图;
图2是一个实施例中提供的一种网页版PPT界面示例说明;
图3是一个实施例中提供的鼠标右键点击缩略幻灯片的示例说明;
图4是一个实施例中提供的编辑数据模板示例说明;
图5是一个实施例中提供的在线数据模板示例说明。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本申请进行进一步详细说明。应当理解,此处描述的具体实施例仅仅用以解释本申请,并不用于限定本申请。
结合图1,本发明的一个实施例提供一种网页版演示幻灯片PPT的实现方法,网页版演示幻灯片PPT具体包括:
本发明实施例的前端***原理上是一套完整的H5页面,包括css文件夹(实现方法所需的所有css文件),js文件夹(实现方法所需的所有js文件,其中包括必须的插件FileSaver.js、dragula.js),image文件夹(实现方法所需的所有图标文件),一个HTML文件(index.html入口文件,用户可在个人计算机设备上手动用浏览器打开该文件,即是本方法的操作界面,用户按照界面图标提示正常编辑操作;后端***包括:服务器(用于存放前后端项目文件以及应用)、两个数据库(用于存放数据,包括模板数据库和模板图片数据库)、两大组件(模板数据处理组件、演示网页地址生成组件)、前端演示网页h5(包括index.html入口文件、css文件夹、js文件夹)。
其中,“前端演示网页H5”是一套完整的h5文件,放置在服务器上,用于在线访问;包括文件index.html,用于访问的入口;css文件夹,里面存放index.html需要依赖的所有css文件;js文件夹,里面存放index.html需要依赖的所有js文件。
本发明实施例中网页版演示幻灯片PPT的具体功能如下:
(1)点选“新建”,参见图2,新建全新的演示幻灯片界面,用户可在界面左侧上新建、选择幻灯片,用户可在界面左侧编辑内容;左侧每一张幻灯片的内部结构、内容会同步到右侧界面编辑的结构、内容,其区别是用***相同的DOM结构,在样式和内容上用css3和js技术进行比例缩小控制,设计为1:5的比例,达到预览效果;左侧幻灯片预览图的鼠标左键点击事件,将会触发右侧编辑界面的更换,使右侧结构、内容和所选左侧幻灯片结构、内容一致。
还有,左侧每一张幻灯片支持鼠标右键点击事件出现编辑框,编辑框中有新建、隐藏、复制、删除功能按钮,参见图3;编辑框中的按钮功能说明内容为:“新建”为左侧增加一张幻灯片,即DOM中***新幻灯片结构,以及右侧编辑界面结构恢复为默认编辑界面,编辑页面展示结构和预览幻灯片结构同步,并在模板数据集合中新增一条默认数据,“隐藏”为左侧预览幻灯片出现隐藏图标,在播放幻灯片时不展示该幻灯片,即在模板数据集合中该幻灯片对应数据中的display数值为true,“复制”为在左侧幻灯片中再次***所复制幻灯片的DOM结构及其内容,右侧编辑界面同步左侧缩略幻灯片的结构内容,在数据模板集合中复制其单条数据***,index索引数据根据集合排列下标变化,“删除”为移除该预览幻灯片,同时移除其DOM结构和内容,即在模板数据集合中删除该条数据,其整个数据集合索引有序变化。
其中,右侧每张预览幻灯片支持拖拉移动调整预览幻灯片顺序,使用的是插件dragula.js实现,并且在模板数据集合中,也会根据其预览幻灯片的拖拽顺序,调整其模板数据集合中的索引;右侧编辑界面编辑内容使用的是input标签技术,支持文本或者图片编辑;文本存储格式为字符串String,保存在数据模板参数text中,图片将会用前端canvas技术转化成base64格式,保存在数据模板参数image中。
上述dragula.js的实现原理是点击其幻灯片DOM节点的监听鼠标mousedown事件,克隆当前节点;然后监听mousemove事件,修改其克隆出来的节点坐标,实现节点跟随鼠标的效果,监听mouseup事件和判断是否在右侧幻灯片区域内,在其右侧幻灯片区域内,放下克隆节点,删除原节点,不在右侧幻灯片区域内,删除克隆节点,原节点不变。
(2)点选“打开”,参见图4和图5,1、复制保存时生成的文件内容,输入保存时生成的数据模板数据,同时支持编辑数据;2、可以选择在线数据模板,输入网络地址后,该网络地址将作为请求参数,通过Axios技术请求后端接口,接口响应成功后,后端服务器中的“应用组件”将返回模板数据,前端用后端返回的模板数据赋值到界面展示的input(文本域textarea)标签上,value为该模板数据,该数据模板只支持复制,不支持在线编辑;模板数据的修改,将会直接对应界面的改变,用数据驱动界面的DOM结构变化及其内容,涉及左侧预览幻灯片内容及右侧编辑区域的内容;数据模板参数说明,数据模板参数是一个数组(幻灯片集合),包含不定数量的每张幻灯片的数据对象(单张幻灯片),每个对象的参数包含以下信息:
index:索引;
title:幻灯片标题;
animation:幻灯片动画展示模式;
display:幻灯片内容是否在演示中显示;
page:幻灯片内容数组(集合),数组(集合)内包含以下数据组成的多个对象;
width:幻灯片内容里单独内容的宽度设置;
height:幻灯片内容里单独内容的高度设置;
text:幻灯片内容里单独内容的文案;
image:幻灯片内容里单独内容的图片地址,支持base64和在线图片地址;
layer:幻灯片内容里单独内容的展示层级,层级数值最大,置于最上层,最小,置于最底层。
上述Axios,是一个基于promise的网络请求库,作用于node.js和浏览器中,可以运行在浏览器和node.js中,提供了易于扩展的接口。在服务端它使用原生node.jshttp模块,而在客户端(浏览端)则使用XMLHttpRequest。
(3)点选“播放预览”,前端程序将会触发预览页面模块,预览页面模块的层级最高,将覆盖在整个浏览器界面中,直接演示幻灯片,同时触发渲染数据组件,该组件通过模板数据集合,计算出每一页幻灯片的结构和展示内容,通过流式布局的方式展示出完整的演示幻灯片的全部幻灯片内容;幻灯片演示支持全屏点击事件切换幻灯片以及鼠标滚轮事件切换幻灯片;鼠标双击事件触发退出预览幻灯片模式,回到编辑页面的模式。
“渲染数据组件”:该组件是一套完整的DOM结构,独立的js逻辑,预制的css文件,通过传入的模板数据集合,循环该模板数据集合,对每条数据进行DOM的递归展示,并根据数据的内容,***到DOM中渲染数据内容,js技术控制其操作事件及播放,css控制页面的样式;数据改变,DOM及内容跟着变化,js逻辑和css样式根据数据的不同做出预制相应的变化。
(4)点选“保存”,将会触发保存模块,模块里面包括生成模板数据文件组件、数据上送组件;生成模板数据文件组件,通过FileSaver.js技术将数据模板文件(txt格式)保存到本地,文件小且方便存储,用户可以直接复制该文件内容,在“打开”功能中选择“编辑数据模板”复制在编辑框中,进行数据编辑,实现演示幻灯片的二次编辑;通过数据上送组件,向后端服务器上送模板数据,后端响应后,返回一个在线web地址,前端程序打开新的浏览器窗口,访问该地址,就是演示网页的在线版本,用户可以分享给其他用户。
“生成模板数据文件组件”:该组件原理是,把编辑好的模板数据通过给隐藏input(type=“textarea”)的标签赋值value,再使用插件FileSaver.js的接口获取input的value生成Blob,通过浏览器下载到用户个人计算机的下载本地文件夹;所下载的文件,是一个txt文件,该文件内容可编辑可复制。
“数据上送组件”:该组件原理是封装好一个function,传入变量模板数据,使用Axios技术把整理好的模板数据,通过接口上送到后端服务器“应用组件”;接口响应成功后,接口返回该演示文件的web浏览地址,然后使用js的window.open()打开该地址,用户将在浏览器新窗口中看到在线演示网页。
上述FileSaver.js是HTML5的saveAs()FileSaver实现,支持大多数主流的浏览器的一款开源下载文件插件。
还有,本发明实施例中后端服务器的功能如下:
获取到前端上送的模板数据,触发“应用组件”,该组件对接前端相关组件,接收前端请求参数,根据需求,调用底层后端组件,获取底层数据后,再返回前端所需求的数据,该组件主要处理两个接口的相关逻辑需求:1、在线数据接口,接收到在线数据模板发出的请求后,根据参数在线web演示网页的地址,将会访问对应地址的模板数据库,查询匹配在线地址的数据,返回对应的模板数据给前端;2、数据上送接口,后端应用组件接收到前端接口返回的模板数据,传入“模板数据图片地址处理组件”,并等待“演示网页地址生成组件”返回对应的在线web网络地址,作为数据上送接口的响应数据,返回到前端数据上送组件;前端数据上送组件拿到演示网页地址,前端程序自动在浏览器新窗口中打开;演示网页在浏览器中初始化后,获取地址栏数据索引TDI为请求参数,向后端应用组件发起请求,获取相应的模板数据,拿到模板数据后,网页页面将渲染出完整的演示页面。
“模板数据处理组件”:接收到前端模板数据后,会做三个同步逻辑处理:①提取图片信息,把图片存入图片数据库的同时,将取得每张图在图片数据库中地址,②每张图在图片数据库中地址和模板数据建立对应的关系后,处理成新的模板数据,存入模板数据库;③存入模板数据库成功后,将调用“演示网页地址生成组件”传入数据索引TDI(在本方法中定义TDI是Templatedata index的缩写,用作查询模板数据库中对应模板数据的key)。
“演示网页地址生成组件”:用数据索引TDI作为查询模板数据的钥匙,将已知的“前端演示网页H5”服务器访问地址通过地址栏“?”的形式拼接TDI,形成在线演示网页唯一的访问地址,并将该访问地址通过接口响应,返回到前端“数据上送组件”。
“演示网页”:在浏览器中打开的演示网页,会在加载事件中获取地址栏上TDI值,作为请求参数向应用组件发起请求,请求响应后,应用组件调用“演示网页地址生成组件”,“演示网页地址生成组件”逻辑根据TDI,请求模板数据库,获得对应的模板数据,再调用应用组件,返回给演示网页。
“前端演示网页H5”:是一套完整的H5页面,其包括:index.html入口文件、css文件夹,里面放置页面所需css文件、js文件夹,里面放置页面所需js文件;入口index文件在浏览器中打开后,将调用js函数,完成请求接口及渲染等工作。
以上所述实施例仅表达了本申请的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对发明专利范围的限制。对于本领域的普通技术人员来说,在不脱离本申请构思的前提下,还可以做出若干变形和改进,这些都属于本申请的保护范围。
Claims (7)
1.一种网页版演示幻灯片PPT的实现方法,其特征在于,包括:
搭建前端***和后端***;所述前端***包括:H5页面;所述后端***包括:服务器、模板数据库、模板图片数据库、模板数据处理组件和演示网页地址生成组件;
基于前端***和后端***,构建网页版演示幻灯片;所述网页版演示幻灯片包括一级“新建”功能、“打开”功能、“播放预览”功能、“保存”功能;
其中:
所述一级“新建”功能包括:基本编辑功能和模板编辑功能;所述模板编辑功能的实现包括:采用dragula.js的实现原理、且基于DOM结构的js程序操作,对模板数据库中的演示幻灯片进行编辑;
所述“打开”功能包括:离线模板数据打开功能和在线模板数据打开功能;所述在线模板数据打开功能的实现包括:通过网络地址输入的方式作为向后端***接口请求的参数,采用Axios技术向后端***请求模板数据、并展示在前端***的界面上;
所述“播放预览”功能的实现包括:在浏览器界面,通过前端***流式布局的方式展示完整演示幻灯片的全部幻灯片内容;
所述“保存”功能的实现包括:采用FileSaver.js技术将数据模板文件保存到本地,并向后端***发送模板数据,后端***返回一个在线web地址;
离线模板数据打开功能的实现,包括:
复制保存时生成文件里的模板数据,输入模板数据,同时支持编辑数据;
所述在线模板数据打开功能的实现,具体包括:
选择在线数据模板,输入网络地址后,该网络地址将作为请求参数,通过Axios技术请求后端接口,接口响应成功后,后端***中的应用组件将返回模板数据,前端用后端返回的模板数据赋值到界面展示的input标签上,value为模板数据,在线数据模板只支持复制,不支持在线编辑;
其中,模板数据的修改,直接对应界面的改变,用数据驱动界面的DOM结构变化及其内容,涉及左侧预览幻灯片内容及右侧编辑区域的内容;
其中,数据模板参数是一个数组,包含不定数量的每张幻灯片的数据对象,每个对象的参数包含以下信息:
index:索引;
title:幻灯片标题;
animation:幻灯片动画展示模式;
display:幻灯片内容是否在演示中显示;
page:幻灯片内容数组,数组内包含以下数据组成的多个JSON对象:
width:幻灯片内容里单独内容的宽度设置;
height:幻灯片内容里单独内容的高度设置;
text:幻灯片内容里单独内容的文案;
image:幻灯片内容里单独内容的图片地址,支持base64和在线图片地址;
layer:幻灯片内容里单独内容的展示层级,层级数值最大置于最上层,层级数值最小置于最底层;
所述“保存”功能的实现,具体包括:
生成模板数据文件组件,通过FileSaver.js技术将数据模板文件保存到本地,在“打开”功能中选择编辑数据模板复制在编辑框中,进行数据编辑,实现演示幻灯片的二次编辑;
数据上送组件,向后端***发送模板数据,后端响应后返回一个在线web地址,前端程序打开新的浏览器窗口,访问该地址;
其中,生成模板数据文件组件的组件原理是:把编辑好的模板数据通过给隐藏的input标签赋值value,再使用插件FileSaver.js的接口获取input的value生成Blob,通过浏览器下载到用户个人计算机的下载本地文件夹;所下载的文件是一个txt文件,txt文件内容能够编辑能够复制;
其中,数据上送组件的原理是:封装好一个function,传入变量模板数据,使用Axios技术把整理好的模板数据,通过接口发送到后端***应用组件;接口响应成功后,接口返回演示文件的web浏览地址,然后使用js的window.open()打开该地址,用户将在浏览器新窗口中看到在线演示网页。
2.如权利要求1所述的网页版演示幻灯片PPT的实现方法,其特征在于,所述H5页面,包括:
css文件夹,实现网页版演示幻灯片PPT所需的所有css文件;
js文件夹,实现网页版演示幻灯片PPT所需的所有js文件,js文件包括插件FileSaver.js、dragula.js;
image文件夹,实现网页版演示幻灯片PPT所需的所有图标文件;
一个HTML文件,其为index.html入口文件,用户在个人计算机设备上手动用浏览器打开该文件,该文件为操作界面,用户按照界面图标提示正常编辑操作。
3.如权利要求1所述的网页版演示幻灯片PPT的实现方法,其特征在于,所述基本编辑功能的实现,包括:
新建全新的演示幻灯片界面,在界面左侧上新建和选择幻灯片,并在界面右侧编辑内容;将右侧每一张幻灯片的内部结构和内容同步到左侧预览界面,界面左侧和界面右侧区别是***相同的DOM结构,左侧预览图只预览不能编辑,右侧编辑界面编辑的内容和结构同步到左侧预览界面,在样式和内容上用css3和js技术进行比例缩小控制,设计为1:5的比例;在左侧幻灯片预览图用鼠标左键点击事件,触发右侧编辑界面的更换,使右侧幻灯片的结构和内容与所选左侧幻灯片的结构和内容一致。
4.如权利要求3所述的网页版演示幻灯片PPT的实现方法,其特征在于, 所述模板编辑功能的实现,具体包括:
左侧每一张幻灯片支持鼠标右键点击事件出现编辑框,编辑框中有二级“新建”、“隐藏”、“复制”、“删除”功能按钮;
二级“新建”为左侧增加一张幻灯片,在DOM结构中***新幻灯片结构,以及右侧编辑界面结构恢复为默认编辑界面,编辑页面展示的新幻灯片结构和预览幻灯片结构同步,并在模板数据集合中新增一条默认数据;
“隐藏”为左侧预览幻灯片出现隐藏图标,在播放幻灯片时不展示该幻灯片;
“复制”为在左侧幻灯片中再次***所复制幻灯片的DOM结构及其内容,右侧编辑界面同步左侧缩略幻灯片的结构内容,在数据模板集合中复制单条数据***,index索引数据根据集合排列下标变化;
“删除”为移除该预览幻灯片,同时移除DOM结构和内容,在模板数据集合中删除该条数据,整个数据集合索引有序变化;
其中,左侧每张预览幻灯片支持拖拉移动调整预览幻灯片顺序,使用的是插件dragula.js实现,并且在模板数据集合中,根据预览幻灯片的拖拽顺序,调整模板数据集合中的索引;右侧编辑界面编辑内容使用的是input标签技术,支持文本或者图片编辑;文本存储格式为字符串String,保存在数据模板参数text中,图片将会用前端canvas技术转化成base64格式,保存在数据模板参数image中。
5.如权利要求4所述的网页版演示幻灯片PPT的实现方法,其特征在于,所述插件dragula.js的实现原理包括:
点击幻灯片DOM结构节点的监听鼠标mousedown事件,克隆当前节点;
监听mousemove事件,修改克隆出来的节点坐标,实现节点跟随鼠标的效果,监听mouseup事件和判断mouseup事件是否在左侧幻灯片区域内,在左侧幻灯片区域内,放下克隆节点,删除原节点,不在左侧幻灯片区域内,删除克隆节点,原节点不变。
6.如权利要求1所述的网页版演示幻灯片PPT的实现方法,其特征在于,所述“播放预览”功能的实现,具体包括:
前端***触发预览页面模块,预览页面模块的层级最高,将覆盖在整个浏览器界面中,直接演示幻灯片;同时触发渲染数据组件,该组件通过模板数据集合,计算出每一页幻灯片的结构和展示内容,通过前端***流式布局的方式展示出完整的演示幻灯片的全部幻灯片内容;幻灯片演示支持全屏点击事件切换幻灯片以及鼠标滚轮事件切换幻灯片;鼠标双击事件触发退出预览幻灯片模式,回到编辑页面的模式;
其中,渲染数据组件,是一套完整的DOM结构模板,独立的js逻辑,预制的css文件,通过传入的模板数据集合,循环该模板数据集合,对每条数据进行DOM结构的递归展示,并根据数据的内容,***到DOM结构中渲染数据内容,js技术控制操作事件及播放,css控制页面的样式;数据改变,DOM结构及内容跟着变化,js逻辑和css样式根据数据的不同其逻辑程序相应变化,呈现不同的渲染结果。
7.如权利要求1所述的网页版演示幻灯片PPT的实现方法,其特征在于,所述服务器,包括:
获取前端***发送的模板数据,触发应用组件,应用组件接收前端请求参数,根据需求调用底层后端组件,获取底层数据后,再返回前端所需求的数据,应用组件处理两个接口的相关逻辑需求:
在线数据接口,接收到在线数据模板发出的请求后,根据参数在线web演示网页的地址,访问对应地址的模板数据库,查询匹配在线地址的数据,返回对应的模板数据给前端***;
数据上送接口,后端***应用组件接收到前端接口返回的模板数据,传入模板数据处理组件,并等待演示网页地址生成组件返回对应的在线web网络地址,作为数据上送接口的响应数据,返回到前端数据上送组件;前端数据上送组件拿到演示网页地址,前端程序自动在浏览器新窗口中打开演示网页地址;演示网页在浏览器中初始化后,获取地址栏数据索引TDI为请求参数,向后端应用组件发起请求,获取相应的模板数据,拿到模板数据后,页面渲染出完整的演示页面;
其中,模板数据处理组件:接收到前端模板数据后,做三个同步逻辑处理:提取图片信息,把图片存入图片数据库的同时,将取得每张图在图片数据库中地址;每张图在图片数据库中地址和模板数据建立对应的关系后,处理成新的模板数据,存入模板数据库;存入模板数据库成功后,将调用演示网页地址生成组件传入数据索引TDI;
其中,TDI为获取请求参数的key,key名定义为TDI;
其中,演示网页地址生成组件:用数据索引TDI作为查询模板数据的钥匙,将已知的前端演示网页H5服务器访问地址通过地址栏的形式拼接TDI,形成在线演示网页唯一的访问地址,并将访问地址通过接口响应,返回到前端数据上送组件。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202310042699.7A CN116226418B (zh) | 2023-01-28 | 2023-01-28 | 一种网页版演示幻灯片ppt的实现方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202310042699.7A CN116226418B (zh) | 2023-01-28 | 2023-01-28 | 一种网页版演示幻灯片ppt的实现方法 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN116226418A CN116226418A (zh) | 2023-06-06 |
CN116226418B true CN116226418B (zh) | 2024-06-18 |
Family
ID=86588514
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202310042699.7A Active CN116226418B (zh) | 2023-01-28 | 2023-01-28 | 一种网页版演示幻灯片ppt的实现方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN116226418B (zh) |
Family Cites Families (21)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US7047489B2 (en) * | 1998-07-29 | 2006-05-16 | Fujitsu Limited | Slide show system and method using a browser |
US6473749B1 (en) * | 2000-02-22 | 2002-10-29 | Robert Scott Smith | System and method for managing file content |
SG99886A1 (en) * | 2000-02-24 | 2003-11-27 | Ibm | System and method for collaborative multi-device web browsing |
US20040205644A1 (en) * | 2000-12-29 | 2004-10-14 | International Business Machines Corporation | Method and system for allowing in place editing of office documents in a place |
CN101299250A (zh) * | 2007-04-30 | 2008-11-05 | 深圳华飚科技有限公司 | 在线协同幻灯片制作服务*** |
CN101299249A (zh) * | 2007-04-30 | 2008-11-05 | 深圳华飚科技有限公司 | 在线协同幻灯片展示服务*** |
US20090265607A1 (en) * | 2008-04-17 | 2009-10-22 | Razoss Ltd. | Method, system and computer readable product for management, personalization and sharing of web content |
US8010603B2 (en) * | 2009-12-07 | 2011-08-30 | International Business Machines Corporation | Automated web conference system for generating higher quality of presentation slide by client and submitting to server |
US9372835B2 (en) * | 2010-09-01 | 2016-06-21 | Pilot.Is Llc | System and method for presentation creation |
US20150199308A1 (en) * | 2011-10-17 | 2015-07-16 | Google Inc. | Systems and methods for controlling the display of online documents |
EP2728498A1 (en) * | 2012-11-06 | 2014-05-07 | Open Text S.A. | System and method for creation of templates |
CN103023873A (zh) * | 2012-11-18 | 2013-04-03 | 王帅国 | 一种跨终端的实时交互幻灯片在线分发方法 |
CA2948907C (en) * | 2014-05-14 | 2021-05-04 | Pagecloud Inc. | Methods and systems for web content generation |
KR102036715B1 (ko) * | 2018-04-02 | 2019-10-25 | 주식회사 한글과컴퓨터 | 브라우저를 통해 프레젠테이션 문서의 빠른 로딩이 가능한 웹 기반의 프레젠테이션 편집 장치 및 그 동작 방법 |
CN110175321A (zh) * | 2019-05-21 | 2019-08-27 | 江苏锐天信息科技有限公司 | 一种基于浏览器内核的ppt编辑和演示插件*** |
KR102366182B1 (ko) * | 2020-07-30 | 2022-02-22 | 주식회사 에스크라운 | 인공지능을 활용한 슬라이드 자동생성 방법 및 서버 |
CN112738617A (zh) * | 2020-12-28 | 2021-04-30 | 慧科教育科技集团有限公司 | 一种有声幻灯片录制与播放方法及*** |
US11657213B2 (en) * | 2021-04-22 | 2023-05-23 | Universidad De Santiago De Chile | System and methods that add functionalities to presentation systems so that texts and numbers be remotely inserted, edited and deleted from mobile devices directly into slideware slide show mode (iSlidesMobile) |
CN113934955A (zh) * | 2021-10-25 | 2022-01-14 | 稿定(厦门)科技有限公司 | 浏览器生成显示ppt文件的方法、浏览器及存储介质 |
CN114090666A (zh) * | 2021-11-09 | 2022-02-25 | 彩讯科技股份有限公司 | 幻灯片显示方法、装置、设备以及存储介质 |
CN114610906A (zh) * | 2022-01-27 | 2022-06-10 | 广东禧越网络科技有限公司 | 一种ppt的在线拼合方法及其*** |
-
2023
- 2023-01-28 CN CN202310042699.7A patent/CN116226418B/zh active Active
Also Published As
Publication number | Publication date |
---|---|
CN116226418A (zh) | 2023-06-06 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
TWI808393B (zh) | 頁面處理方法、裝置、設備及儲存媒體 | |
AU2020203136C1 (en) | System and method for the generation of an adaptive user interface in a website building system | |
US11763076B2 (en) | Document applet generation | |
US6990498B2 (en) | Dynamic graphical index of website content | |
US7181468B2 (en) | Content management for rich media publishing system | |
JP3839468B2 (ja) | 国際データ処理システム | |
US20030236836A1 (en) | System and method for the design and sharing of rich media productions via a computer network | |
US20040215719A1 (en) | Method and system for designing, editing and publishing web page content in a live internet session | |
US20070162845A1 (en) | User interface for webpage creation/editing | |
US11599584B2 (en) | Method and system for processing information in social network system | |
JP2006309801A (ja) | 広域ネットワーク上のハイパーメディアの分散パブリッシングおよびマネージメント用インテグレーティドデベロップメントプラットフォーム | |
WO2007063549A2 (en) | Method and apparatus for a personalized web page | |
US20110197162A1 (en) | Method and system for organizing information with sharable user interface | |
CN1395193A (zh) | 在网页上生成动态可编辑表格的方法 | |
US20070283243A1 (en) | Method and apparatus for adapting external controls to a portal design | |
JP2001084212A (ja) | ホームページ作成方法 | |
CN111061532B (zh) | 一种壁纸展示方法及终端设备 | |
CN116226418B (zh) | 一种网页版演示幻灯片ppt的实现方法 | |
JP2006127531A (ja) | ネットワークの情報を高速で取得する方法、及びそのシステム | |
US20050039122A1 (en) | Methodology and system for rendering dynamic images | |
KR100375506B1 (ko) | 소용량 온라인 방식의 에이치티엠엘 저작 시스템 및 저작방법 | |
TW498655B (en) | System and method for heterogeneous information browser | |
Stanton et al. | Creating and Managing" Lookmarks" in ParaView |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |