Online document production method and system based on web pages

Abstract

The present invention relates to the field of big data technology, and provides a method for making online documents based on web pages, including: building an online document editing web page through a Vue framework; configuring a component loading method of the online document editing web page; obtaining user operation information on the online document editing web page, and obtaining a corresponding target component according to the operation information; performing corresponding operations according to the target component to make online documents. In addition, the present invention also relates to blockchain technology, and the operation information can be stored in a blockchain node. The embodiment of the present invention uses an online document editing web page built with a Vue framework to make online documents, so that users do not need to download documents from the cloud or upload locally edited documents to the cloud, and can also edit documents, which greatly improves user experience and work efficiency.

Description

Technical Field

[0001] The embodiments of the present invention relate to the field of big data technology, and in particular to a web-based online document production method and system. Background Art

[0002] With the rapid development of the Internet, the "cloud concept" has gradually entered our lives. For example, mobile hard disks and USB flash drives have been gradually replaced by cloud drives. Because cloud drives are safer and more convenient, office work has also moved to the cloud, and even a series of office processes can be completed in the cloud. As long as the user has a cloud account and password, he can access the cloud from anywhere and anyone's computer / mobile terminal to obtain his own data.

[0003] The existing method of accessing data through a cloud disk is: when a user needs to obtain data from other device terminals, he needs to download the data from the cloud disk, and then use locally installed third-party office tools (such as WPS, PowerPoint, etc.) to view, edit or share the data; when the user needs to synchronize the data to other device terminals, he needs to upload the data to the cloud disk. However, if the user does not have a third-party office tool installed, the data cannot be viewed or edited, and the user often encounters problems with software installation and updating during use. At the same time, the method of uploading and downloading data makes the data production and presentation process cumbersome, the user experience is low, and the user's work efficiency is reduced.

[0004] Therefore, the present invention aims to solve the problem of how to realize online document creation and presentation under the condition that a third-party office tool is not installed locally. Summary of the invention

[0005] In view of this, it is necessary to provide a web-based online document production method, system, computer device and readable storage medium, which can solve the problem of realizing online document production and presentation without installing third-party office tools locally.

[0006] To achieve the above object, an embodiment of the present invention provides a method for creating an online document based on a web page, the method comprising:

[0007] Build an online document editing webpage through the Vue framework;

[0008] Configuring a component loading mode of the online document editing webpage, wherein the component loading mode includes an on-demand loading mode;

[0009] Acquiring operation information of the user on the online document editing webpage, the operation information including audio editing information, video editing information, online recording information, screen recording information, countdown setting information, 3D demonstration special effect setting information, watermark setting information, material import and export information and / or playback time setting information;

[0010] Acquire the corresponding target component according to the operation information;

[0011] Corresponding operations are performed according to the target component to produce an online document.

[0012] Optionally, the making of the online document according to the operation information, and the performing of the corresponding operation according to the target component to make the online document include:

[0013] When the operation information is the 3D demonstration special effect setting information, the operation object corresponding to the operation information is 3D rendered according to the installed 3D model component to achieve the production of the online document 3D special effect.

[0014] Optionally, performing corresponding operations according to the target component to produce an online document includes:

[0015] When the operation information is screen recording information, obtaining a video stream of the online document editing webpage through a video stream obtaining component;

[0016] The video stream is stored by a video stream storage component to achieve screen recording of the online document editing web page.

[0017] Optionally, performing corresponding operations according to the target component to produce an online document includes:

[0018] According to the target component, querying the real DOM node of the operation object corresponding to the operation information from each DOM node of the online document, and compiling the real DOM into a virtual DOM;

[0019] Acquire a first virtual DOM before the operation information and a second virtual DOM after the operation information;

[0020] Compare the first virtual DOM and the second virtual DOM to obtain a difference between the first virtual DOM and the second virtual DOM;

[0021] The difference is applied to the real DOM to update the online document, thereby realizing the production of the online document.

[0022] Optionally, after performing corresponding operations according to the target component to produce an online document, the method further includes:

[0023] When a save operation of the user on the online document is detected, a plurality of parameters of each page in the online document are obtained, each parameter including a data name and a data type;

[0024] The multiple parameters of each page are placed into a preset array set to obtain a target array set, and the target array set is stored in a preset database, and the target array set is uploaded to the blockchain.

[0025] Optionally, after performing corresponding operations according to the target component to produce an online document, the method further comprises:

[0026] When a demonstration operation of the user on the online document is detected, generating a link corresponding to the online document;

[0027] According to the link, jump to the demonstration page of the online document to realize the demonstration and playback of the online document.

[0028] Optionally, the method further comprises:

[0029] When the online document is in editing state, the saveFrom() method is triggered and the watch listening time of the Vue is calculated;

[0030] When the watch monitoring of the Vue reaches the preset time, it triggers saving of the online document.

[0031] To achieve the above purpose, an embodiment of the present invention further provides an online document production system based on a web page, comprising:

[0032] Building a module for building online document editing web pages using the Vue framework;

[0033] A configuration module, used to configure a component loading mode of the online document editing webpage, wherein the component loading mode includes an on-demand loading mode;

