A Web-based method and system for customizing documents

Abstract

This invention provides a web-based method and system for customizing documents in the field of document processing technology. The method includes the following steps: Step S10, defining the component name, design state, and preview state of a document component based on a document component definition interface; Step S20, customizing the document based on the document component and a rich text editor to obtain a document entry interface; Step S30, entering document data through the document entry interface; Step S40, loading the entered document entry interface to display the document. The advantages of this invention are: greatly improving the convenience and flexibility of document generation and updating.

Description

Technical Field

[0001] This invention relates to the field of document processing technology, and in particular to a web-based document customization method and system. Background Technology

[0002] With the rapid development of computer technology, more and more paper documents are being replaced by electronic documents, leading to the emergence of many systems with document entry functions. As technology and frameworks evolve, user needs also change. Some pre-defined document systems can no longer fully meet current user scenarios. When users need to add or modify document types, developers often need to write new functional code for users to choose from, increasing the cost of document development and testing, as well as communication costs between developers and users.

[0003] Therefore, how to provide a web-based method and system for customizing documents to improve the convenience and flexibility of document generation and updating has become an urgent technical problem to be solved. Summary of the Invention

[0004] The technical problem to be solved by this invention is to provide a web-based method and system for customizing documents, thereby improving the convenience and flexibility of document generation and updating.

[0005] In a first aspect, the present invention provides a web-based method for customizing documents, comprising the following steps:

[0006] Step S10: Define the component name, design state, and preview state of the document component based on the document component definition interface;

[0007] Step S20: Customize the document based on the document component and rich text editor to obtain the document filling interface;

[0008] Step S30: Fill in the document data through the document filling interface;

[0009] Step S40: Load the completed document entry interface to display the document.

[0010] Further, in step S10, the document component definition interface includes a control list on the left, an attribute configuration area on the right, and a design area in the middle; the control list contains several predefined document components; the attribute configuration area is used to configure the attributes of the document components; and the design area is used to design the document components.

[0011] The design state refers to the display state of the document components when designing the document entry interface; the preview state refers to the display state of the document components when filling out the document entry interface; the design state and the preview state correspond one-to-one.

[0012] Further, step S20 specifically includes:

[0013] Step S21: Obtain each document component through a rich text editor, and display each document component in the toolbar through the extended toolbar function of the rich text editor;

[0014] Step S22: Insert rows and columns using the table layout function of the rich text editor, and configure the width, height, font size, font color, and underline of the cells composed of the rows and columns.

[0015] Step S23: Insert a placeholder for the corresponding document component into the specified cell, perform optional configuration based on the design state of the document component, save the optional configuration to the corresponding placeholder, and thus obtain the document filling interface; each document filling interface corresponds to a document ID.

[0016] Further, step S30 specifically includes:

[0017] Step S31: Obtain a list of documents containing several document entry interfaces;

[0018] Step S32: Match the corresponding document filling interface from the document list by document ID, display the document filling interface through the rich text editor's echo content interface, and obtain all placeholders in the document filling interface.

[0019] Step S33: By configuring the design state stored in each placeholder, match the corresponding preview state, update the data attributes of the document component based on the preview state, set the document name, and update the corresponding placeholder based on the data attributes.

[0020] Further, step S40 specifically includes:

[0021] The document entry interface is loaded after being filled in using the document ID. The set data attributes are displayed on the document entry interface to display the document, and the document components in the document entry interface are set to read-only mode.

[0022] Secondly, the present invention provides a web-based document customization system, comprising the following modules:

[0023] The document component definition module is used to define the component name, design state, and preview state of document components based on the document component definition interface;

[0024] The document filling interface generation module is used to customize the document based on the document component and the rich text editor to obtain the document filling interface.

[0025] The document data entry module is used to enter document data through the document entry interface;

[0026] The document display module is used to load the completed document filling interface to display the document.

[0027] Furthermore, in the document component definition module, the document component definition interface includes a control list on the left, an attribute configuration area on the right, and a design area in the middle; the control list contains several predefined document components; the attribute configuration area is used to configure the attributes of the document components; and the design area is used to design the document components.

[0028] The design state refers to the display state of the document components when designing the document entry interface; the preview state refers to the display state of the document components when filling out the document entry interface; the design state and the preview state correspond one-to-one.

[0029] Furthermore, the document entry interface generation module specifically includes:

[0030] The document component loading unit is used to obtain each document component through a rich text editor and display each document component in the toolbar through the extended toolbar function of the rich text editor.

[0031] The document layout unit is used to insert rows and columns using the table layout function of the rich text editor, and to configure the width, height, font size, font color, and underline of the cells composed of the rows and columns.

