一种网页版演示幻灯片PPT的实现方法技术

本发明专利技术公开了一种网页版演示幻灯片PPT的实现方法，其涉及计算机网页开发前端和后端技术领域。该方法包括：搭建前端系统和后端系统；所述前端系统包括：H5页面；所述后端系统包括：服务器、模板数据库、模板图片数据库、模板数据处理组件和演示网页地址生成组件；基于前端系统和后端系统，构建网页版演示幻灯片；所述网页版演示幻灯片包括一级“新建”功能、“打开”功能、“播放预览”功能、“保存”功能。该方法支持修改模板文本数据改变整个演示幻灯片内容，提高了使用效率；联网使用时能把数据传送到后端系统，可生成互联网的web浏览地址，方便跨端分享，尤其在文件比较大的情况下，不需要跨端传输及下载，直接打开网页展示演示幻灯片即可。直接打开网页展示演示幻灯片即可。直接打开网页展示演示幻灯片即可。

【技术实现步骤摘要】
一种网页版演示幻灯片PPT的实现方法


[0001]本专利技术涉及计算机网页开发前端
和后端
，特别涉及一种支持离线和在线的网页版演示幻灯片PPT的实现方法。

技术介绍

[0002]目前，对演示幻灯片的功能依赖除了微软的OFFICE软件和金山的WPS之外，其他的在线版都需要高额的收费，且能下载的都是试用的版本，并不能开源。
[0003]现有技术中，一般常规的演示幻灯片只涉及对某个幻灯片的编辑，并没有涉及对模板文本数据的修改，所以在制作批量相近似幻灯片时，需要对每个幻灯片进行编辑，如此造成了重复劳动、且降低了使用效率；还有，一般常规的演示幻灯片依附于PPT软件，其使用时必须先安装PPT软件，才能打开文件在PPT软件上使用、其跨端传输时，需要传输文件本身，特别在文件比较大的情况下，跨端传输需要第三方工具，如邮箱或者其他传输媒介，操作不便、且需要大量的传输时间和下载时间，其给使用者带来了不便。

技术实现思路