[0034] an acquisition module, used to acquire operation information of the user on the online document editing webpage, and acquire the corresponding target component according to the operation information, wherein the operation information includes audio editing information, video editing information, online recording information, screen recording information, countdown setting information, 3D demonstration special effect setting information, watermark setting information, material import and export information and / or playback time setting information;

[0035] The production module is used to perform corresponding operations according to the target component to produce an online document.

[0036] To achieve the above objectives, an embodiment of the present invention further provides a computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program, when executed by the processor, implements the steps of the web-based online document creation method as described above.

[0037] To achieve the above objectives, an embodiment of the present invention further provides a computer-readable storage medium, in which a computer program is stored. The computer program can be executed by at least one processor to enable the at least one processor to perform the steps of the web-based online document creation method as described above.

[0038] The web-based online document production method, system, computer device and readable storage medium provided by the embodiment of the present invention build an online document editing webpage through the Vue framework, then configure the component loading mode of the online document editing webpage, and finally obtain the user's operation information on the online document editing webpage, and obtain the corresponding target component according to the operation information, and perform the corresponding operation according to the target component to produce the online document. The embodiment of the present invention can produce the online document according to the user's operation on the online document editing webpage, so that the user can edit and view the document at any time through different terminals without installing third-party office tools, and the document will not be lost even if the user terminal is accidentally stolen or lost. At the same time, the embodiment of the present invention uses the online document editing webpage built by the Vue framework to produce online documents, so that the user does not need to download the document from the cloud or upload the locally edited document to the cloud, and can also realize the editing of the document, which greatly improves the user experience and work efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] Figure 1 This is an application environment diagram of the web-based online document production method according to an embodiment of the present invention;

[0040] Figure 2 A flowchart of the steps of a web-based online document creation method according to an embodiment of the present invention;

[0041] Figure 3 for Figure 2 Another exemplary step flow chart of step S108;

[0042] Figure 4 Another exemplary step flow chart of the method for creating online documents based on a web page according to an embodiment of the present invention;

[0043] Figure 5 Another exemplary step flow chart of the method for creating an online document based on a web page according to an embodiment of the present invention;

[0044] Figure 6 A schematic diagram of program modules of a web-based online document creation system according to an embodiment of the present invention;

[0045] Figure 7 Schematic diagram of the hardware architecture of a computer device according to an embodiment of the present invention.

[0046] The realization of the purpose, functional features and advantages of the present invention will be further explained in conjunction with embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0047] In order to make the purpose, technical scheme and advantages of the present invention more clearly understood, the present invention is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0048] It should be noted that the descriptions of "first", "second", etc. in the present invention are only used for descriptive purposes and cannot be understood as indicating or implying their relative importance or implicitly indicating the number of the indicated technical features. Therefore, the features defined as "first" and "second" may explicitly or implicitly include at least one of the features. In addition, the technical solutions between the various embodiments can be combined with each other, but they must be based on the ability of ordinary technicians in the field to implement them. When the combination of technical solutions is contradictory or cannot be implemented, it should be deemed that such a combination of technical solutions does not exist and is not within the scope of protection required by the present invention.

[0049] See also Figure 1 , showing an application environment diagram of the web-based online document production method according to an embodiment of the present invention. Figure 1 The example includes a server and clients 1 to n, which can also be a server cluster and clients 1 to n. In the embodiment of the present invention, only one server is shown, and one server is used as an example for explanation. After a user edits and saves an online document on any one of the clients 1 to n, if the user uses any other client, he can continue to edit or view the online document online based on the online document. The following is an example of a user creating an online document on one of the clients.

[0050] Embodiment 1

[0051] See also Figure 2, showing a flow chart of the steps of the web-based online document production method of an embodiment of the present invention. It can be understood that the flow chart in the embodiment of the method is not used to limit the order of executing the steps. It should be noted that this embodiment is described exemplarily with a computer device as the execution subject. The computer device may include mobile terminals such as mobile phones, tablet computers, laptops, PDAs, portable media players (PMPs), navigation devices, wearable devices, smart bracelets, pedometers, etc., as well as fixed terminals such as digital TVs and desktop computers. Specifically, the following steps are included:

[0052] Step S100: Building an online document editing webpage through the Vue framework.

[0053] Vue is a progressive framework for building user interfaces, which has the advantages of being lightweight, simple application programming interface (API), complete documentation, simple and powerful. The online document editing webpage built by using the Vue framework has the advantages of being lightweight, not dependent on third-party software, no need to download and install, and supporting online production, playback and storage. In an embodiment of the present invention, the online document can be a slideshow (PowerPoint, PPT).

[0054] It should be noted that after the online document editing webpage is built, users can apply for registration. Each user can create multiple online documents. As long as they are in the network scenario, they can log in anytime and anywhere to edit, create or demonstrate online documents, whether on a computer or a mobile phone, without worrying about "losing the file" or "forgetting to bring it". When the online document is in the editing state, by triggering the saveFrom() method, and in the watch monitoring of Vue, when the preset time is reached, the online document is automatically triggered to save, ensuring the timely storage of the document.

[0055] Step S102: configuring a component loading mode of the online document editing webpage, wherein the component loading mode includes an on-demand loading mode.

