CN116226418A - Realization method of webpage version demonstration slide PPT - Google Patents
Realization method of webpage version demonstration slide PPT Download PDFInfo
- Publication number
- CN116226418A CN116226418A CN202310042699.7A CN202310042699A CN116226418A CN 116226418 A CN116226418 A CN 116226418A CN 202310042699 A CN202310042699 A CN 202310042699A CN 116226418 A CN116226418 A CN 116226418A
- Authority
- CN
- China
- Prior art keywords
- data
- slide
- template
- interface
- address
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 39
- 238000012545 processing Methods 0.000 claims abstract description 13
- 230000008859 change Effects 0.000 claims abstract description 10
- 230000004048 modification Effects 0.000 claims abstract description 7
- 238000012986 modification Methods 0.000 claims abstract description 7
- 230000004044 response Effects 0.000 claims description 9
- 230000001360 synchronised effect Effects 0.000 claims description 9
- 238000012544 monitoring process Methods 0.000 claims description 8
- 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
- 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
- 230000008676 import 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
Images
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
Abstract
The invention discloses a method for realizing a webpage version demonstration slide PPT, and relates to the technical field of front end and back end of computer page development. The method comprises the following steps: building a front-end system and a back-end system; the front-end system includes: h5 page; the backend system includes: the system comprises a server, a template database, a template picture database, a template data processing component and a demonstration webpage address generating component; based on the front-end system and the back-end system, constructing a webpage version demonstration slide; the webpage version demonstration slide comprises a primary new function, an opening function, a play preview function and a save function. The method supports modification of template text data to change the whole content of the demonstration slides, and improves the use efficiency; when the internet is used, data can be transmitted to a back-end system, a web browsing address of the internet can be generated, cross-end sharing is convenient, and particularly under the condition that a file is relatively large, cross-end transmission and downloading are not needed, and a webpage display and demonstration slide is directly opened.
Description
Technical Field
The invention relates to the technical field of front end and back end of computer page development, in particular to a realization method of a webpage version demonstration slide PPT supporting offline and online.
Background
At present, the functions of the demonstration slides depend on other online versions except for OFFICE software of Microsoft and WPS of Jinshan, so that the online versions need high fee, and the online versions can be downloaded and are all trial versions and cannot be opened.
In the prior art, the general conventional demonstration slides only relate to editing a certain slide and do not relate to modification of template text data, so that each slide needs to be edited when batch similar slides are manufactured, repeated labor is caused, and the use efficiency is reduced; in addition, the general conventional presentation slide is attached to the PPT software, the PPT software must be installed first when the presentation slide is used, and when the presentation slide is used on the PPT software and transferred across ends, the file itself needs to be transferred, and especially in the case of larger files, the transfer across ends needs a third party tool, such as a mailbox or other transfer media, so that the operation is inconvenient, and a great amount of transfer time and downloading time are required, which brings inconvenience to users.
Disclosure of Invention
In view of the foregoing, it is necessary to provide a method for implementing a PPT of a web page presentation slide, so that a user can edit and present the PPT slide offline or online by using a browser when the user is separated from the software body.
The embodiment of the invention provides a method for realizing a webpage version demonstration slide PPT, which comprises the following steps:
building a front-end system and a back-end system; the front-end system includes: h5 page; the backend system includes: the system comprises a server, a template database, a template picture database, a template data processing component and a demonstration webpage address generating component;
based on the front-end system and the back-end system, constructing a webpage version demonstration slide; the webpage version demonstration slide comprises a primary new function, an opening function, a play preview function and a save function;
wherein:
the primary "new" function includes: a basic editing function and a template editing function; the realization of the template editing function comprises the following steps: editing the presentation slides in the template database by adopting the implementation principle of dragula. Js and based on js program operation on the DOM structure;
the "open" function includes: an offline template data opening function and an online template data opening function; the implementation of the online template data opening function comprises the following steps: the method comprises the steps that a network address input mode is used as a parameter for requesting an interface of a back-end system, an Axios technology is adopted for requesting template data from the back-end system, and the template data is displayed on the interface of a front-end system;
the implementation of the play preview function includes: displaying all slide contents of the complete demonstration slide on a browser interface in a front-end system stream layout mode;
the implementation of the "save" function includes: and storing the data template file locally by adopting a FileSaver.js technology, and sending template data to a back-end system, wherein the back-end system returns an online web address.
Further, the H5 page includes:
css folder, realize the webpage version demonstrates all css files that slide PPT needed;
js folder, which is used for realizing all js files required by the webpage version of the demonstration slide PPT, wherein the js files comprise plug-in filesaver. Js and dragula. Js;
an image folder for realizing all icon files required by the webpage version of the presentation slide PPT;
and the HTML file is an index HTML entry file, the file is manually opened by a user on the personal computer equipment by using a browser, and the HTML file is an operation interface, and the user prompts normal editing operation according to the interface icon.
Further, the implementation of the basic editing function includes:
newly creating a new demonstration slide interface, creating and selecting a slide on the left side of the interface, and editing contents on the right side of the interface; synchronizing the internal structure and content of each slide on the right side to a left side preview interface, wherein the difference is that the same DOM structure is inserted, the left side preview image is only previewed and can not be edited, the structure graphic change edited by the right side editing interface is synchronized to the right side preview interface, and the style and the content are subjected to scaling control by css3 and js technology, so that the ratio is designed to be 1:5; and (3) clicking an event by using a left button of a mouse on the left slide preview image to trigger the replacement of the right editing interface so that the right structure and the content are consistent with those of the selected left slide structure and the content.
Further, the implementation of the template editing function specifically includes:
each slide on the left side supports a mouse right click event to generate an edit box, and two levels of function buttons of new creation, hiding, copying and deleting are arranged in the edit box;
the second level is newly built, namely a slide is added to the left side, namely a new slide structure is inserted into the DOM, the right editing interface structure is restored to be a default editing interface, the editing page display structure and the preview slide structure are synchronous, and a default piece of data is newly added in the template data set;
the 'hiding' is that a hidden icon appears on the left preview slide, and the slide is not displayed when the slide is played, namely the display numerical value in the slide corresponding data in the template data set is true;
the 'copying' is to reinsert DOM structure and content of the copied slide in the left slide, the right editing interface synchronizes the structure content of the left thumbnail slide, copies single data in the data template set for insertion, and index data changes according to the set arrangement index;
"delete" is to remove the preview slide while removing its DOM structure and content, i.e., delete the piece of data in the template data set, with its entire data set index changing in order;
wherein, each preview slide on the right side supports drag movement to adjust the sequence of the preview slides, which is realized by plug-in dragula. Js, and in the template data set, the index in the template data set is adjusted according to the drag sequence of the preview slides; the right editing interface uses input label technology to edit content, and supports text or picture editing; the text storage format is String, the String is stored in a data template parameter text, the picture is converted into a base64 format by using a front-end canvas technology, and the String is stored in a data template parameter image.
Further, the implementation principle of the plug-in dragula. Js includes:
clicking a monitoring mouse event of a slide DOM node of the current node, and cloning the current node;
monitoring a mousemove event, modifying the cloned node coordinates of the mousemove event, realizing the effect that the node follows a mouse, monitoring the mousemove event, judging whether the mousemove event is in a right slide area, putting down the cloned node in the right slide area, deleting the original node, deleting the cloned node in the right slide area, and keeping the original node unchanged.
Further, the implementation of the offline template data opening function includes:
template data in the file is generated during copying and storing, the template data is input, and editing data is supported.
Further, the implementation of the online template data opening function specifically includes:
selecting an online data template, inputting a network address, requesting a rear-end interface by an Axios technology, returning template data by an application component in a rear-end system after the interface is successfully responded, and assigning the template data returned by the front-end to an input label displayed by the interface by using the rear-end, wherein value is the template data, and the data template only supports copying and does not support online editing;
the modification of the template data directly corresponds to the change of the interface, uses the DOM structure change of the data-driven interface and the content thereof, and relates to the content of the left preview slide and the content of the right editing area;
wherein the data template parameter is an array comprising an indefinite number of data objects per slide, the parameters of each object comprising the following information:
index: indexing;
title: slide titles;
animation: a slide animation presentation mode;
display: whether slide content is displayed in a presentation;
page: a slide content array comprising a plurality of JSON objects comprising:
width: setting the width of the individual content in the slide content;
height: setting the height of individual content in the slide content;
text: a document of an individual content in the slide content;
image: the picture address of the independent content in the slide content supports base64 and an online picture address;
layer: the display level of the individual contents in the slide contents is set at the highest level, and the level value is set at the lowest level.
Further, the implementation of the play preview function specifically includes:
the front-end system triggers a preview page module, the level of the preview page module is highest, the preview page module is covered in the whole browser interface, and slides are directly demonstrated; simultaneously triggering a rendering data component, calculating the structure and the display content of each slide through a template data set, and displaying all slide contents of the complete display slides through a front-end system stream layout mode; the slide presentation supports full screen click event switch slides and mouse wheel event switch slides; the double-click event triggers to exit the preview slide mode and returns to the mode of editing the page;
the rendering data assembly is a set of complete DOM structure templates, independent js logic and prefabricated css files, the template data sets are circulated through the input template data sets, each piece of data is subjected to DOM recursion display, the data contents are inserted into the DOM according to the data contents, the js technology controls operation events and playing of the data contents, and the css controls the page style; the data is changed, the DOM and the content are changed, js logic and css patterns are correspondingly changed according to different logic programs of the data, and different rendering results are presented.
Further, the implementation of the "save" function specifically includes:
generating a template data file component, storing a data template file locally through a FileSaver. Js technology, selecting an editing data template in an 'open' function to copy in an editing frame, editing data, and realizing the secondary editing of a demonstration slide;
the data uploading component is used for uploading template data to a back-end system, the back-end returns an online web address after responding, and a front-end program opens a new browser window to access the address;
the component principle of generating the template data file component is as follows: assigning value to the hidden input (type= "textarea") label by the edited template data, obtaining the value of the input by using an interface of a plug-in filesaver. Js to generate Blob, and downloading the Blob to a download local folder of a user personal computer by a browser; the downloaded file is a txt file, and the content of the file can be edited and copied;
the principle of the data uploading component is as follows: encapsulating a function, transmitting variable template data, and transmitting the tidied template data to a back-end system application component through an interface by using an Axios technology; after the interface response is successful, the interface returns the web browsing address of the presentation file, and then opens the address using the window () of js, and the user will see the online presentation web page in the new window of the browser.
Further, the server includes:
the method comprises the steps of acquiring template data sent by a front end, triggering an application component, receiving front-end request parameters by the component, calling a bottom-layer back-end component according to requirements, returning data required by the front end after acquiring the bottom-layer data, and processing related logic requirements of two interfaces by the component:
the online data interface is used for accessing a template database of the corresponding address according to the address of the online web demonstration webpage of the parameter after receiving the request sent by the online data template, inquiring the data matched with the online address, and returning the corresponding template data to the front-end system;
the back-end system application component receives the template data returned by the front-end interface, transmits the template data to the template data processing component, waits for the demonstration web page address generating component to return a corresponding online web network address, and returns the template data to the front-end data uploading component as response data of the data uploading interface; the front-end data uploading component takes the demonstration webpage address, and the front-end program automatically opens the webpage address in a new window of the browser; after the demonstration web page is initialized in the browser, an address bar data index TDI is obtained as a request parameter, a request is initiated to a back-end application component, corresponding template data is obtained, and after the template data is obtained, the page is rendered into a complete demonstration page;
wherein TDI is a key for acquiring request parameters, and a key name is defined as TDI;
wherein the template data processing component: after receiving the front-end template data, three synchronous logic processes are performed: extracting picture information, storing pictures into a picture database, and acquiring the address of each picture in the picture database; after the corresponding relation between the address and the template data in the picture database is established, each picture is processed into new template data, and the new template data is stored in the template database; after the template database is successfully stored, the data index TDI is transmitted to the call demonstration webpage address generating component;
wherein, the demonstration web page address generating component: the method comprises the steps of using a data index TDI as a key for inquiring template data, splicing TDI with a known access address of a front-end demonstration webpage H5 server in an address bar mode to form a unique access address of an online demonstration webpage, responding the access address through an interface, and returning the access address to a front-end data uploading component.
Compared with the prior art, the method for realizing the webpage version demonstration slide PPT has the following beneficial effects:
the webpage version demonstration slide of the invention supports the new page and editing of general conventional demonstration slides, and simultaneously supports the modification of template text data to change the whole demonstration slide content, including changing the text, pictures, layout and the like of the demonstration slide content, so that the use efficiency is simpler and faster than that of general demonstration slide software, and the editing time is saved. The webpage version demonstration slide support single machine offline use and networking use: the single machine is used without installation, is easy to be put on hand and is convenient for bare metal use; the internet is used, data can be transmitted to a back-end system, a web browsing address of the internet can be generated, cross-end sharing is convenient, and particularly under the condition that a file is relatively large, cross-end transmission is not needed, a webpage is directly opened to display and demonstrate a slide, and the internet is more suitable for the use requirements of quick and simple demonstration in a business environment.
In addition, the webpage version demonstration slide disclosed by the invention can enrich the use resources of the conventional demonstration slide, and make up for the crowd which cannot be covered by the commercial demonstration slide.
Drawings
FIG. 1 is a flow chart of a method for implementing a web page PPT provided in one embodiment;
FIG. 2 is an illustration of a web page PPT interface provided in one embodiment;
FIG. 3 is an exemplary illustration of a mouse right click thumbnail slide provided in one embodiment;
FIG. 4 is an illustration of an edit data template provided in one embodiment;
FIG. 5 is an illustration of an online data template provided in one embodiment.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the present application will be further described in detail with reference to the accompanying drawings and examples. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the present application.
Referring to fig. 1, an embodiment of the present invention provides a method for implementing a web page version presentation slide PPT, where the web page version presentation slide PPT specifically includes:
the front-end system of the embodiment of the invention is a complete set of H5 pages in principle, and comprises css folders (all css files required by the implementation method), js folders (all js files required by the implementation method, including necessary plug-ins filesave. Js and dragula. Js), image folders (all icon files required by the implementation method), an HTML file (index. HTML entry file, which can be manually opened by a user on a personal computer device by a browser, namely an operation interface of the method, and the user prompts normal editing operation according to interface icons), and a back-end system comprises a server (for storing front-end project files and back-end project files and applications), two databases (for storing data, including a template database and a template picture database), two major components (a template data processing component and a presentation web page address generating component), and a front-end presentation web page H5 (including index. HTML entry file, css folder and js folder).
The front-end demonstration webpage H5 is a complete set of H5 files, and is placed on a server for online access; the method comprises the steps of including file index. Html, an entry for access; css folder, store index. Html and need all css files that rely on inside; js folder stores all js files on which index. Html needs to depend.
The specific functions of the webpage version demonstration slide PPT in the embodiment of the invention are as follows:
(1) Clicking "new", see fig. 2, to create a new presentation slide interface, the user can create and select a slide on the left side of the interface, and the user can edit the content on the left side of the interface; the internal structure and content of each slide on the left side can be synchronized to the structure and content edited on the right side interface, the difference is that the same DOM structure is inserted, the css3 and js technology is used for scaling down control on the style and the content, and the ratio is designed to be 1:5, so as to achieve the preview effect; a mouse left click event of the left slide preview will trigger the replacement of the right editing interface to make the right structure and content consistent with the selected left slide structure and content.
Moreover, each slide on the left side supports a mouse right click event to generate an edit box, and the edit box is provided with new, hidden, copy and delete function buttons, see fig. 3; the button function description content in the edit box is: newly created is that a slide is added to the left side, namely a new slide structure is inserted into the DOM, the right editing interface structure is restored to a default editing interface, the editing page display structure and the preview slide structure are synchronous, a piece of default data is newly added in the template data set, hidden is that a hidden icon appears on the left preview slide, the slide is not displayed when the slide is played, namely a display numerical value in corresponding data of the slide in the template data set is true, duplicate is that the DOM structure and the content of the duplicated slide are reinserted in the left slide, the right editing interface synchronizes the structure content of the left thumbnail slide, single piece of data is duplicated in the data template set, index data is changed according to the set arrangement index, the index is deleted, meanwhile, the structure and the content of the preview slide are removed, namely the piece of data is deleted in the template data set, and the index of the whole data set is orderly changed.
Wherein, each preview slide on the right side supports drag movement to adjust the sequence of the preview slides, which is realized by plug-in dragula. Js, and in the template data set, the index in the template data set is adjusted according to the drag sequence of the preview slides; the right editing interface uses input label technology to edit content, and supports text or picture editing; the text storage format is String, the String is stored in a data template parameter text, the picture is converted into a base64 format by using a front-end canvas technology, and the String is stored in a data template parameter image.
The implementation principle of the dragula. Js is to click a monitor mouse mouseown event of a slide DOM node, and clone a current node; and then monitoring a mousemove event, modifying the cloned node coordinates to realize the effect that the node follows a mouse, monitoring the mousemove event, judging whether the mousemove event is in a right slide area, putting down the cloned node in the right slide area, deleting the original node, and deleting the cloned node in the right slide area without changing the original node.
(2) Clicking on "open", see fig. 4 and 5,1, copying file content generated during saving, inputting data template data generated during saving, and supporting editing data; 2. an online data template can be selected, after a network address is input, the network address is used as a request parameter, a rear end interface is requested through an Axios technology, after the interface response is successful, an application component in a rear end server returns template data, a front end uses the template data returned by the rear end to assign to an input (text field text) label displayed on the interface, a value is the template data, and the data template only supports copying and does not support online editing; the modification of the template data directly corresponds to the change of the interface, uses the DOM structure change of the data-driven interface and the content thereof, and relates to the content of the left preview slide and the content of the right editing area; the data template parameters illustrate that the data template parameters are an array (slide set) containing an indefinite number of data objects (individual slides) for each slide, the parameters for each object containing the following information:
index: indexing;
title, slide title;
animation, a slide animation display mode;
display, namely, whether slide contents are displayed in a demonstration or not;
a slide content array (set) containing a plurality of objects composed of the following data;
width setting of individual content in slide content;
height, the height setting of the individual content in the slide content;
text, namely a document of independent content in slide contents;
image, namely, the picture address of the independent content in the slide content, supporting base64 and an online picture address;
layer, the display layer of the individual content in the slide content, the layer value is the largest, the layer value is the uppermost layer, the smallest, and the layer value is the bottommost layer.
The Axios is a promise-based network request library, acts on the node. Js and the browser, can run in the browser and the node. Js, and provides an easily extensible interface. At the server it uses the native node. Jshttp module, while at the client (browser) it uses XMLHttpRequest.
(3) Clicking a 'play preview', wherein a front-end program triggers a preview page module, the highest level of the preview page module is covered in the whole browser interface to directly demonstrate slides, and simultaneously triggers a rendering data component, the component calculates the structure and the display content of each slide through a template data set, and displays all slide contents of the complete demonstration slides in a streaming layout mode; the slide presentation supports full screen click event switch slides and mouse wheel event switch slides; the mouse double click event triggers exiting the preview slide mode and returning to the edit page mode.
"render data component": the assembly is a complete DOM structure, independent js logic, a prefabricated css file, a template data set is circulated through the template data set, each piece of data is subjected to DOM recursion display, the data content is inserted into the DOM according to the content of the data, the js technology controls the operation event and playing of the data, and the css controls the page style; the data is changed, the DOM and the content are changed, js logic and css patterns make corresponding changes according to the data.
(4) Clicking the 'save' will trigger the save module, which includes the module for generating template data file and the data uploading module; generating a template data file component, storing a data template file (txt format) locally by a FileSaver.js technology, wherein the file is small and convenient to store, a user can directly copy the content of the file, select an editing data template in an opening function to copy in an editing frame, edit data, and realize secondary editing of a demonstration slide; and the template data is uploaded to a back-end server through the data uploading component, after the back-end responds, an online web address is returned, a new browser window is opened by the front-end program, and the address is accessed, namely the online version of the demonstration webpage is displayed, so that the user can share the online version with other users.
"generate template data file component": the component principle is that the edited template data is assigned with value through the label of hidden input (type= "textarea"), then the value of input is obtained through the interface of plug-in filesaver. Js to generate Blob, and the Blob is downloaded to the download local folder of the user personal computer through a browser; the downloaded file is a txt file, the content of which is editable and replicable.
"data upload component": the component principle is that a function is packaged, variable template data is transmitted, the tidied template data is transmitted to an application component of a back-end server through an interface by using an Axios technology; after the interface response is successful, the interface returns the web browsing address of the presentation file, and then opens the address using the window () of js, and the user will see the online presentation web page in the new window of the browser.
The FileSaver. Js described above is a open source download file plug-in implementation of saveAs () of HTML5 that supports most mainstream browsers.
In addition, the functions of the back-end server in the embodiment of the invention are as follows:
the method comprises the steps of acquiring template data sent by a front end, triggering an application component, abutting a front-end related component by the component, receiving front-end request parameters, calling a bottom-layer rear-end component according to requirements, acquiring bottom-layer data, and returning data required by the front end, wherein the component mainly processes related logic requirements of two interfaces: 1. the online data interface is used for accessing a template database of a corresponding address according to the address of the online web demonstration webpage of the parameter after receiving the request sent by the online data template, inquiring data matched with the online address, and returning the corresponding template data to the front end; 2. the back-end application component receives the template data returned by the front-end interface, transmits the template data to the template data picture address processing component, waits for the corresponding online web network address returned by the demonstration web address generating component as response data of the data uploading interface and returns the response data to the front-end data uploading component; the front-end data uploading component takes the demonstration webpage address, and the front-end program is automatically opened in a new window of the browser; after the demonstration web page is initialized in the browser, the address bar data index TDI is obtained as a request parameter, a request is initiated to a back-end application component, corresponding template data is obtained, and after the template data is obtained, the web page is rendered into a complete demonstration page.
"template data processing component": after receiving the front-end template data, three synchronous logic processes are performed: (1) extracting picture information, storing pictures into a picture database, simultaneously obtaining the address of each picture in the picture database, (2) processing each picture after establishing a corresponding relation between the address of each picture in the picture database and template data into new template data, and storing the new template data into the template database; (3) after successful logging into the template database, the "presentation web address generation component" is invoked to import the data index TDI (defined TDI is an abbreviation of Templatedata index in this method, used as a key to query the template database for the corresponding template data).
"demonstration web page address generating component": using the data index TDI as a key to query template data, passing the known "front-end presentation web page H5" server access address through the address bar "? The TDI is spliced in the form of ' to form a unique access address of the online demonstration webpage, and the access address is responded through an interface and returned to the front-end ' data uploading component '.
"demonstration webpage": the method comprises the steps that a TDI value on an address bar is acquired in a loading event of a demonstration webpage opened in a browser, a request is initiated to an application component as a request parameter, after a request response, the application component calls a demonstration webpage address generating component, logic of the demonstration webpage address generating component requests a template database according to TDI to obtain corresponding template data, and then the application component is called and returned to the demonstration webpage.
"front-end presentation web page H5": is a complete set of H5 pages comprising: index, html entry file, css folder, inside put page needed css file, js folder, inside put page needed js file; after the entry index file is opened in the browser, js function is called, and the tasks of requesting interface, rendering and the like are completed.
The above examples merely represent a few embodiments of the present application, which are described in more detail and are not to be construed as limiting the scope of the invention. It will be apparent to those skilled in the art that various modifications and improvements can be made without departing from the spirit of the invention, which is within the scope of the invention.
Claims (10)
1. The method for realizing the webpage version demonstration slide PPT is characterized by comprising the following steps of:
building a front-end system and a back-end system; the front-end system includes: h5 page; the backend system includes: the system comprises a server, a template database, a template picture database, a template data processing component and a demonstration webpage address generating component;
based on the front-end system and the back-end system, constructing a webpage version demonstration slide; the webpage version demonstration slide comprises a primary new function, an opening function, a play preview function and a save function;
wherein:
the primary "new" function includes: a basic editing function and a template editing function; the realization of the template editing function comprises the following steps: editing the demonstration slides in the template database by adopting the implementation principle of dragula. Js and js program operation based on DOM structure;
the "open" function includes: an offline template data opening function and an online template data opening function; the implementation of the online template data opening function comprises the following steps: the method comprises the steps that a network address input mode is used as a parameter for requesting an interface of a back-end system, an Axios technology is adopted for requesting template data from the back-end system, and the template data is displayed on the interface of a front-end system;
the implementation of the play preview function includes: displaying all slide contents of the complete demonstration slide on a browser interface in a front-end system stream layout mode;
the implementation of the "save" function includes: and storing the data template file locally by adopting a FileSaver.js technology, and sending template data to a back-end system, wherein the back-end system returns an online web address.
2. The method for implementing the web page version presentation slide PPT according to claim 1, wherein the H5 page comprises:
css folder, realize the webpage version demonstrates all css files that slide PPT needed;
js folder, which is used for realizing all js files required by the webpage version of the demonstration slide PPT, wherein the js files comprise plug-in filesaver. Js and dragula. Js;
an image folder for realizing all icon files required by the webpage version of the presentation slide PPT;
and the HTML file is an index HTML entry file, the file is manually opened by a user on the personal computer equipment by using a browser, and the HTML file is an operation interface, and the user prompts normal editing operation according to the interface icon.
3. The method for implementing the web page version presentation slide PPT according to claim 1, wherein the implementing of the basic editing function comprises:
newly creating a new demonstration slide interface, creating and selecting a slide on the left side of the interface, and editing contents on the right side of the interface; synchronizing the internal structure and content of each slide on the right side to a left side preview interface, wherein the difference is that the same DOM structure is inserted, the left side preview image is only previewed and can not be edited, the structure graphic change edited by the right side editing interface is synchronized to the right side preview interface, and the style and the content are subjected to scaling control by css3 and js technology, so that the ratio is designed to be 1:5; and (3) clicking an event by using a left button of a mouse on the left slide preview image to trigger the replacement of the right editing interface so that the right structure and the content are consistent with those of the selected left slide structure and the content.
4. A method for implementing a web page version presentation slide PPT as claimed in claim 3, wherein said template editing function is implemented by:
each slide on the left side supports a mouse right click event to generate an edit box, and two levels of function buttons of new creation, hiding, copying and deleting are arranged in the edit box;
the second level is newly built, namely a slide is added to the left side, namely a new slide structure is inserted into the DOM, the right editing interface structure is restored to be a default editing interface, the editing page display structure and the preview slide structure are synchronous, and a default piece of data is newly added in the template data set;
the 'hiding' is that a hidden icon appears on the left preview slide, and the slide is not displayed when the slide is played, namely the display numerical value in the slide corresponding data in the template data set is true;
the 'copying' is to reinsert DOM structure and content of the copied slide in the left slide, the right editing interface synchronizes the structure content of the left thumbnail slide, copies single data in the data template set for insertion, and index data changes according to the set arrangement index;
"delete" is to remove the preview slide while removing its DOM structure and content, i.e., delete the piece of data in the template data set, with its entire data set index changing in order;
wherein, each preview slide on the right side supports drag movement to adjust the sequence of the preview slides, which is realized by plug-in dragula. Js, and in the template data set, the index in the template data set is adjusted according to the drag sequence of the preview slides; the right editing interface uses input label technology to edit content, and supports text or picture editing; the text storage format is String, the String is stored in a data template parameter text, the picture is converted into a base64 format by using a front-end canvas technology, and the String is stored in a data template parameter image.
5. The method for implementing the web page version presentation slide PPT according to claim 4, wherein the implementation principle of the plug-in dragula. Js comprises:
clicking a monitoring mouse event of a slide DOM node of the current node, and cloning the current node;
monitoring a mousemove event, modifying the cloned node coordinates of the mousemove event, realizing the effect that the node follows a mouse, monitoring the mousemove event, judging whether the mousemove event is in a right slide area, putting down the cloned node in the right slide area, deleting the original node, deleting the cloned node in the right slide area, and keeping the original node unchanged.
6. The method for implementing the PPT of the web page version presentation slide as claimed in claim 1, wherein the implementation of the offline template data opening function comprises the following steps:
template data in the file is generated during copying and storing, the template data is input, and editing data is supported.
7. The method for implementing the web page version presentation slide PPT according to claim 1, wherein the implementation of the online template data opening function specifically comprises:
selecting an online data template, inputting a network address, requesting a rear-end interface by an Axios technology, returning template data by an application component in a rear-end system after the interface is successfully responded, and assigning the template data returned by the front-end to an input label displayed by the interface by using the rear-end, wherein value is the template data, and the data template only supports copying and does not support online editing;
the modification of the template data directly corresponds to the change of the interface, uses the DOM structure change of the data-driven interface and the content thereof, and relates to the content of the left preview slide and the content of the right editing area;
wherein the data template parameter is an array comprising an indefinite number of data objects per slide, the parameters of each object comprising the following information:
index: indexing;
title: slide titles;
animation: a slide animation presentation mode;
display: whether slide content is displayed in a presentation;
page: a slide content array comprising a plurality of JSON objects comprising:
width: setting the width of the individual content in the slide content;
height: setting the height of individual content in the slide content;
text: a document of an individual content in the slide content;
image: the picture address of the independent content in the slide content supports base64 and an online picture address;
layer: the display level of the individual contents in the slide contents is set at the highest level, and the level value is set at the lowest level.
8. The method for implementing the web page version presentation slide PPT according to claim 1, wherein the implementing of the play preview function specifically includes:
the front-end system triggers a preview page module, the level of the preview page module is highest, the preview page module is covered in the whole browser interface, and slides are directly demonstrated; simultaneously triggering a rendering data component, calculating the structure and the display content of each slide through a template data set, and displaying all slide contents of the complete display slides through a front-end system stream layout mode; the slide presentation supports full screen click event switch slides and mouse wheel event switch slides; the double-click event triggers to exit the preview slide mode and returns to the mode of editing the page;
the rendering data assembly is a set of complete DOM structure templates, independent js logic and prefabricated css files, the template data sets are circulated through the input template data sets, each piece of data is subjected to DOM recursion display, the data contents are inserted into the DOM according to the data contents, the js technology controls operation events and playing of the data contents, and the css controls the page style; the data is changed, the DOM and the content are changed, js logic and css patterns are correspondingly changed according to different logic programs of the data, and different rendering results are presented.
9. The method for implementing the web page version presentation slide PPT according to claim 1, wherein the implementation of the "save" function specifically includes:
generating a template data file component, storing a data template file locally through a FileSaver. Js technology, selecting an editing data template in an 'open' function to copy in an editing frame, editing data, and realizing the secondary editing of a demonstration slide;
the data uploading component is used for uploading template data to a back-end system, the back-end returns an online web address after responding, and a front-end program opens a new browser window to access the address;
the component principle of generating the template data file component is as follows: assigning value to the hidden input (type= "textarea") label by the edited template data, obtaining the value of the input by using an interface of a plug-in filesaver. Js to generate Blob, and downloading the Blob to a download local folder of a user personal computer by a browser; the downloaded file is a txt file, and the content of the file can be edited and copied;
the principle of the data uploading component is as follows: encapsulating a function, transmitting variable template data, and transmitting the tidied template data to a back-end system application component through an interface by using an Axios technology; after the interface response is successful, the interface returns the web browsing address of the presentation file, and then opens the address using the window () of js, and the user will see the online presentation web page in the new window of the browser.
10. The method for implementing the web page version presentation slide PPT according to claim 1, wherein said server comprises:
the method comprises the steps of acquiring template data sent by a front end, triggering an application component, receiving front-end request parameters by the component, calling a bottom-layer back-end component according to requirements, returning data required by the front end after acquiring the bottom-layer data, and processing related logic requirements of two interfaces by the component:
the online data interface is used for accessing a template database of the corresponding address according to the address of the online web demonstration webpage of the parameter after receiving the request sent by the online data template, inquiring the data matched with the online address, and returning the corresponding template data to the front-end system;
the back-end system application component receives the template data returned by the front-end interface, transmits the template data to the template data processing component, waits for the demonstration web page address generating component to return a corresponding online web network address, and returns the template data to the front-end data uploading component as response data of the data uploading interface; the front-end data uploading component takes the demonstration webpage address, and the front-end program automatically opens the webpage address in a new window of the browser; after the demonstration web page is initialized in the browser, an address bar data index TDI is obtained as a request parameter, a request is initiated to a back-end application component, corresponding template data is obtained, and after the template data is obtained, the page is rendered into a complete demonstration page;
wherein the template data processing component: after receiving the front-end template data, three synchronous logic processes are performed: extracting picture information, storing pictures into a picture database, and acquiring the address of each picture in the picture database; after the corresponding relation between the address and the template data in the picture database is established, each picture is processed into new template data, and the new template data is stored in the template database; after the template database is successfully stored, the data index TDI is transmitted to the call demonstration webpage address generating component;
wherein TDI is a key for acquiring request parameters, and a key name is defined as TDI;
wherein, the demonstration web page address generating component: the method comprises the steps of using a data index TDI as a key for inquiring template data, splicing TDI with a known access address of a front-end demonstration webpage H5 server in an address bar mode to form a unique access address of an online demonstration webpage, responding the access address through an interface, and returning the access address to a front-end data uploading component.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310042699.7A CN116226418A (en) | 2023-01-28 | 2023-01-28 | Realization method of webpage version demonstration slide PPT |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310042699.7A CN116226418A (en) | 2023-01-28 | 2023-01-28 | Realization method of webpage version demonstration slide PPT |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116226418A true CN116226418A (en) | 2023-06-06 |
Family
ID=86588514
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310042699.7A Pending CN116226418A (en) | 2023-01-28 | 2023-01-28 | Realization method of webpage version demonstration slide PPT |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116226418A (en) |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20020194216A1 (en) * | 1998-07-29 | 2002-12-19 | Fujitsu Limited | Slide show system and method using a browser |
| CN101299250A (en) * | 2007-04-30 | 2008-11-05 | 深圳华飚科技有限公司 | On-line cooperating lantern slide manufacturing service system |
| US20110138014A1 (en) * | 2009-12-07 | 2011-06-09 | International Business Machines Corporation | Automated web conference presentation quality improvement |
| US20120221449A1 (en) * | 2010-09-01 | 2012-08-30 | Kief Christopher | System and method for presentation creation |
| US20170090734A1 (en) * | 2014-05-14 | 2017-03-30 | Pagecloud Inc. | Methods and systems for web content generation |
| CN110175321A (en) * | 2019-05-21 | 2019-08-27 | 江苏锐天信息科技有限公司 | A kind of PPT based on browser kernel edits and demonstrates plug-in system |
| KR20190115229A (en) * | 2018-04-02 | 2019-10-11 | 주식회사 한글과컴퓨터 | Web-based presentation editing apparatus for quick loading of presentation documents through browser and operating method thereof |
| CN113934955A (en) * | 2021-10-25 | 2022-01-14 | 稿定（厦门）科技有限公司 | Method for generating display PPT file by browser, browser and storage medium |
-
2023
- 2023-01-28 CN CN202310042699.7A patent/CN116226418A/en active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20020194216A1 (en) * | 1998-07-29 | 2002-12-19 | Fujitsu Limited | Slide show system and method using a browser |
| CN101299250A (en) * | 2007-04-30 | 2008-11-05 | 深圳华飚科技有限公司 | On-line cooperating lantern slide manufacturing service system |
| US20110138014A1 (en) * | 2009-12-07 | 2011-06-09 | International Business Machines Corporation | Automated web conference presentation quality improvement |
| US20120221449A1 (en) * | 2010-09-01 | 2012-08-30 | Kief Christopher | System and method for presentation creation |
| US20170090734A1 (en) * | 2014-05-14 | 2017-03-30 | Pagecloud Inc. | Methods and systems for web content generation |
| KR20190115229A (en) * | 2018-04-02 | 2019-10-11 | 주식회사 한글과컴퓨터 | Web-based presentation editing apparatus for quick loading of presentation documents through browser and operating method thereof |
| CN110175321A (en) * | 2019-05-21 | 2019-08-27 | 江苏锐天信息科技有限公司 | A kind of PPT based on browser kernel edits and demonstrates plug-in system |
| CN113934955A (en) * | 2021-10-25 | 2022-01-14 | 稿定（厦门）科技有限公司 | Method for generating display PPT file by browser, browser and storage medium |
Non-Patent Citations (1)
| Title |
|---|
| 欧阳BOY_PETTER: "Online-Powerpoint", pages 1 - 31, Retrieved from the Internet <URL:https://gitee.com/petterObam/Online-Powerpoint/tree/master> * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| TWI808393B (en) | Page processing method, device, apparatus and storage medium | |
| US7181468B2 (en) | Content management for rich media publishing system | |
| AU2016276284B2 (en) | System and method for the generation of an adaptive user interface in a website building system | |
| US9037974B2 (en) | Creating and editing dynamic graphics via a web interface | |
| US6990498B2 (en) | Dynamic graphical index of website content | |
| US20030236836A1 (en) | System and method for the design and sharing of rich media productions via a computer network | |
| US20220414326A1 (en) | Document applet generation | |
| US7890877B2 (en) | Systems and methods for improved portal development | |
| US20070162845A1 (en) | User interface for webpage creation/editing | |
| US11630909B2 (en) | Managing content item collections | |
| US11599584B2 (en) | Method and system for processing information in social network system | |
| US20030034991A1 (en) | Method of constructing a composite image | |
| US7814411B2 (en) | Method and apparatus for adapting external controls to a portal design | |
| US11593549B2 (en) | Managing content item collections | |
| JP4094777B2 (en) | Image communication system | |
| JP2001084212A (en) | Method for preparing homepage | |
| CN111061532B (en) | Wallpaper display method and terminal equipment | |
| JP2006127531A (en) | Method for acquiring information on network at high speed, and its system | |
| CN116226418A (en) | Realization method of webpage version demonstration slide PPT | |
| US20050039122A1 (en) | Methodology and system for rendering dynamic images | |
| KR100375506B1 (en) | A hypertext markup language (html) writing system and a html writing method using a low capacity on-line method | |
| CN114895901A (en) | Page processing method and device, storage medium and electronic equipment | |
| KR20130001087A (en) | Powerpoint file generated using the network, and merged into one file multiple powerpoint files |
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 |