[0032] The interface generation unit is used to insert a placeholder for the corresponding document component in the specified cell, perform optional configuration based on the design state of the document component, save the optional configuration to the corresponding placeholder, and thus obtain the document filling interface; each document filling interface corresponds to a document ID.

[0033] Furthermore, the document data entry module specifically includes:

[0034] The document list acquisition unit is used to acquire a document list containing several document entry interfaces;

[0035] The document entry interface display unit is used to match the corresponding document entry interface from the document list by document ID, display the document entry interface through the rich text editor's echo content interface, and obtain all placeholders in the document entry interface.

[0036] The data attribute filling unit is used to match the corresponding preview state with the configuration of the design state stored in each placeholder, update the data attributes of the document component based on the preview state, set the document name, and update the corresponding placeholder based on the data attributes.

[0037] Furthermore, the document display module is specifically used for:

[0038] The document entry interface is loaded after being filled in using the document ID. The set data attributes are displayed on the document entry interface to display the document, and the document components in the document entry interface are set to read-only mode.

[0039] The advantages of this invention are:

[0040] The document component definition interface defines the component name, design state, and preview state of the document components. Based on the document components and the rich text editor (Ueditor), the document is customized to obtain the document entry interface. The document data is then entered through the document entry interface, and the entered document entry interface is loaded to display the document. Specifically, the defined document components can be dragged and dropped from the control list (Ant-Design-Vue) of the document component definition interface to adjust the form and interaction of the document components. Based on the defined document components, the document entry interface is designed in the rich text editor for document entry and viewing, thereby achieving the user's goal of customizing document entry. When there is a new document entry requirement, the document entry interface can be updated through the rich text editor. If there is a new document component requirement, developers only need to add it online through the document component definition interface, thereby reducing the development and testing costs, as well as the communication costs between developers and users, and ultimately greatly improving the convenience and flexibility of document generation and updating. Attached Figure Description

[0041] The present invention will be further described below with reference to the accompanying drawings and embodiments.

[0042] Figure 1 This is a flowchart of a web-based document customization method according to the present invention.

[0043] Figure 2 This is a schematic diagram of the structure of a web-based document customization system according to the present invention. Detailed Implementation

[0044] The overall concept of the technical solution in this application embodiment is as follows: Defined document components are dragged and dropped from the control list (Ant-Design-Vue) of the document component definition interface to adjust their form and interaction. Based on the defined document components, a document filling interface is designed in a rich text editor (Ueditor) for document filling and viewing. When there are new document filling requirements, the document filling interface can be updated through the rich text editor. If there are new document component requirements, developers only need to configure and add them online through the document component definition interface to improve the convenience and flexibility of document generation and updating.

[0045] Please refer to Figures 1 to 2 As shown, a preferred embodiment of the web-based document customization method of the present invention includes the following steps:

[0046] Step S10: Define the component name, design state, and preview state of the document component based on the document component definition interface;

[0047] Step S20: Customize the document based on the document component and rich text editor to obtain the document filling interface; each of the generated document filling interfaces is stored in the document list, and each document filling interface is provided with a filling identifier to indicate whether the document filling interface has been filled.

[0048] Step S30: Fill in the document data through the document filling interface;

[0049] Step S40: Load the completed document entry interface to display the document.

[0050] All data from the processes of customizing, filling in, and updating the documents are stored in a pre-created database.

[0051] In step S10, the document component definition interface includes a control list on the left, an attribute configuration area on the right, and a design area in the middle. The control list contains several predefined document components. The attribute configuration area is used to configure the attributes of the document components. The design area is used to design the document components. The document components in the control list can be dragged and dropped into the design area for layout design, and the attributes of the laid-out document components can be configured through the attribute configuration area. The visual drag-and-drop method greatly improves the convenience and flexibility of document updates.

[0052] The design state refers to the display state of the document components when designing the document entry interface; the preview state refers to the display state of the document components when filling out the document entry interface; the design state and the preview state correspond one-to-one; the design state and the preview state are identical except for the script logic.

[0053] Developers define the layout of document components by dragging and dropping them from the control list to the design area. They also define attributes such as label text, default value, and multi-selectability through the attribute configuration area. This generates the basic configuration of the document component in both the design and preview states. Scripts are used to store the configuration data of the document components when the user designs the document and to generate the data attributes of the document component in the preview state when the user fills in the form.

[0054] Step S20 specifically includes:

[0055] Step S21: Obtain each document component through a rich text editor, and display each document component in the toolbar through the extended toolbar function of the rich text editor;

[0056] Step S22: Insert rows and columns using the table layout function of the rich text editor, and configure the width, height, font size, font color, and underline of the cells composed of the rows and columns.