[0056] It should be noted that the on-demand loading method is to load the corresponding component only when the route is accessed, that is, the packaged js file, and to achieve on-demand loading of components by using require.ensure() to load the component. The existing practices include non-on-demand loading methods, specifically packaging the entire route into a js file, and loading the component by loading this js file. The more components there are, the larger the js file will be, and the slower the loading will be.

[0057] In this embodiment, a method of loading components on demand is adopted. By configuring the loading mode as the on-demand loading mode, the network request pressure of the client is greatly reduced, thereby improving the loading efficiency of the components.

[0058] In an exemplary embodiment, multiple Vue components are also obtained, such as: Element-ui component, swiper component, Vuedraggable-resizable draggable and scalable component and animate animation effect component, etc. By introducing the components, the properties, methods and events of the components can be obtained, which greatly speeds up the development efficiency of the online editing web page.

[0059] Step S104: Acquire the user's operation information on the online document editing webpage.

[0060] Specifically, the user's operation information on the slide may be creating a new slide, editing the background color, editing the background image, editing text, editing an image, editing audio and video, etc. According to the user's operation information, the corresponding information is uploaded / displayed at the corresponding position of the online document. Exemplarily, when the user's audio editing operation information is received, the corresponding audio is uploaded to the online document according to the audio editing operation information.

[0061] Step S106: Acquire the corresponding target component according to the operation information.

[0062] Step S108: Execute corresponding operations according to the target component to create the online document.

[0063] Specifically, when the user needs to adjust the edited content, it can be achieved by calling the corresponding component. For example, when it is detected that the user adjusts the size of the image, the image is scaled by calling the corresponding Vuedraggable-resizable draggable component. In an exemplary embodiment, the method also uploads the operation information to the blockchain to ensure its security, fairness and transparency.

[0064] Exemplarily, the production of the online document may include the following aspects: New slide editing: The initial slide is a blank page. You can click the page button on the left, where the page button includes: background color, background image, text, image, audio, video, etc. Background color editing: Click the background color button to select the background color of the current page. Background image editing: Click the background image button to upload an image. This image will fill the entire blank canvas and cover the background color. Uploading again will also cover the previous background image. Text editing: Click the text button, and a text box will appear on the blank page on the right. You can set animation for the text box or delete the text box. This text box can be enlarged or reduced in size, and can also be dragged. You can set multiple text boxes on the current page. Image editing: Click the image button, and a pop-up window for uploading images will pop up. After the upload is successful, the image will be displayed on the blank canvas. This image can also be dragged in size and position, and can also be deleted. You can upload and display multiple images on the current page. Audio editing: Click the audio button to upload audio, and then when you enter the current page, this audio will automatically play once. Video editing: Click the audio button to upload the video, adjust the size and position of the video display, and then click to play when entering the current page.

[0065] In an exemplary embodiment, the operation information may also include online recording, screen recording, countdown setting, 3D demonstration special effect setting, watermark setting, material import and export, and playback time setting.

[0066] Exemplarily, online recording is achieved by installing the component npm i js-audio-recorder and introducing the import Recorder from'js-audio-recorder' component where recording is required according to user needs.

[0067] Exemplarily, by using a video stream acquisition component and a video stream storage component, for example, a getDisplayMedia component + a MediaRecorder component, to acquire a video stream and store the video stream, a screen recording function is implemented. The getDisplayMedia component allows the user's display or a portion thereof to be acquired in the form of a video stream, and relies on this method to return a promise object, and the successfully returned stream is called, and this stream is assigned to the video element to realize the video stream while recording. During the screen recording process, the video stream acquired by the getDisplayMedia is stored through the MediaRecorder component, and the video stream can be saved as a corresponding video file. When the recorded screen needs to be played, the video file can be directly played to realize the playback of the screen recording.

[0068] In actual operation, users can record screen videos by clicking the screen recording button. Through the video recording of the whole process of "voice + slideshow", all your operation processes can be demonstrated with vivid and intuitive videos, which is suitable for various scenarios such as course explanation and operation demonstration. Finally, the video recording is completed, and a url link for sharing the slideshow video will be generated, that is, the online video address.

[0069] In an exemplary embodiment, by installing a 3D model component, the operation object corresponding to the operation information is rendered in 3D to achieve the production of the online document 3D special effects. The 3D model component can be an npm installvue-3d-model--save component, and import{ModelObj}from'vue-3d-model' component is introduced to achieve 3D presentation special effects. Through this method, the traditional PPT switching method is broken, the movie video transition special effects are imitated, and vivid and cool 3D lens zoom, rotation and translation special effects are added, so that the slide presentation is played like a 3D movie, and the background music is added to bring a shocking visual and auditory impact to the audience.

[0070] In an exemplary embodiment, by using corresponding instructions in app.vue, corresponding watermarks can be added to each page. For example, setting a corporate logo and watermark in a slide is conducive to highlighting the corporate brand effect and protecting the results of personal intellectual labor. In the corporate logo setting, the size, position and transparency of the corporate logo or watermark can be customized. The logo is in the upper left corner of the slide by default, and the watermark is tilted by default. Of course, the number of watermark rows and columns can also be customized.

