Method and system for rendering and editing online received and transmitted texts by using Vue.extension, and medium
By converting the sending and receiving word document into a data table format and rendering it using Vue.extend on the front end, the problem of poor editing experience and misoperation during online sending and receiving document signing and approval is solved, and the WYSIWYG editing experience and fixed-point editing functions are realized.
Patent Information
- Application Number
- CN202411414146.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-10-11
- Publication Date
- 2025-02-28
AI Technical Summary
The prior art is difficult to realize the editing experience of what you see during online sending, receiving, signing and approving documents, and it is easy to cause misoperation.
By converting the sent and receive word document to be edited into a predefined data table format, and inserting a streaming placeholder where you need to enter, using Vue.extend to render on the front end, replacing the streaming placeholder as a text input box, realizing fixed-point editing.
It realizes direct operation on the sending and receiving page, adjusting the input effect in real time, and what you see is what you get, avoiding misoperation, simplifying the development process, and shortening the development cycle.
Smart Images
Figure CN119538875A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of document signing and approval, and in particular to a method, system and medium for realizing online rendering and editing of received and sent documents by using Vue.extend. Background Art
[0002] With the increasing popularity of smart cities, the sending and receiving of documents between government departments has also moved from offline paper document approval and approval to online. Therefore, the signing and approval of documents in the office automation (OA) management system on the web page has been born. However, how to make the online signing and approval of documents practical and convenient, and how to comply with the format and other issues need to be solved.
[0003] Many OA systems now use code or draggable input boxes to design low-code forms. Different documents need to be filled in with different contents, so it is necessary to repeat the form design at the code level, which takes a long development cycle. In addition, when rendering the filled data and the pre-transmitted documents in Word, it is common to use vue-docx-viewer or Mammoth.js to achieve the rendering and display of the documents.
[0004] If vue-docx-viewer is used for rendering, a separate text input box is required for input. Users cannot sign directly on the rendered page. Instead, they need to edit in the additional text box before rendering to obtain the synthesized signed file. This is not intuitive and cannot achieve WYSIWYG. Users must fill in the form to see the final effect, which is not practical.
[0005] If you use tools such as Mammoth.js for rendering, the word will be completely rendered and can be completely modified. However, since we only want to input specific places, using such tools can easily lead to accidental deletion of tables and styles, or accidentally modifying other people's input opinions, making it impossible to achieve fixed-point editing. Summary of the invention
[0006] The technical problem to be solved by the present invention is to provide a method, system and medium for realizing online rendering and editing of sent and received documents using Vue.extend, so as to realize positioning of the editing box according to the process in the flow of sent and received documents, prevent misoperation, and realize direct operation on the sent and received document page, adjust the input effect in real time, and achieve what you see is what you get.
[0007] In a first aspect, the present invention provides a method for implementing online text rendering and editing using Vue.extend, comprising the following steps:
[0008] Step S1, converting the word document of the sent and received documents to be configured into a predefined data table format and storing it in a database;
[0009] Step S2, obtain the word document of the sent and received documents to be configured from the database, insert the predefined flow placeholders where input is required, mark the position ID to be edited and the corresponding process key in the flow placeholder, and upload the marked word document to the server;
[0010] Step S3, parse the annotated word document into an HTML file and transmit it to the front end;
[0011] Step S4, after the HTML file is received by the front end, it is rendered through vue.extend, the flow placeholder is found through special symbols, the flow placeholder mark corresponding to the current process is replaced with a text input box, and the remaining data is rendered as text;
[0012] Step S5: The user fills in the specific content corresponding to the current process in the text input box, submits it after completion, saves the specific content filled in by the user in the database, and updates the data table corresponding to the word document.
[0013] Furthermore, the position id to be edited corresponds to the field name in the document data table, and the corresponding process key corresponds to the ID in the process engine in the OA system.
[0014] Furthermore, the step S1 is specifically as follows: using the COM interface of Microsoft Office or a third-party library (such as Apache POI, Aspose.Words, etc.) to convert the Word document (.doc or .docx) into a plain text format, creating a new data table in the database, and storing the data of the Word document according to predefined fields, wherein the fields are configured according to the pre-collected sent and received documents of each department.
[0015] Furthermore, the step S4 is specifically as follows: after the current end receives the html file, the html file is placed in vue.extend to create an independent component, the style is replaced with the inline style through replace, the flow placeholder is found according to the special symbol, and the flow placeholder tag corresponding to the current process is matched in combination with the process engine, and the flow placeholder tag corresponding to the current process is replaced with a text input box, and the text is rendered in the remaining positions at the same time, so as to obtain a partially editable sending and receiving document page under the current process and display it to the user.
[0016] In a second aspect, the present invention provides a system for implementing online text rendering and editing using Vue.extend, the system comprising:
[0017] The document conversion module is used to convert the word document of the sent and received documents to be configured into a predefined data table format and store it in the database;
[0018] The marking module is used to obtain the word document of the sent and received documents to be configured from the database, insert predefined flow placeholders where input is required, mark the position ID to be edited and the corresponding process key in the flow placeholder, and upload the marked word document to the server;
[0019] The file parsing module is used to parse the annotated word document into an HTML file and pass it to the front end;
[0020] The rendering module is used to render the HTML file received by the current end through vue.extend, find the flow placeholder through special symbols, replace the flow placeholder mark corresponding to the current process with a text input box, and render the remaining data as text;
[0021] The editing module is used for the user to fill in the specific content corresponding to the current process in the text input box, submit it after completion, save the specific content filled in by the user in the database, and update the data table corresponding to the word document.
[0022] Furthermore, the position id to be edited corresponds to the field name in the document data table, and the corresponding process key corresponds to the ID in the process engine in the OA system.
[0023] Furthermore, the document conversion module specifically uses the COM interface of Microsoft Office or a third-party library (such as Apache POI, Aspose.Words, etc.) to convert the Word document (.doc or .docx) into a plain text format, creates a new data table in the database, and stores the data of the Word document according to predefined fields, and the fields are configured according to the pre-collected sent and received documents of each department.
[0024] Furthermore, the rendering module is specifically as follows: after the front end receives the html file, the html file is placed into vue.extend to create an independent component, the style is replaced with the inline style through replace, the flow placeholder is found according to the special symbol, and the flow placeholder tag corresponding to the current process is matched in combination with the process engine, and the flow placeholder tag corresponding to the current process is replaced with a text input box, and text is rendered in the remaining positions at the same time, so as to obtain a partially editable sending and receiving document page under the current process and display it to the user.
[0025] In a third aspect, the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method described in the first aspect.
[0026] The advantages of the present invention are:
[0027] 1. The entire configuration process is realized by directly annotating on the word document. There is no need to create different form inputs for each different sent and received document. You only need to configure it once when importing the template document. The configuration process is simple and fast. There is no need to repeat code design for different files, which greatly shortens the development cycle.
[0028] 2. Only the input places related to the current process are opened, and the text style and other places will not be edited by mistake, which effectively prevents style changes and reduces erroneous operations;
[0029] 3. For the user, what you see is what you get. What he can fill in is what he needs to fill in, and he can fill it directly in the corresponding position. It can be adjusted and viewed in real time, which is intuitive and convenient. BRIEF DESCRIPTION OF THE DRAWINGS
[0030] The present invention will be further described below in conjunction with embodiments with reference to the accompanying drawings.
[0031] Figure 1 The present invention is a flowchart of a method for implementing online text rendering and editing using Vue.extend in a first embodiment of the present invention.
[0032] Figure 2 It is a schematic diagram of the editing and rendering process of the present invention.
[0033] Figure 3 It is a schematic diagram of the annotation process interface in a specific embodiment of the present invention.
[0034] Figure 4 This is a user flow interface effect diagram in a specific embodiment of the present invention.
[0035] Figure 5 This is a system block diagram of using Vue.extend to implement online text sending and receiving rendering and editing in Embodiment 2 of the present invention.
[0036] Figure 6 Schematic diagram of the structure of the medium in the fourth embodiment of the present invention. DETAILED DESCRIPTION
[0037] The embodiments of the present application provide a method, system and medium for online rendering and editing of sent and received documents using Vue.extend, so as to solve the problem of WYSIWYG and misoperation in the existing sending and receiving process, and can present a more intuitive display effect, improve the efficiency of automated office and enhance the user experience.
[0038] The technical solution in the embodiment of the present application has the following general idea: the present invention collects the sent and received documents of each department in advance, and pre-configures the corresponding fields in the sent and received documents, and uses the method of direct annotation on Word to realize the configuration of the text box to be edited in the sent and received documents. After the configuration is completed, it is parsed into an HTML file, and the HTML string transmitted from the server is rendered into a Vue component through Vue.extend and directly displayed on the web page. Vue.extend is a global method provided by Vue.js, which is used to create a constructor of a Vue component. This method can receive an object containing component options as a parameter, and then return a new constructor. Vue.extend can be used to easily create reusable components, and multiple instances can be created through the constructor. When using Vue.extend to create a component, you can define the behavior and style of the component by setting options such as data, methods, and computed, just like writing an ordinary Vue component. We can use html as the web page style for rendering and editing. We can use Vue.extend to render text for content that does not need to be edited in the current process. At the same time, we can convert the content that needs to be edited in the current process into an input box by searching for the corresponding annotations. What is finally presented to the user is a sending and receiving document page with a text input box corresponding to the current process, which enables intuitive page operation and avoids misoperation in the sending and receiving process.
[0039] In order to make the present invention more clearly understood, a preferred embodiment is now described in detail with reference to the accompanying drawings.
[0040] Embodiment 1
[0041] This embodiment provides a method for using Vue.extend to implement online text rendering and editing. Figure 1 and Figure 2 As shown, the method comprises the following steps:
[0042] Step S1, converting the word document of the sent and received documents to be configured into a predefined data table format and storing it in a database;
[0043] Step S2, obtain the word document of the sent and received documents to be configured from the database, insert the predefined flow placeholders where input is required, mark the position ID to be edited and the corresponding process key in the flow placeholder, and upload the marked word document to the server;
[0044] Step S3, parse the annotated word document into an HTML file and transmit it to the front end;
[0045] Step S4, after the HTML file is received by the front end, it is rendered through vue.extend, the flow placeholder is found through special symbols, the flow placeholder mark corresponding to the current process is replaced with a text input box, and the remaining data is rendered as text;
[0046] Step S5, the user fills in the specific content corresponding to the current process in the text input box, submits it after completion, saves the specific content filled in by the user in the database, and updates the data table corresponding to the word document. After we submit through the submit button, the data will be transmitted to the backend according to the specific corresponding value filled in by our id and stored in the database. If it is not the key of this process, if there is corresponding data, it will be rendered directly.
[0047] Preferably, the position id to be edited corresponds to the field name in the document data table, and the corresponding process key corresponds to the ID in the process engine in the OA system. For example, we can use the "{{}}" symbol to define the flow placeholder, which can be implemented according to pre-customization to ensure that it is not defined repeatedly with other symbols. If the attribute or field name of the title of the sent or received document stored in the database is title, then fill in the mark "{{title&key}}" in the title input place of the word. Since the sent or received document is circulated according to the process, the place where each person needs to enter is different. In order to prevent the mistaken filling of other people's data, by adding the key, that is, the key of the corresponding process to operate the input box, only the input box of the corresponding process can be entered. After the word is edited, it is transferred to the file server. The back end parses our word into HTML through poi technology and passes it to the front end.
[0048] Preferably, step S1 is specifically as follows: using the COM interface of Microsoft Office or a third-party library (such as Apache POI, Aspose.Words, etc.) to convert the Word document (.doc or .docx) into a plain text format, creating a new data table in the database, and storing the data of the Word document in accordance with predefined fields, wherein the fields are configured according to the pre-collected sent and received documents of each department. The field setting may be all the fields that may be involved in the collected multiple sent and received documents, and the required fields are selected according to the current sent and received documents to complete the field configuration of the current table. If there is no appropriate field name to correspond, a field name similar to it may be selected as a substitute.
[0049] Preferably, step S4 is specifically as follows: after the HTML file is received by the front end, the HTML file is placed in vue.extend to create an independent component, the style is replaced with the inline style through replace to prevent style pollution, the flow placeholder (such as {{}}) is found according to the special symbol, and the flow placeholder mark corresponding to the current process is matched in combination with the process engine, and the flow placeholder mark usage method corresponding to the current process is replaced with a text input box, and the remaining positions are rendered with text to obtain a partially editable sending and receiving document page under the current process to display to the user. In this way, we can directly display the content of the word on the page, and what you see is what you get, which can be edited directly in the corresponding grid, and can only be entered in the place we specify, which will not affect the places that do not need to be modified. There is no need to fill in the form, just enter in the corresponding grid as we do in word.
[0050] like Figure 3 As shown in the figure, when the corresponding flow placeholder {{sign&signProcess}} is inserted in the word document configuration, the flow placeholder is used to identify the user whose process key is signProcess and the text input box is displayed in the field named sign for the user to perform editing operations. When the flow is transferred to the current user, the page received and opened by the user is a sending and receiving document itself, such as Figure 4 As shown, on the sending and receiving document page, there is a text input box that needs to be processed in the current process for the user to directly edit. The user can perform visual editing on the file page to achieve what you see is what you get, and other locations cannot be edited, thereby avoiding misoperation.
[0051] Based on the same inventive concept, the present application also provides a system corresponding to the method in Example 1, see Example 2 for details.
[0052] Embodiment 2
[0053] In this embodiment, a system for implementing online text rendering and editing using Vue.extend is provided, the system comprising:
[0054] The document conversion module is used to convert the word document of the sent and received documents to be configured into a predefined data table format and store it in the database;
[0055] The marking module is used to obtain the word document of the sent and received documents to be configured from the database, insert predefined flow placeholders where input is required, mark the position ID to be edited and the corresponding process key in the flow placeholder, and upload the marked word document to the server;
[0056] The file parsing module is used to parse the annotated word document into an HTML file and pass it to the front end;
[0057] The rendering module is used to render the HTML file received by the current end through vue.extend, find the flow placeholder through special symbols, replace the flow placeholder mark corresponding to the current process with a text input box, and render the remaining data as text;
[0058] The editing module is used for users to fill in the specific content corresponding to the current process in the text input box, submit it after completion, save the specific content filled in by the user in the database, and update the data table corresponding to the word document. After we submit through the submit button, the data will be transmitted to the backend according to the specific corresponding value filled in by our id and stored in the database. If it is not the key of this process, if there is corresponding data, it will be rendered directly.
[0059] Preferably, the position id to be edited corresponds to the field name in the document data table, and the corresponding process key corresponds to the ID in the process engine in the OA system. For example, we can use the "{{}}" symbol to define the flow placeholder, which can be implemented according to pre-customization to ensure that it is not defined repeatedly with other symbols. If the attribute or field name of the title of the sent or received document stored in the database is title, then fill in the mark "{{title&key}}" in the title input place of the word. Since the sent or received document is circulated according to the process, the place where each person needs to enter is different. In order to prevent the mistaken filling of other people's data, by adding the key, that is, the key of the corresponding process to operate the input box, only the input box of the corresponding process can be entered. After the word is edited, it is transferred to the file server. The back end parses our word into HTML through poi technology and passes it to the front end.
[0060] Preferably, the document conversion module specifically includes: using the COM interface of Microsoft Office or a third-party library (such as Apache POI, Aspose.Words, etc.) to convert the Word document (.doc or .docx) into a plain text format, creating a new data table in the database, storing the data of the Word document according to predefined fields, and configuring the fields according to the pre-collected sent and received documents of each department. The field setting can be all the fields that may be involved in the collected multiple sent and received documents, and the required fields are selected according to the current sent and received documents to complete the field configuration of the current table. If there is no suitable field name to correspond, a field name similar to it can be selected as a substitute.
[0061] Preferably, the rendering module is specifically as follows: after the HTML file is received by the front end, the HTML file is placed into vue.extend to create an independent component, the style is replaced with the inline style through replace to prevent style pollution, the flow placeholder (such as {{}}) is found according to the special symbol, and the flow placeholder tag corresponding to the current process is matched in combination with the process engine, and the flow placeholder tag usage method corresponding to the current process is replaced with a text input box, and the remaining positions are rendered with text to obtain a partially editable sending and receiving document page under the current process to display to the user. In this way, we can display the content of the word directly on the page, and what you see is what you get. You can directly edit it in the corresponding grid, and you can only enter it in the place we specify, which will not affect the places that do not need to be modified. There is no need to fill in the form, just enter it in the corresponding grid as we do in Word.
[0062] like Figure 3 As shown in the figure, when the corresponding flow placeholder {{sign&signProcess}} is inserted in the word document configuration, the flow placeholder is used to identify the user whose process key is signProcess and the text input box is displayed in the field named sign for the user to perform editing operations. When the flow is transferred to the current user, the page received and opened by the user is a sending and receiving document itself, such as Figure 4 As shown, on the sending and receiving document page, there is a text input box that needs to be processed in the current process for the user to directly edit. The user can perform visual editing on the file page to achieve what you see is what you get, and other locations cannot be edited, thereby avoiding misoperation.
[0063] Based on the same inventive concept, the present application provides a storage medium corresponding to Example 1, see Example 3 for details.
[0064] Embodiment 3
[0065] This embodiment provides a computer-readable storage medium, such as Figure 3 As shown, a computer program is stored thereon, and when the computer program is executed by a processor, any implementation method in Example 1 can be implemented.
[0066] In summary, the advantages of the present invention are as follows:
[0067] The present invention collects the internal fields of the sent and received documents in advance, directly fills in the annotations on the word document, fills in the corresponding edited fields and the corresponding processes in the annotations, generates the corresponding HTML file through background analysis and transmits it to the front end, uses vue.extend for rendering on the front end, replaces the annotations of the corresponding processes with input boxes for rendering, and directly renders the texts for the others, thereby realizing rapid configuration of the sent and received documents, and satisfying the user's intuitive operation on the original page, so that what you see is what you get, so as to facilitate real-time adjustment and avoid misoperation.
[0068] Although the specific implementation modes of the present invention are described above, those skilled in the art should understand that the specific implementation modes described are only illustrative and are not intended to limit the scope of the present invention. Equivalent modifications and changes made by those skilled in the art in accordance with the spirit of the present invention should be included in the scope of protection of the claims of the present invention.
Claims
1. A method for using Vue.extend to implement online text rendering and editing, characterized in that: The steps include: Step S1, converting the word document of the sent and received documents to be configured into a predefined data table format and storing it in a database; Step S2, obtain the word document of the sent and received documents to be configured from the database, insert the predefined flow placeholders where input is required, mark the position ID to be edited and the corresponding process key in the flow placeholder, and upload the marked word document to the server; Step S3, parse the annotated word document into an HTML file and transmit it to the front end; Step S4, after the HTML file is received by the front end, it is rendered through vue.extend, the flow placeholder is found through special symbols, the flow placeholder mark corresponding to the current process is replaced with a text input box, and the remaining data is rendered as text; Step S5: The user fills in the specific content corresponding to the current process in the text input box, submits it after completion, saves the specific content filled in by the user in the database, and updates the data table corresponding to the word document.
2. A method for implementing online text rendering and editing using Vue.extend as claimed in claim 1, characterized in that: The position id to be edited corresponds to the field name in the document data table, and the corresponding process key corresponds to the ID in the process engine in the OA system.
3. A method for implementing online text sending and receiving rendering and editing using Vue.extend as claimed in claim 1, characterized in that: The step S1 is specifically as follows: using the COM interface of Microsoft Office or a third-party library to convert the Word document into a plain text format, creating a new data table in the database, storing the data of the Word document according to predefined fields, and configuring the fields according to the pre-collected sent and received documents of each department.
4. A method for implementing online text rendering and editing using Vue.extend as claimed in claim 1, characterized in that: The step S4 is specifically as follows: after the front end receives the html file, the html file is placed into vue.extend to create an independent component, the style is replaced with the inline style through replace, the flow placeholder is found according to the special symbol, and the flow placeholder tag corresponding to the current process is matched in combination with the process engine, and the flow placeholder tag corresponding to the current process is replaced with a text input box, and text is rendered in the remaining positions to obtain a partially editable sending and receiving document page under the current process and display it to the user.
5. A system for online text rendering and editing using Vue.extend, characterized in that: The system comprises: The document conversion module is used to convert the word document of the sent and received documents to be configured into a predefined data table format and store it in the database; The marking module is used to obtain the word document of the sent and received documents to be configured from the database, insert predefined flow placeholders where input is required, mark the position ID to be edited and the corresponding process key in the flow placeholder, and upload the marked word document to the server; The file parsing module is used to parse the annotated word document into an HTML file and pass it to the front end; The rendering module is used to render the HTML file received by the current end through vue.extend, find the flow placeholder through special symbols, replace the flow placeholder mark corresponding to the current process with a text input box, and render the remaining data as text; The editing module is used for the user to fill in the specific content corresponding to the current process in the text input box, submit it after completion, save the specific content filled in by the user in the database, and update the data table corresponding to the word document.
6. A system for implementing online text sending and receiving rendering and editing using Vue.extend as claimed in claim 5, characterized in that: The position id to be edited corresponds to the field name in the document data table, and the corresponding process key corresponds to the ID in the process engine in the OA system.
7. A system for implementing online text sending and receiving rendering and editing using Vue.extend as claimed in claim 5, characterized in that: The document conversion module specifically converts the Word document into plain text format using the COM interface of Microsoft Office or a third-party library, creates a new data table in the database, stores the data of the Word document according to predefined fields, and configures the fields according to the pre-collected sent and received documents of each department.
8. A system for implementing online text sending and receiving rendering and editing using Vue.extend as claimed in claim 5, characterized in that: The rendering module is specifically as follows: after the front end receives the HTML file, the HTML file is placed into vue.extend to create an independent component, the style is replaced with the inline style through replace, the flow placeholder is found according to the special symbol, and the flow placeholder tag corresponding to the current process is matched in combination with the process engine, and the flow placeholder tag corresponding to the current process is replaced with a text input box, and text is rendered in the remaining positions at the same time, so as to obtain a partially editable sending and receiving document page under the current process and display it to the user.
9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 4 is implemented.