[0004]基于此，有必要针对上述技术问题，提供一种网页版演示幻灯片PPT的实现方法，以使用户能在脱离软件本体的情况，利用浏览器进行离线或在线的PPT幻灯片编辑及演示。
[0005]本专利技术实施例提供一种网页版演示幻灯片PPT的实现方法，该方法包括：
[0006]搭建前端系统和后端系统；所述前端系统包括：H5页面；所述后端系统包括：服务器、模板数据库、模板图片数据库、模板数据处理组件和演示网页地址生成组件；
[0007]基于前端系统和后端系统，构建网页版演示幻灯片；所述网页版演示幻灯片包括一级“新建”功能、“打开”功能、“播放预览”功能、“保存”功能；
[0008]其中：
[0009]所述一级“新建”功能包括：基本编辑功能和模板编辑功能；所述模板编辑功能的实现包括：采用dragula.js的实现原理、且基于对DOM结构的js程序操作，对模板数据库中的演示幻灯片进行编辑；
[0010]所述“打开”功能包括：离线模板数据打开功能和在线模板数据打开功能；所述在线模板数据打开功能的实现包括：通过网络地址输入的方式作为向后端系统接口请求的参数，采用Axios技术向后端系统请求模板数据、并展示在前端系统的界面上；
[0011]所述“播放预览”功能的实现包括：在浏览器界面，通过前端系统流式布局的方式展示完整演示幻灯片的全部幻灯片内容；
[0012]所述“保存”功能的实现包括：采用FileSaver.js技术将数据模板文件保存到本地，并向后端系统上送模板数据，后端系统返回一个在线web地址。
[0013]进一步地，所述H5页面，包括：
[0014]css文件夹，实现网页版演示幻灯片PPT所需的所有css文件；
[0015]js文件夹，实现网页版演示幻灯片PPT所需的所有js文件，其中包括插件
FileSaver.js、dragula.js；
[0016]image文件夹，实现网页版演示幻灯片PPT所需的所有图标文件；
[0017]一个HTML文件，其为index.html入口文件，用户在个人计算机设备上手动用浏览器打开该文件，即为操作界面，用户按照界面图标提示正常编辑操作。
[0018]进一步地，所述基本编辑功能的实现，包括：
[0019]新建全新的演示幻灯片界面，在界面左侧上新建、选择幻灯片，并在界面右侧编辑内容；将右侧每一张幻灯片的内部结构、内容同步到左侧预览界面，其区别是插入相同的DOM结构，左侧预览图只预览不能编辑，右侧编辑界面其编辑的结构图形变化，同步到右侧预览界面，在样式和内容上用css3和js技术进行比例缩小控制，设计为1:5的比例；在左侧幻灯片预览图用鼠标左键点击事件，触发右侧编辑界面的更换，使右侧结构、内容和所选左侧幻灯片结构、内容一致。
[0020]进一步地，所述模板编辑功能的实现，具体包括：
[0021]左侧每一张幻灯片支持鼠标右键点击事件出现编辑框，编辑框中有二级“新建”、“隐藏”、“复制”、“删除”功能按钮；
[0022]二级“新建”为左侧增加一张幻灯片，即DOM中插入新幻灯片结构，以及右侧编辑界面结构恢复为默认编辑界面，编辑页面展示结构和预览幻灯片结构同步，并在模板数据集合中新增一条默认数据；
[0023]“隐藏”为左侧预览幻灯片出现隐藏图标，在播放幻灯片时不展示该幻灯片，即在模板数据集合中该幻灯片对应数据中的display数值为true；
[0024]“复制”为在左侧幻灯片中再次插入所复制幻灯片的DOM结构及其内容，右侧编辑界面同步左侧缩略幻灯片的结构内容，在数据模板集合中复制其单条数据插入，index索引数据根据集合排列下标变化；
[0025]“删除”为移除该预览幻灯片，同时移除其DOM结构和内容，即在模板数据集合中删除该条数据，其整个数据集合索引有序变化；
[0026]其中，右侧每张预览幻灯片支持拖拉移动调整预览幻灯片顺序，使用的是插件dragula.js实现，并且在模板数据集合中，根据其预览幻灯片的拖拽顺序，调整其模板数据集合中的索引；右侧编辑界面编辑内容使用的是input标签技术，支持文本或者图片编辑；文本存储格式为字符串String，保存在数据模板参数text中，图片将会用前端canvas技术转化成base64格式，保存在数据模板参数image中。
[0027]进一步地，所述插件dragula.js的实现原理包括：
[0028]点击其幻灯片DOM节点的监听鼠标mousedown事件，克隆当前节点；
[0029]监听mousemove事件，修改其克隆出来的节点坐标，实现节点跟随鼠标的效果，监听mouseup事件和判断是否在右侧幻灯片区域内，在其右侧幻灯片区域内，放下克隆节点，删除原节点，不在右侧幻灯片区域内，删除克隆节点，原节点不变。
[0030]进一步地，离线模板数据打开功能的实现，包括：
[0031]复制保存时生成文件里的模板数据，输入其模板数据，同时支持编辑数据。
[0032]进一步地，所述在线模板数据打开功能的实现，具体包括：
[0033]选择在线数据模板，输入网络地址后，该网络地址将作为请求参数，通过Axios技术请求后端接口，接口响应成功后，后端系统中的应用组件将返回模板数据，前端用后端返
回的模板数据赋值到界面展示的input标签上，value为该模板数据，该数据模板只支持复制，不支持在线编辑；
[0034]其中，模板数据的修改，直接对应界面的改变，用数据驱动界面的DOM结构变化及其内容，涉及左侧预览幻灯片内容及右侧编辑区域的内容；
[0035]其中，数据模板参数是一个数组，包含不定数量的每张幻灯片的数据对象，每个对象的参数包含以下信息：
[0036]index：索引；
[0037]title：幻灯片标题；
[0038]animation：幻灯片动画展示模式；
[0039]display：幻灯片内本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种网页版演示幻灯片PPT的实现方法，其特征在于，包括：搭建前端系统和后端系统；所述前端系统包括：H5页面；所述后端系统包括：服务器、模板数据库、模板图片数据库、模板数据处理组件和演示网页地址生成组件；基于前端系统和后端系统，构建网页版演示幻灯片；所述网页版演示幻灯片包括一级“新建”功能、“打开”功能、“播放预览”功能、“保存”功能；其中：所述一级“新建”功能包括：基本编辑功能和模板编辑功能；所述模板编辑功能的实现包括：采用dragula.js的实现原理、且基于DOM结构的js程序操作，对模板数据库中的演示幻灯片进行编辑；所述“打开”功能包括：离线模板数据打开功能和在线模板数据打开功能；所述在线模板数据打开功能的实现包括：通过网络地址输入的方式作为向后端系统接口请求的参数，采用Axios技术向后端系统请求模板数据、并展示在前端系统的界面上；所述“播放预览”功能的实现包括：在浏览器界面，通过前端系统流式布局的方式展示完整演示幻灯片的全部幻灯片内容；所述“保存”功能的实现包括：采用FileSaver.js技术将数据模板文件保存到本地，并向后端系统上送模板数据，后端系统返回一个在线web地址。2.如权利要求1所述的网页版演示幻灯片PPT的实现方法，其特征在于，所述H5页面，包括：css文件夹，实现网页版演示幻灯片PPT所需的所有css文件；js文件夹，实现网页版演示幻灯片PPT所需的所有js文件，其中包括插件FileSaver.js、dragula.js；image文件夹，实现网页版演示幻灯片PPT所需的所有图标文件；一个HTML文件，其为index.html入口文件，用户在个人计算机设备上手动用浏览器打开该文件，即为操作界面，用户按照界面图标提示正常编辑操作。3.如权利要求1所述的网页版演示幻灯片PPT的实现方法，其特征在于，所述基本编辑功能的实现，包括：新建全新的演示幻灯片界面，在界面左侧上新建、选择幻灯片，并在界面右侧编辑内容；将右侧每一张幻灯片的内部结构、内容同步到左侧预览界面，其区别是插入相同的DOM结构，左侧预览图只预览不能编辑，右侧编辑界面其编辑的结构图形变化，同步到右侧预览界面，在样式和内容上用css3和js技术进行比例缩小控制，设计为1:5的比例；在左侧幻灯片预览图用鼠标左键点击事件，触发右侧编辑界面的更换，使右侧结构、内容和所选左侧幻灯片结构、内容一致。4.如权利要求3所述的网页版演示幻灯片PPT的实现方法，其特征在于，所述模板编辑功能的实现，具体包括：左侧每一张幻灯片支持鼠标右键点击事件出现编辑框，编辑框中有二级“新建”、“隐藏”、“复制”、“删除”功能按钮；二级“新建”为左侧增加一张幻灯片，即DOM中插入新幻灯片结构，以及右侧编辑界面结构恢复为默认编辑界面，编辑页面展示结构和预览幻灯片结构同步，并在模板数据集合中新增一条默认数据；
“
隐藏”为左侧预览幻灯片出现隐藏图标，在播放幻灯片时不展示该幻灯片，即在模板数据集合中该幻灯片对应数据中的display数值为true；“复制”为在左侧幻灯片中再次插入所复制幻灯片的DOM结构及其内容，右侧编辑界面同步左侧缩略幻灯片的结构内容，在数据模板集合中复制其单条数据插入，index索引数据根据集合排列下标变化；“删除”为移除该预览幻灯片，同时移除其DOM结构和内容，即在模板数据集合中删除该条数据，其整个数据集合索引有序变化；其中，右侧每张预览幻灯片支持拖拉移动调整预览幻灯片顺序，使用的是插件dragula.js实现，并且在模板数据集合中，根据其预览幻灯片的拖拽顺序，调整其模板数据集合中的索引；右侧编辑界面编辑内容使用的是input标签技术，支持文本或者图片编辑；文本存储格式为字符串String，保存在数据模板参数text中，图片将会用前端canvas技术转化成base64格式，保存在数据模板参数image中。5.如权利要求4所述的网页版演示幻灯片PPT的实现方法，其特征在于，所述插件dragula.js的实现原理包括：点击其幻灯片DOM节点的监听鼠标mousedown事件，克隆当前节点；监听mousemove事件，修改其克隆出来的节点坐标，实现节点跟随鼠标的效果，监听mouseup事件和判断是否在右侧幻灯片区域内，在其右侧幻灯片区域内，放下克隆节点，删除原节点，不在右侧幻灯片区域内，删除克隆节点，原节点不变。6.如权利要求1所述的网页版演示幻灯片PPT的实现方法，其特征在于，离线模板数据打开功能的实现，包括：复制保存时生成文件里的模板数据，输入其模板数据，同时支持编辑数据。7.如权利要求1所述的网页版演示幻灯片PPT的实现方法，其特征在于，所述在线模板数据打开功能的实现，具体包括：选择在线数据模板，输入网络地址后，该网络地址将作为请求参数，通过Axios技术请求后端接口，接口响应成功后，后端系统中的应用组件将返回模板数据，前端用...

【专利技术属性】
技术研发人员：张颖，孙月俊，
申请(专利权)人：创云融达信息技术天津股份有限公司，
类型：发明
国别省市：