[0071] In an exemplary embodiment, the web-based online document creation method further obtains pictures, videos, animations and audios uploaded by users, and saves the pictures, videos, animations and audios in corresponding material libraries. Of course, the above materials can also be deleted according to the user's deletion operation.

[0072] In an exemplary embodiment, the time for playing the slideshow of the current page is customized, for example, 5 seconds, 10 seconds, etc., or the time for playing the slideshow of the current page is set according to the time of the audio explanation of the current page. During the playback process, when the set playback time is reached, the document is automatically played through the setInterval method, and the automatic playback interval time is passed in through the parent component, making the component more flexible. inv is a props of type Number. The clearInv method is triggered when the mouse moves in, and the runInv method is triggered when the mouse moves out. By defining the method, when the goto method receives a parameter index, it can jump to the specified page number. When clicking on the previous and next pages, the two variables nextIndex and prevIndex are defined in the calculation properties to reduce the calculation complexity and improve the calculation speed.

[0073] In an exemplary embodiment, Figure 3 As shown, the step S108 may include steps S300 to S306.

[0074] Step S300: According to the target component, query the real DOM node of the operation object corresponding to the operation information from each Document Object Model (DOM) node of the online document, and compile the real DOM into a virtual DOM;

[0075] Step S302: Acquire a first virtual DOM before the operation information and a second virtual DOM after the operation information;

[0076] Step S304: Compare the first virtual DOM and the second virtual DOM to obtain a difference between the first virtual DOM and the second virtual DOM;

[0077] Step S306: applying the difference to the real DOM to update the online document and realize the production of the online document.

[0078] In this embodiment, the difference between two texts is calculated by using a diff algorithm, and only the changed parts are subjected to real DOM operations, rather than re-rendering the entire page, thereby greatly improving the performance of page rendering. The DOM is a standard API for processing HTML and XML files, providing an access model for the entire document, treating the document as a tree structure, and each node of the tree represents an HTML tag or a text item within a tag.

[0079] In an exemplary embodiment, Figure 4As shown, after the corresponding operation is performed according to the target component in step S108 to produce an online document, step S400 and step S402 may be included.

[0080] Step S400: when detecting the user's saving operation on the online document, obtaining multiple parameters of each page in the online document, each parameter at least including a data name and a data type;

[0081] Step S402: Put the multiple parameters of each page into a preset array set to obtain a target array set, store the target array set in a database, and upload the target array set to the blockchain.

[0082] Specifically, when it is detected that the user clicks the button to save the slide project A, the slide parameters of each page in the slide project A are placed in a preset array set. Then, by calling the background interface, the target array set including the slide parameters of each page is stored in the database. When the user demonstrates or edits the slide project A next time, the parameters of each page in the slide project A are obtained by calling the background interface and displayed as a slide effect.

[0083] Please refer to Table 1 below for the parameters of each page:

[0084]

[0085]

[0086] Uploading the target array set to the blockchain can ensure its security, fairness and transparency. The blockchain referred to in this example is a new application model of computer technologies such as distributed data storage, point-to-point transmission, consensus mechanism, encryption algorithm, etc. Blockchain is essentially a decentralized database, a string of data blocks generated by cryptographic methods. Each data block contains a batch of network transaction information, which is used to verify the validity of its information (anti-counterfeiting) and generate the next block. The blockchain can include the blockchain underlying platform, platform product service layer, and application service layer.

[0087] After the online document is saved, if an editing operation on the online document is detected, the identification number of the online document is obtained, and the corresponding online document information is queried according to the identification number. Then, the corresponding parameters are obtained according to the query result, and the corresponding content is rendered according to the parameters. Exemplarily, when it is detected that the user edits slide A again, the identification number of the slide is obtained, and the corresponding slide information is queried according to the identification number. Then, the corresponding parameters are obtained according to the slide information, and the corresponding slide content is rendered according to the parameters.

[0088] In an exemplary embodiment, Figure 5 As shown, after the corresponding operation is performed according to the target component in step S108 to produce an online document, step S500 and step S502 may be included.

[0089] Step S500: when a demonstration operation of the user on the online document is detected, a link corresponding to the online document is generated.

[0090] Step S502: Jump to the demonstration page of the online document according to the link to implement demonstration and playback of the online document.

[0091] Specifically, when it is detected that the user clicks the preview / demonstration button of slide project A, a link corresponding to the slide project A is generated, wherein the link includes parameters of the slide project A, and the parameters are used to determine that the slide project to be demonstrated is the slide project A. Then, according to the link, jump to the slide project A to display the slide project A. In actual applications, the link can be opened in any web page.

[0092] In an exemplary embodiment, the demonstration playback of the online document can be realized by a user's click operation, or can be realized automatically according to the set automatic playback, which is not limited in the embodiment of the present invention. According to the different display screen sizes of the online document playback terminal, for example: PC terminal, mobile phone terminal, the adaptive demonstration playback of the online document editing webpage on the corresponding playback terminal can be realized by converting px to rem.