[0057] Step S23: Insert a placeholder for the corresponding document component into the specified cell, perform optional configuration based on the design state of the document component, save the optional configuration to the corresponding placeholder, and thus obtain the document configuration of the document filling interface. The document configuration is an HTML string; each document filling interface corresponds to a document ID.

[0058] Step S30 specifically includes:

[0059] Step S31: Obtain a list of documents containing several document entry interfaces;

[0060] Step S32: Match the corresponding document filling interface from the document list by document ID, display the document filling interface through the rich text editor's echo content interface and document configuration, and obtain all placeholders in the document filling interface.

[0061] Step S33: By configuring the design state stored in each placeholder, match the corresponding preview state, update the data attributes of the document component based on the preview state, set the document name, and update the corresponding placeholder based on the data attributes.

[0062] Step S40 specifically involves:

[0063] The document entry interface is loaded after being filled in using the document ID. The set data attributes are displayed on the document entry interface to display the document. The document components in the document entry interface are set to read-only to prevent users from filling in the document twice.

[0064] A preferred embodiment of the web-based document customization system of the present invention includes the following modules:

[0065] The document component definition module is used to define the component name, design state, and preview state of document components based on the document component definition interface;

[0066] The document filling interface generation module is used to customize the document based on the document component and the rich text editor to obtain the document filling interface; each of the generated document filling interfaces is stored in the document list, and each document filling interface is provided with a filling identifier to indicate whether the document filling interface has been filled.

[0067] The document data entry module is used to enter document data through the document entry interface;

[0068] The document display module is used to load the completed document filling interface to display the document.

[0069] All data from the processes of customizing, filling in, and updating the documents are stored in a pre-created database.

[0070] In the document component definition module, the document component definition interface includes a control list on the left, an attribute configuration area on the right, and a design area in the middle; the control list contains several predefined document components; the attribute configuration area is used to configure the attributes of the document components; the design area is used to design the document components; document components from the control list can be dragged and dropped into the design area for layout design, and the attributes of the laid-out document components can be configured through the attribute configuration area. The visual drag-and-drop method greatly improves the convenience and flexibility of document updates;

[0071] The design state refers to the display state of the document components when designing the document entry interface; the preview state refers to the display state of the document components when filling out the document entry interface; the design state and the preview state correspond one-to-one; the design state and the preview state are identical except for the script logic.

[0072] Developers define the layout of document components by dragging and dropping them from the control list to the design area. They also define attributes such as label text, default value, and multi-selectability through the attribute configuration area. This generates the basic configuration of the document component in both the design and preview states. Scripts are used to store the configuration data of the document components when the user designs the document and to generate the data attributes of the document component in the preview state when the user fills in the form.

[0073] The document entry interface generation module specifically includes:

[0074] The document component loading unit is used to obtain each document component through a rich text editor and display each document component in the toolbar through the extended toolbar function of the rich text editor.

[0075] The document layout unit is used to insert rows and columns using the table layout function of the rich text editor, and to configure the width, height, font size, font color, and underline of the cells composed of the rows and columns.

[0076] The interface generation unit is used to insert a placeholder for the corresponding document component in the specified cell, perform optional configuration based on the design state of the document component, save the optional configuration to the corresponding placeholder, and thus obtain the document configuration of the document filling interface. The document configuration is an HTML string; each document filling interface corresponds to a document ID.

[0077] The document data entry module specifically includes:

[0078] The document list acquisition unit is used to acquire a document list containing several document entry interfaces;

[0079] The document entry interface display unit is used to match the corresponding document entry interface from the document list by document ID, display the document entry interface through the rich text editor's echo content interface and document configuration, and obtain all placeholders in the document entry interface.

[0080] The data attribute filling unit is used to match the corresponding preview state with the configuration of the design state stored in each placeholder, update the data attributes of the document component based on the preview state, set the document name, and update the corresponding placeholder based on the data attributes.

[0081] The document display module is specifically used for:

[0082] The document entry interface is loaded after being filled in using the document ID. The set data attributes are displayed on the document entry interface to display the document. The document components in the document entry interface are set to read-only to prevent users from filling in the document twice.

[0083] In summary, the advantages of this invention are as follows:

[0084] The document component definition interface defines the component name, design state, and preview state of the document components. Based on the document components and the rich text editor (Ueditor), the document is customized to obtain the document entry interface. The document data is then entered through the document entry interface, and the entered document entry interface is loaded to display the document. Specifically, the defined document components can be dragged and dropped from the control list (Ant-Design-Vue) of the document component definition interface to adjust the form and interaction of the document components. Based on the defined document components, the document entry interface is designed in the rich text editor for document entry and viewing, thereby achieving the user's goal of customizing document entry. When there is a new document entry requirement, the document entry interface can be updated through the rich text editor. If there is a new document component requirement, developers only need to add it online through the document component definition interface, thereby reducing the development and testing costs, as well as the communication costs between developers and users, and ultimately greatly improving the convenience and flexibility of document generation and updating.