[0093] The web-based online document production method provided by the embodiment of the present invention builds an online document editing webpage through the Vue framework, then configures the component loading mode of the online document editing webpage, and finally obtains the user's operation information on the online document editing webpage, and obtains the corresponding target component according to the operation information, and performs the corresponding operation according to the target component to produce the online document. The embodiment of the present invention builds an online document editing webpage through the Vue framework, and produces the online document according to the user's operation on the online document editing webpage, so that the user can edit and view the document at any time through different terminals without installing a third-party office tool, and the document will not be lost even if the user terminal is accidentally stolen or lost. At the same time, the embodiment of the present invention uses the online document editing webpage built by the Vue framework to produce online documents, so that the user can edit the document without downloading the document from the cloud or uploading the locally edited document to the cloud, which greatly improves the user experience and work efficiency.

[0094] Embodiment 2

[0095] Based on the web page-based online document creation method provided in the above embodiment, please refer to Figure 6 , showing a schematic diagram of program modules of an online document production system based on a web page according to an embodiment of the present invention. The online document production system 20 based on a web page can be applied to electronic devices. In this embodiment, the online document production system 20 based on a web page may include or be divided into one or more program modules, one or more program modules are stored in a storage medium, and are executed by one or more processors to complete the present invention, and can implement the above-mentioned online document production method based on a web page. The program module referred to in the embodiment of the present invention refers to a series of computer program instruction segments that can perform specific functions, and is more suitable for describing the execution process of the online document production system 20 based on a web page in a storage medium than the program itself. The following description will specifically introduce the functions of each program module of this embodiment:

[0096] The building module 201 is used to build an online document editing webpage through the Vue framework.

[0097] Vue is a progressive framework for building user interfaces, which has the advantages of being lightweight, simple in API, well-documented, simple and powerful. The online document editing webpage built by using the Vue framework has the advantages of being lightweight, not dependent on third-party software, not requiring downloading and installation, and supporting online production, playback and storage. In an embodiment of the present invention, the online document may be a slideshow (PowerPoint, PPT).

[0098] It should be noted that after the online document editing webpage is built, users can apply for registration. Each user can create multiple online documents. As long as they are in the network scenario, they can log in anytime and anywhere to edit, create or demonstrate online documents, whether on a computer or a mobile phone, without worrying about "losing the file" or "forgetting to bring it". When the online document is in the editing state, by triggering the saveFrom() method, and in the watch monitoring of Vue, when the preset time is reached, the online document is automatically triggered to save, ensuring the timely storage of the document.

[0099] The configuration module 202 is used to configure the component loading mode of the online document editing webpage, and the component loading mode includes an on-demand loading mode.

[0100] It should be noted that the on-demand loading method is to load the corresponding component only when the route is accessed, that is, the packaged js file, and to achieve on-demand loading of components by using require.ensure() to load the component. The existing practices include non-on-demand loading methods, specifically packaging the entire route into a js file, and loading the component by loading this js file. The more components there are, the larger the js file will be, and the slower the loading will be.

[0101] In this embodiment, a method of loading components on demand is adopted. By configuring the loading mode as the on-demand loading mode, the network request pressure of the client is greatly reduced, thereby improving the loading efficiency of the components.

[0102] In an exemplary embodiment, the web-based online document production system 20 also obtains multiple Vue components, such as: Element-ui component, swiper component, Vuedraggable-resizable draggable and scalable component and animate animation effect component, etc. By introducing the components, the properties, methods and events of the components can be obtained, which greatly speeds up the development efficiency of the online editing web page.

[0103] The acquisition module 203 is used to acquire the operation information of the user on the online document editing webpage, and acquire the corresponding target component according to the operation information.

[0104] Specifically, the user's operation information on the slide may be a new slide, background color editing, background image editing, text editing, image editing, audio and video editing, etc. According to the user's operation information, the corresponding information is uploaded / displayed in the corresponding position of the online document. Exemplarily, when the user's audio editing operation information is received, the corresponding audio is uploaded to the online document according to the audio editing operation information. In an exemplary embodiment, after obtaining the operation information, the acquisition module 203 also uploads the operation information to the blockchain to ensure its security, fairness and transparency.

[0105] The making module 204 is used to perform corresponding operations according to the target component to make the online document.

[0106] Specifically, when the user needs to adjust the edited content, it can be achieved by calling the corresponding component. For example, when it is detected that the user adjusts the size of the image, the image can be scaled by calling the corresponding Vuedraggable-resizable draggable and scalable component.

[0107] Exemplarily, the production of the online document may include the following aspects: New slide editing: The initial slide is a blank page. You can click the page button on the left, where the page button includes: background color, background image, text, image, audio, video, etc. Background color editing: Click the background color button to select the background color of the current page. Background image editing: Click the background image button to upload an image. This image will fill the entire blank canvas and cover the background color. Uploading again will also cover the previous background image. Text editing: Click the text button, and a text box will appear on the blank page on the right. You can set animation for the text box or delete the text box. This text box can be enlarged or reduced in size, and can also be dragged. You can set multiple text boxes on the current page. Image editing: Click the image button, and a pop-up window for uploading images will pop up. After the upload is successful, the image will be displayed on the blank canvas. This image can also be dragged in size and position, and can also be deleted. You can upload and display multiple images on the current page. Audio editing: Click the audio button to upload audio, and then when you enter the current page, this audio will automatically play once. Video editing: Click the audio button to upload the video, adjust the size and position of the video display, and then click to play when entering the current page.

[0108] In an exemplary embodiment, the operation information may also include online recording, screen recording, countdown setting, 3D demonstration special effect setting, watermark setting, material import and export, and playback time setting.

[0109] Exemplarily, online recording is achieved by installing the component npm i js-audio-recorder and introducing the import Recorder from'js-audio-recorder' component where recording is required according to user needs.

[0110] Exemplarily, by using a video stream acquisition component and a video stream storage component, for example, a getDisplayMedia component + a MediaRecorder component, to acquire a video stream and store the video stream, a screen recording function is implemented. The getDisplayMedia component allows the user's display or a portion thereof to be acquired in the form of a video stream, and relies on this method to return a promise object, and the successfully returned stream is called, and this stream is assigned to the video element to realize the video stream while recording. During the screen recording process, the video stream acquired by the getDisplayMedia is stored through the MediaRecorder component, and the video stream can be saved as a corresponding video file. When the recorded screen needs to be played, the video file can be directly played to realize the playback of the screen recording.

[0111] In actual operation, the user clicks the screen recording button to record the screen video. Through the video recording of the whole process of "voice + slide" explanation, a vivid and intuitive video is used to demonstrate all your operation processes, which is suitable for various scenarios such as course explanation and operation demonstration. Finally, after the video recording is completed, the web-based online document production system will generate a url link for sharing the slide video, that is, the online video address.

[0112] In an exemplary embodiment, by installing a 3D model component, the operation object corresponding to the operation information is rendered in 3D to achieve the production of the online document 3D special effects. The 3D model component can be an npm installvue-3d-model--save component, and import{ModelObj}from'vue-3d-model' component is introduced to achieve 3D presentation special effects. Through this method, the traditional PPT switching method is broken, the movie video transition special effects are imitated, and vivid and cool 3D lens zoom, rotation and translation special effects are added, so that your slide presentation is played like a 3D movie, and the background music is added to bring a shocking visual and auditory impact to the audience.

[0113] In an exemplary embodiment, by using corresponding instructions in app.vue, corresponding watermarks can be added to each page. For example, setting a corporate logo and watermark in a slide is conducive to highlighting the corporate brand effect and protecting the results of personal intellectual labor. In the corporate logo setting, the size, position and transparency of the corporate logo or watermark can be customized. The logo is in the upper left corner of the slide by default, and the watermark is tilted by default. Of course, the number of watermark rows and columns can also be customized.

[0114] In an exemplary embodiment, the acquisition module 203 is also used to acquire pictures, videos, animations and audios uploaded by users, and save the pictures, videos, animations and audios to corresponding material libraries. Of course, the above materials can also be deleted according to the user's deletion operation.

[0115] In an exemplary embodiment, the time for playing the slideshow of the current page is customized, for example, 5 seconds, 10 seconds, etc., or the time for playing the slideshow of the current page is set according to the time of the audio explanation of the current page. During the playback process, when the set playback time is reached, the document is automatically played through the setInterval method, and the automatic playback interval time is passed in through the parent component, making the component more flexible. inv is a props of type Number. The clearInv method is triggered when the mouse moves in, and the runInv method is triggered when the mouse moves out. By defining the method, when the goto method receives a parameter index, it can jump to the specified page number. When clicking on the previous and next pages, the two variables nextIndex and prevIndex are defined in the calculation properties to reduce the calculation complexity and improve the calculation speed.

[0116] In an exemplary embodiment, the making module 204 is further configured to:

[0117] According to the target component, querying the real DOM node of the operation object corresponding to the operation information from each DOM node of the online document, and compiling the real DOM into a virtual DOM;

[0118] Acquire a first virtual DOM before the operation information and a second virtual DOM after the operation information;

[0119] Compare the first virtual DOM and the second virtual DOM to obtain a difference between the first virtual DOM and the second virtual DOM;

[0120] The difference is applied to the real DOM to update the online document, thereby realizing the production of the online document.

[0121] In this embodiment, the difference between two texts is calculated by using a diff algorithm, and only the changed parts are subjected to real DOM operations, rather than re-rendering the entire page, thereby greatly improving the performance of page rendering. The DOM is a standard API for processing HTML and XML files, providing an access model for the entire document, treating the document as a tree structure, and each node of the tree represents an HTML tag or a text item within a tag.

[0122] In an exemplary embodiment, the acquisition module 203 is further configured to acquire multiple parameters of each page in the online document when a save operation of the user on the online document is detected, where each parameter includes at least a data name and a data type.

[0123] In an exemplary embodiment, the web-based online document production system 20 also includes a storage module for placing the multiple parameters of each page into a preset array set to obtain a target array set, storing the target array set in a database, and uploading the target array set to a blockchain.

[0124] Specifically, when it is detected that the user clicks the button to save the slide project A, the slide parameters of each page in the slide project A are placed in a preset array set. Then, by calling the background interface, the target array set including the slide parameters of each page is stored in the database. When the user demonstrates or edits the slide project A next time, the parameters of each page in the slide project A are obtained by calling the background interface and displayed as a slide effect.