[0085] While specific embodiments of the present invention have been described above, those skilled in the art should understand that the specific embodiments described are merely illustrative and not intended to limit the scope of the present invention. Equivalent modifications and variations made by those skilled in the art in accordance with the spirit of the present invention should be covered within the scope of protection of the claims of the present invention.

Claims

1. A WEB-based invoice customization method, characterized in that: The method comprises the following steps: Step S10, defining the component name, design state and preview state of the form component based on the form component definition interface; Step S20, customizing the form based on the form component and the rich text editor to obtain a form filling interface; Step S30, filling in the form data through the form filling interface; Step S40, loading the filled form filling interface to display the form; The step S20 specifically comprises: Step S21, obtaining each form component through the rich text editor and displaying each form component in the toolbar through the extension toolbar function of the rich text editor; Step S22, inserting rows and columns through the table layout function of the rich text editor, and configuring the width, height, font size, font color and underline of the cells composed of each row and column; Step S23, inserting the placeholder of the corresponding form component in the specified cell, configuring the optional configuration based on the design state of the form component, saving the optional configuration into the corresponding placeholder, and then obtaining the form filling interface; each form filling interface corresponds to a form id.

2. The WEB-based invoice customization method of claim 1, wherein: In the step S10, the form component definition interface comprises a control list arranged on the left side, an attribute configuration area arranged on the right side, and a design area arranged in the middle; the control list contains a plurality of defined form components; the attribute configuration area is used for configuring the attributes of the form component; and the design area is used for designing the form component. The design state is the display state of the form component when the form filling interface is designed; the preview state is the display state of the form component when the form filling interface is filled in; and the design state and the preview state correspond to each other.

3. The WEB-based invoice customization method of claim 1, wherein: The step S30 specifically comprises: Step S31, obtaining a form list containing a plurality of form filling interfaces; Step S32, matching the corresponding form filling interface from the form list through the form id, displaying the form filling interface through the echo content interface of the rich text editor, and obtaining all placeholders in the form filling interface; Step S33, matching the corresponding preview state through the configuration of the design state stored in each placeholder, updating the data attributes of the form component based on the preview state, setting the form name, and updating the corresponding placeholder based on the data attributes.

4. The WEB-based invoice customization method of claim 1, wherein: The step S40 specifically comprises: Loading the filled form filling interface through the form id, displaying the set data attributes on the form filling interface to display the form, and setting the form component in the form filling interface to a read-only state.

5. A WEB-based document customization system, characterized by: The method comprises the following modules: A form component definition module, configured to define the component name, design state and preview state of the form component based on the form component definition interface; A form filling interface generation module, configured to customize the form based on the form component and the rich text editor to obtain a form filling interface; A form data filling module, configured to fill in the form data through the form filling interface; A form display module, configured to load the filled form filling interface to display the form; The form filling interface generation module specifically comprises: The document component loading unit is configured to obtain each of the document components through the rich text editor and display each of the document components in a toolbar through an extension toolbar function of the rich text editor; The document layout unit is configured to insert rows and columns through a table layout function of the rich text editor, configure a width, a height, a font size, a font color and an underline of a cell composed of each of the rows and the columns, and insert a placeholder of a corresponding document component into a designated cell based on a design state of the document component. The interface generation unit is configured to configure a selected fill based on the design state of the document component, save the configuration of the selected fill into the corresponding placeholder, and obtain a document filing interface.

6. The WEB based invoice customization system of claim 5, wherein: The document component definition interface includes a control list arranged on the left side, an attribute configuration area arranged on the right side and a design area arranged in the middle. The design state is a display state of a document component when a document filing interface is designed.

7. The WEB based invoice customization system of claim 5, wherein: The preview state is a display state of a document component when a document filing interface is filed. The document data filing module specifically includes: A document list obtaining unit is configured to obtain a document list including a plurality of document filing interfaces. A document filing interface display unit is configured to match a corresponding document filing interface from the document list through a document id, display the document filing interface through a content echoing interface of the rich text editor, and obtain all placeholders in the document filing interface.

8. The WEB based invoice customization system of claim 5, wherein: A data attribute filing unit is configured to match a corresponding preview state through configuration of the design state stored in each of the placeholders, update data attributes of the document component based on the preview state, set a document name, and update a corresponding placeholder based on the data attributes. The document display module is specifically configured to: Load the filed document filing interface through a document id, display the set data attributes on the document filing interface, display a document, and set the document component in the document filing interface to a read-only state.

Images