[0125] Uploading the target array set to the blockchain can ensure its security, fairness and transparency. The blockchain referred to in this example is a new application model of computer technologies such as distributed data storage, point-to-point transmission, consensus mechanism, encryption algorithm, etc. Blockchain is essentially a decentralized database, a string of data blocks generated by cryptographic methods. Each data block contains a batch of network transaction information, which is used to verify the validity of its information (anti-counterfeiting) and generate the next block. The blockchain can include the blockchain underlying platform, platform product service layer, and application service layer.

[0126] After the online document is saved, if an editing operation on the online document is detected, the identification number of the online document is obtained, and the corresponding online document information is queried according to the identification number. Then, the corresponding parameters are obtained according to the query result, and the corresponding content is rendered according to the parameters. Exemplarily, when it is detected that the user edits slide A again, the identification number of the slide is obtained, and the corresponding slide information is queried according to the identification number. Then, the corresponding parameters are obtained according to the slide information, and the corresponding slide content is rendered according to the parameters.

[0127] In an exemplary embodiment, the web-based online document production system 20 further includes a generation module and a jump module:

[0128] The generating module is used to generate a link corresponding to the online document when detecting the user's demonstration operation on the online document.

[0129] The jump module is used to jump to the demonstration page of the online document according to the link to realize the demonstration and playback of the online document.

[0130] Specifically, when it is detected that the user clicks the preview / demonstration button of slide project A, a link corresponding to the slide project A is generated, wherein the link includes parameters of the slide project A, and the parameters are used to determine that the slide project to be demonstrated is the slide project A. Then, according to the link, jump to the slide project A to display the slide project A. In actual applications, the link can be opened in any web page.

[0131] In an exemplary embodiment, the demonstration playback of the online document can be realized by a user's click operation, or can be realized automatically according to the set automatic playback, which is not limited in the embodiment of the present invention. According to the different display screen sizes of the online document playback terminal, for example: PC terminal, mobile phone terminal, the adaptive demonstration playback of the online document editing webpage on the corresponding playback terminal can be realized by converting px to rem.

[0132] The web-based online document production system provided by the embodiment of the present invention builds an online document editing webpage through the Vue framework, then configures the component loading mode of the online document editing webpage, and finally obtains the user's operation information on the online document editing webpage, and obtains the corresponding target component according to the operation information, and performs the corresponding operation according to the target component to produce the online document. The embodiment of the present invention builds an online document editing webpage through the Vue framework, and produces the online document according to the user's operation on the online document editing webpage, so that the user can edit and view the document at any time through different terminals without installing a third-party office tool, and the document will not be lost even if the user terminal is accidentally stolen or lost. At the same time, the embodiment of the present invention uses the online document editing webpage built by the Vue framework to produce online documents, so that the user can edit the document without downloading the document from the cloud or uploading the locally edited document to the cloud, which greatly improves the user experience and work efficiency.

[0133] Embodiment 3

[0134] Based on the web page-based online document creation method provided in the above embodiment, a computer device is provided in this embodiment. Figure 7 , showing a schematic diagram of the hardware architecture of a computer device according to an embodiment of the present invention. The computer device 2 includes, but is not limited to, a memory 21, a processor 22, and a network interface 23 that can communicate with each other via a system bus. Figure 7 Only a computer device 2 having components 21 - 23 is shown, but it should be understood that implementation of all of the components shown is not a requirement, and more or fewer components may alternatively be implemented.

[0135] The memory 21 includes at least one type of readable storage medium, and the readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, disk, optical disk, etc. In some embodiments, the memory 21 can be an internal storage unit of the computer device 2, such as a hard disk or memory of the computer device 2. In other embodiments, the memory can also be an external storage device of the computer device 2, such as a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (FlashCard), etc. equipped on the computer device 2. Of course, the memory 21 can also include both the internal storage unit of the computer device 2 and its external storage device. In this embodiment, the memory 21 is generally used to store the operating system and various application software installed on the computer device 2, such as the program code of the online document production system 20 based on the web page. In addition, the memory 21 can also be used to temporarily store various types of data that have been output or are to be output.

[0136] The processor 22 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chips in some embodiments. The processor 22 is generally used to control the overall operation of the computer device 2. In this embodiment, the processor 22 is used to run the program code stored in the memory 21 or process data, such as running the web-based online document production system 20 to implement the web-based online document production method of the above embodiment.

[0137] The network interface 23 may include a wireless network interface or a wired network interface, and the network interface 23 is generally used to establish a communication connection between the computer device 2 and other electronic devices. For example, the network interface 23 is used to connect the computer device 2 to an external terminal through a network, and to establish a data transmission channel and a communication connection between the computer device 2 and the external terminal. The network may be a wireless or wired network such as an Intranet, the Internet, the Global System of Mobile communication (GSM), Wideband Code Division Multiple Access (WCDMA), a 4G network, a 5G network, Bluetooth, or Wi-Fi.

[0138] Embodiment 4

[0139] The present invention also provides a computer device, such as a smart phone, tablet computer, laptop computer, desktop computer, rack server, blade server, tower server or cabinet server (including an independent server or a server cluster composed of multiple servers) that can execute programs. The computer device of this embodiment includes at least but is not limited to: a memory and a processor that can communicate with each other through a system bus.

[0140] This embodiment also provides a computer-readable storage medium, such as a flash memory, a hard disk, a multimedia card, a card-type memory (for example, an SD or DX memory, etc.), a random access memory (RAM), a static random access memory (SRAM), a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), a programmable read-only memory (PROM), a magnetic memory, a disk, an optical disk, a server, an App application store, etc., on which a computer program is stored, and the program implements corresponding functions when executed by a processor. The computer-readable storage medium of this embodiment is used to store the web-based online document production system 20, and when executed by the processor, implements the embodiment of the above-mentioned web-based online document production method.

[0141] The serial numbers of the above embodiments of the present invention are only for description and do not represent the advantages or disadvantages of the embodiments.

[0142] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method.

[0143] The above are only preferred embodiments of the present invention, and are not intended to limit the patent scope of the present invention. Any equivalent structure or equivalent process transformation made using the contents of the present invention specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present invention.

Claims

1. A web-based online document production method, characterized in that: The method comprises: Build an online document editing webpage through the Vue framework; Configuring a component loading mode of the online document editing webpage, wherein the component loading mode includes an on-demand loading mode; Acquiring operation information of the user on the online document editing webpage, the operation information including audio editing information, video editing information, online recording information, screen recording information, countdown setting information, 3D demonstration special effect setting information, watermark setting information, material import and export information and / or playback time setting information; Acquire the corresponding target component according to the operation information; Executing corresponding operations according to the target component to produce an online document; The performing of corresponding operations according to the target component to produce an online document includes: When the operation information is the 3D demonstration special effect setting information, 3D rendering is performed on the operation object corresponding to the operation information according to the installed 3D model component, so as to realize the production of the online document 3D special effect; The performing of corresponding operations according to the target component to produce an online document includes: When the operation information is screen recording information, obtaining a video stream of the online document editing webpage through a video stream obtaining component; The video stream is stored by a video stream storage component to achieve screen recording of the online document editing webpage; The performing of corresponding operations according to the target component to produce an online document includes: According to the target component, querying the real DOM node of the operation object corresponding to the operation information from each document object model DOM node of the online document, and compiling the real DOM into a virtual DOM; Acquire a first virtual DOM before the operation information and a second virtual DOM after the operation information; Compare the first virtual DOM and the second virtual DOM to obtain a difference between the first virtual DOM and the second virtual DOM; The difference is applied to the real DOM to update the online document, thereby realizing the production of the online document.

2. The web-based online document creation method according to claim 1, characterized in that: After executing corresponding operations according to the target component to produce an online document, the method further includes: When a save operation of the user on the online document is detected, a plurality of parameters of each page in the online document are obtained, each parameter including a data name and a data type; The multiple parameters of each page are placed into a preset array set to obtain a target array set, and the target array set is stored in a preset database, and the target array set is uploaded to the blockchain.

3. The web-based online document creation method according to claim 1, characterized in that: After executing corresponding operations according to the target component to produce an online document, the method further comprises: When a demonstration operation of the user on the online document is detected, generating a link corresponding to the online document; According to the link, jump to the demonstration page of the online document to realize the demonstration and playback of the online document.

4. The web-based online document creation method according to claim 1, characterized in that: The method further comprises: When the online document is in editing state, the saveFrom() method is triggered and the watch listening time of the Vue is calculated; When the watch monitoring of the Vue reaches the preset time, it triggers saving of the online document.

5. An online document production system based on a web page, characterized in that: include: Building a module for building online document editing web pages using the Vue framework; A configuration module, used to configure a component loading mode of the online document editing webpage, wherein the component loading mode includes an on-demand loading mode; an acquisition module, used to acquire operation information of the user on the online document editing webpage, and acquire the corresponding target component according to the operation information, wherein the operation information includes audio editing information, video editing information, online recording information, screen recording information, countdown setting information, 3D demonstration special effect setting information, watermark setting information, material import and export information and / or playback time setting information; A production module, used to perform corresponding operations according to the target component to produce an online document; The performing of corresponding operations according to the target component to produce an online document includes: When the operation information is the 3D demonstration special effect setting information, 3D rendering is performed on the operation object corresponding to the operation information according to the installed 3D model component, so as to realize the production of the online document 3D special effect; The performing of corresponding operations according to the target component to produce an online document includes: When the operation information is screen recording information, obtaining a video stream of the online document editing webpage through a video stream obtaining component; The video stream is stored by a video stream storage component to achieve screen recording of the online document editing webpage; The performing of corresponding operations according to the target component to produce an online document includes: According to the target component, querying the real DOM node of the operation object corresponding to the operation information from each document object model DOM node of the online document, and compiling the real DOM into a virtual DOM; Acquire a first virtual DOM before the operation information and a second virtual DOM after the operation information; Compare the first virtual DOM and the second virtual DOM to obtain a difference between the first virtual DOM and the second virtual DOM; The difference is applied to the real DOM to update the online document, thereby realizing the production of the online document.

6. A computer device, characterized in that: The computer device memory, processor and a computer program stored in the memory and executable on the processor, when the computer program is executed by the processor, implement the steps of the web-based online document production method according to any one of claims 1-4.

7. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and the computer program can be executed by at least one processor to enable the at least one processor to perform the steps of the web-based online document production method according to any one of claims 1 to 4.

Images