Form generation method and device, electronic equipment and storage medium

Abstract

The invention provides a form generation method and device, electronic equipment and a storage medium, and relates to the technical field of Web application, the method comprises the following steps: loading a preset design component and a preset paper size, the preset paper size comprising a plurality of different international paper sizes; based on the preset paper size, according to an obtained paper determination instruction and screen resolution, determining a form display size, and displaying a form paper DOM node in the form display size, the paper determination instruction including a preset size selection instruction and a user-defined size instruction; based on the preset design component, according to an obtained component calling command, rendering the called preset design component to the form paper DOM node, generating form style data, and rendering the obtained user input data to the form paper DOM node; and rendering the form style data and the user input data to generate a target form. The flexibility can be improved, and the user requirements are met.

Description

Technical Field

[0001] The present invention relates to the field of Web application technology, and in particular to a form generation method, device, electronic device and storage medium. Background Art

[0002] With the rapid development of Internet technology, Web applications have penetrated into every corner of our lives. As an indispensable data collection tool and the main way for the system to issue credentials in Web applications, the flexibility and convenience of form printing are crucial.

[0003] In the related art, a form designer tool based on Web technology is generally used. Although it can provide convenience to a certain extent, due to the adaptation of the existing form designer tools to the user's device, the existing form designer tools can only support paper of fixed size and need to draw content in a fixed area of ​​the paper. The flexibility of form design is poor and cannot meet user needs. Summary of the invention

[0004] The problem solved by the present invention is how to improve the flexibility of form design to meet user needs.

[0005] In order to solve the above problems, the present invention provides a form generating method, device, electronic device and storage medium.

[0006] In a first aspect, the present invention provides a form generation method, comprising:

[0007] Loading a preset design component and a preset paper size, wherein the preset paper size includes a plurality of different international paper sizes;

[0008] Based on the preset paper size, according to the acquired paper determination instruction and the screen resolution, the form display size is determined, and the form paper DOM node is displayed within the form display size, wherein the paper determination instruction includes a preset size selection instruction and a custom size selection instruction;

[0009] Based on the preset design component, according to the obtained component calling command, the called preset design component is rendered to the form paper DOM node, form style data is generated, and the obtained user input data is rendered to the form paper DOM node;

[0010] The form style data and the user input data are rendered to generate a target form.

[0011] Optionally, determining the form display size based on the preset paper size and according to the acquired paper determination instruction and screen resolution includes:

[0012] Based on the preset paper size, and according to the paper determination instruction, determining the actual paper size;

[0013] Determining a screen pixel constant according to the screen resolution and a preset error parameter;

[0014] The form display size is determined according to the actual paper size and the screen pixel constant.

[0015] Optionally, the rendering the form style data and the user input data to generate a target form includes:

[0016] Generate commands based on the obtained form and call the renderer;

[0017] According to the renderer, the form style data and the user input data are rendered to generate the target form.

[0018] Optionally, the user input data includes static data and dynamic data; and rendering the acquired user input data to the form paper DOM node includes:

[0019] Rendering the acquired static data to the form paper DOM node;

[0020] Binding the dynamic data and the preset design component corresponding thereto to generate a dynamic logo;

[0021] The dynamic logo is rendered to the form paper DOM node.

[0022] Optionally, after rendering the acquired user input data to the form paper DOM node and before rendering the form style data and the user input data and generating the target form, the method further includes:

[0023] According to the obtained preview instruction, CSS technology is adopted to hide the called preset design component and display the form paper DOM node.

[0024] Optionally, after rendering the form style data and the user input data to generate a target form, the method further includes:

[0025] Generate an extensible markup language text through the target form according to the obtained form printing instruction;

[0026] Generate a portable document format export text based on the extensible markup language text.

[0027] Optionally, before loading the preset design component and the preset paper size, the method further includes:

[0028] Build a form design environment based on Web technology.

[0029] In a second aspect, the present invention provides a form generating device, comprising:

[0030] A loading module, used for loading a preset design component and a preset paper size, wherein the preset paper size includes a plurality of different international paper sizes;

[0031] A paper module, used to determine the form display size based on the preset paper size, according to the acquired paper determination instruction and the screen resolution, and display the form paper DOM node within the form display size, wherein the paper determination instruction includes a preset size selection instruction and a custom size selection instruction;

[0032] A rendering module, for rendering the called preset design component to the form paper DOM node based on the preset design component and according to the acquired component calling command, generating form style data, and rendering the acquired user input data to the form paper DOM node;

[0033] A generation module is used to render the form style data and the user input data to generate a target form.

[0034] In a third aspect, the present invention provides an electronic device, including a memory and a processor;

[0035] The memory is used to store computer programs;

[0036] The processor is used to implement the form generation method as described in the first aspect when executing the computer program.

[0037] In a fourth aspect, the present invention provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the form generation method as described in the first aspect is implemented.

[0038] The form generation method, device, electronic device and storage medium of the present invention have the following beneficial effects:

[0039] By loading preset design components and preset paper sizes, users can quickly select preset paper sizes and components without having to build each form element from scratch, which greatly improves the efficiency of form creation. Users can customize paper sizes through custom size instructions, providing users with greater flexibility and meeting their design needs. Then adjust the form display size according to the screen resolution to ensure that the form can have a good visual presentation on various devices, which increases the user experience. Then, based on the preset design components, according to the obtained component call command, the called preset design components are rendered to the form paper DOM node to generate form style data, which allows users to call preset design components for personalized customization and display in real time, so that users can see immediate effect changes during the design process to determine the form style data designed by the user, improve design efficiency and accuracy, and meet the diverse needs of users. Then obtain the user input data of the user, and add the user input data entered by the user to the form style data to enable the user to complete the data editing of the form. Finally, render the form style data and user input data to generate the target form that meets the user design. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] Figure 1 A flowchart of a form generation method provided by an embodiment of the present invention;

[0041] Figure 2 One of the intermediate flow diagrams of form generation provided in an embodiment of the present invention;

[0042] Figure 3 The second intermediate flow diagram of form generation provided by the embodiment of the present invention;

[0043] Figure 4 The third intermediate flow diagram of form generation provided by the embodiment of the present invention;

[0044] Figure 5 A schematic diagram of the structure of a form generating device provided by an embodiment of the present invention;

[0045] Figure 6 A schematic diagram of the structure of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0046] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, the specific embodiments of the present invention are described in detail below in conjunction with the accompanying drawings. Although certain embodiments of the present invention are shown in the accompanying drawings, it should be understood that the present invention can be implemented in various forms and should not be interpreted as being limited to the embodiments described herein. On the contrary, these embodiments are provided to provide a more thorough and complete understanding of the present invention. It should be understood that the drawings and embodiments of the present invention are only for exemplary purposes and are not intended to limit the scope of protection of the present invention.

[0047] It should be understood that the various steps described in the method embodiments of the present invention may be performed in different orders and / or in parallel. In addition, the method embodiments may include additional steps and / or omit the steps shown. The scope of the present invention is not limited in this respect.

[0048] The term "including" and its variations used in this document are open inclusions, that is, "including but not limited to"; the term "based on" means "based at least in part on"; the term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one other embodiment"; the term "some embodiments" means "at least some embodiments"; the term "optionally" means "optional embodiments". The relevant definitions of other terms will be given in the following description. It should be noted that the concepts of "first", "second", etc. mentioned in the present invention are only used to distinguish different devices, modules or units, and are not used to limit the order or interdependence of the functions performed by these devices, modules or units.

[0049] It should be noted that the modifications of "one" and "plurality" mentioned in the present invention are illustrative rather than restrictive, and those skilled in the art should understand that, unless otherwise clearly indicated in the context, it should be understood as "one or more".

[0050] The names of the messages or information exchanged between multiple devices in the embodiments of the present invention are only used for illustrative purposes, and are not used to limit the scope of these messages or information.

[0051] In view of the problems existing in the above-mentioned related technologies, this embodiment provides a form generation method, device, electronic device and storage medium.

[0052] like Figure 1 As shown, a form generation method provided by an embodiment of the present invention includes:

[0053] A preset design component and a preset paper size are loaded, wherein the preset paper size includes a plurality of different international paper sizes.

[0054] Specifically, the preset design component refers to a component in the designer of a Web application that is used to assist users in form design, such as Figure 2As shown in the optional area on the left, the preset design components may include text components, line segment components, table components, image components, and QR code (barcode) components. The text component is used to provide a text editing area. You can set text size, bold, italic and other text formats. You can also use variables to fill in text content, and support formula calculations; the line segment component is used to provide the ability to draw line segments. You can set the thickness, length, horizontal and vertical line segment formats; the table component is used to provide a table editing area. You can set the number / width of rows and columns, the text size / alignment in the table, and the text content in the table supports formula calculations; the image component is used to provide an image display area, allowing users to upload local images, and can also bind variables to display images on hyperlinks; the QR code (barcode) component is used to provide a QR code display area. It supports customizing the size of the QR code or barcode, and can automatically display the input text content as a QR code, and also supports binding variables. The preset paper size refers to the international paper size that the user can select, such as Figure 2 As shown, you can choose from various types of A-type paper, B-type paper and C-type paper.

[0055] Based on the preset paper size, the form display size is determined according to the acquired paper determination instruction and the screen resolution, and the form paper DOM node is displayed within the form display size, wherein the paper determination instruction includes a preset size selection instruction and a custom size selection instruction.

[0056] Specifically, Figure 3 As shown, users can make choices based on preset paper sizes to complete quick creation, or they can customize paper sizes, that is, set preset size instructions and custom size instructions to clarify the actual paper size required. After determining the paper size, obtain the screen resolution of the user's device to determine the form display size based on the obtained paper instructions and screen resolution, so as to better present the form. After the form display size is configured and transferred to the Document Object Model (DOM), it will be displayed on the Web page with a fixed DOM structure and style, that is, the form paper DOM node. For example, Figure 2 and Figure 3As shown, users can also upload existing form templates in Extensible Markup Language (XML) format, which are parsed into DOM structures and displayed by the Web's built-in parsing engine to quickly complete the creation, thereby increasing flexibility and meeting different user needs. Alternatively, users can save historical form formats to obtain XML templates in historical form formats. This structure contains all the information required for form rendering: paper size, margins, element position, element size, and binding data, etc., and save the XML template in the database so that users can export the template according to actual conditions and reuse it. In addition, where a form is needed, users can set the form binding relationship so that the corresponding XML template can be found based on the binding relationship. The form binding relationship is generally a form template code. Users can also click to view the form, and it will automatically parse the XML template structure into a page that can be displayed on the Web page for rendering and display.

[0057] Based on the preset design component, according to the acquired component calling command, the called preset design component is rendered to the form paper DOM node, form style data is generated, and the acquired user input data is rendered to the form paper DOM node.

[0058] Specifically, the user can select a preset design component through a component call command and adjust the position of the preset design component. The designer of the Web application will render the called preset design component into the form paper DOM node after DOM conversion according to the preset design component. For example, Figure 4 As shown, the text component is rendered to the form paper DOM node. When the text component is called, the designer will convert the text component into an Input element on the Web so that the user can enter the content by himself, thereby rendering the user input data to the form paper DOM node to obtain a complete structure. At this time, the designer will highlight the elements that the user is operating on, and make real-time corresponding displays when the user adjusts, so that the user's operation is what you see, so that the user can clearly see the form designed by himself.

[0059] The form style data and the user input data are rendered to generate a target form.

[0060] Specifically, through the Web application, when a user needs to generate a form, the form style data and the user input data are rendered, and the rendered form style data and the user input data are combined into a complete DOM structure and displayed in the Web page, that is, the target form is generated. Exemplarily, after the target form is generated, the template corresponding to the target form can be saved to the database for subsequent use.

[0061] In this embodiment, by loading the preset design component and the preset paper size, the user can quickly select the preset paper size and component, without having to build each form element from scratch, thereby greatly improving the efficiency of form creation, and the user can customize the paper size through the custom size instruction, providing the user with greater flexibility and meeting the user's design needs. Then adjust the form display size according to the screen resolution to ensure that the form can have a good visual presentation on various devices, thereby increasing the user experience. Then based on the preset design component, according to the obtained component call command, the called preset design component is rendered to the form paper DOM node, and the form style data is generated, so that the user can call the preset design component for personalized customization, and display it in real time, so that the user can see the immediate effect changes during the design process, so as to determine the form style data designed by the user, improve the design efficiency and accuracy, and meet the diverse needs of users, and then obtain the user input data of the user, and add the user input data entered by the user in the form style data, so that the user can complete the data editing of the form, and finally render the form style data and the user input data to generate the target form that meets the user design.

[0062] Optionally, determining the form display size based on the preset paper size and according to the acquired paper determination instruction and screen resolution includes:

[0063] Based on the preset paper size, and according to the paper determination instruction, determining the actual paper size;

[0064] Determining a screen pixel constant according to the screen resolution and a preset error parameter;

[0065] The form display size is determined according to the actual paper size and the screen pixel constant.

[0066] Specifically, when the paper determination instruction is a preset size instruction, based on the preset paper size, the paper size corresponding to the preset size instruction is selected to determine the actual paper size; when the paper determination instruction is a custom size instruction, the designer sets the corresponding paper size according to the custom size instruction to determine the actual paper size. After determining the actual paper size, the designer will dynamically determine the screen pixel constant based on the screen resolution and the preset error parameter. For example, if the screen resolution contains 96 pixels per millimeter, plus the preset error parameter, the determined screen pixel constant can be 3.9344. Then multiply the actual paper size by the screen pixel constant to get the form display size.

[0067] Optionally, the rendering the form style data and the user input data to generate a target form includes:

[0068] Generate commands based on the obtained form and call the renderer;

[0069] According to the renderer, the form style data and the user input data are rendered to generate the target form.

[0070] Specifically, when the user needs to generate a form, the user's form generation command is obtained, the corresponding form template code is configured, and the corresponding data interface is passed to the renderer. The renderer will match the variables according to the form style data and the user input data using regular matching, and replace the variables with the real values ​​​​obtained from the data interface. At the same time, if the user input data contains formula calculations, the renderer will perform real-time calculations according to the matched calculation formula, and render it in combination with the form style data to obtain a complete DOM structure, that is, the target form.

[0071] Optionally, the user input data includes static data and dynamic data; and rendering the acquired user input data to the form paper DOM node includes:

[0072] Rendering the acquired static data to the form paper DOM node;

[0073] Binding the dynamic data and the preset design component corresponding thereto to generate a dynamic logo;

[0074] The dynamic logo is rendered to the form paper DOM node.

[0075] Specifically, static data refers to any data in the pre-set data configuration added by the user through the text-type component; dynamic data refers to the system formula operation performed by the user on the data, for example, obtaining the system time, basic arithmetic operations, case conversion, and Base64 transcoding and other calculation formulas, where the calculation formula is the function that can be realized by the corresponding component in the preset design component. For static data, the static data can be rendered to the form paper DOM node; for dynamic data, the data needs to be bound to the corresponding preset design component, and then the corresponding node will add the dynamic identifier corresponding to the formula component. When rendering, the renderer will automatically identify the formula and perform the corresponding conversion work. For example, if the user uses an XML template, if the XML template contains dynamic data, the renderer will automatically obtain the data and update the page display according to the dynamic data and the corresponding formula component. After the rendering is completed, the user can perform subsequent operations such as printing and downloading.

[0076] Optionally, after rendering the acquired user input data to the form paper DOM node and before rendering the form style data and the user input data and generating the target form, the method further includes:

[0077] According to the obtained preview instruction, CSS technology is adopted to hide the called preset design component and display the form paper DOM node.

[0078] Specifically, after the design is completed, the user can perform a preview operation to view the final form effect. During the preview, the designer will use the web CSS style technology to hide the called preset design components and only display the paper part. At the same time, the Web program will automatically generate a complete DOM object that does not contain the data rendering part based on the content in the paper for display to achieve preview.

[0079] Optionally, after rendering the form style data and the user input data to generate a target form, the method further includes:

[0080] Generate an extensible markup language text through the target form according to the obtained form printing instruction;

[0081] Generate a portable document format export text based on the extensible markup language text.

[0082] Specifically, after generating the target form, the user can print and download the target form. After obtaining the form printing instruction, the designer will generate the corresponding extensible markup language text, that is, XML structured data, based on the target form of the DOM structure, and then draw the portable file format export text, that is, PDF file, based on the extensible markup language text to complete printing and downloading.

[0083] Optionally, before loading the preset design component and the preset paper size, the method further includes:

[0084] Build a form design environment based on Web technology.

[0085] Specifically, before generating a form, it is necessary to build a user-friendly form design environment based on Web technology, using Web front-end technologies such as HTML5, CSS3 and JavaScript.

[0086] like Figure 5 As shown, a form generating device 500 provided by an embodiment of the present invention includes:

[0087] A loading module 510, used to load a preset design component and a preset paper size, wherein the preset paper size includes a plurality of different international paper sizes;

[0088] The paper module 520 is used to determine the form display size based on the preset paper size, according to the acquired paper determination instruction and the screen resolution, and display the form paper DOM node within the form display size, wherein the paper determination instruction includes a preset size selection instruction and a custom size selection instruction;

[0089] The rendering module 530 is used to render the called preset design component to the form paper DOM node based on the preset design component and according to the obtained component calling command, generate form style data, and render the obtained user input data to the form paper DOM node;

[0090] The generating module 540 is used to render the form style data and the user input data to generate a target form.

[0091] like Figure 6 As shown, an electronic device 600 provided by an embodiment of the present invention includes a memory 610 and a processor 620; the memory 610 is used to store a computer program; the processor 620 is used to implement the form generation method as described above when executing the computer program.

[0092] In other words, an electronic device 600 includes a memory 610 and a processor 620 coupled to the memory 610; the memory 610 is configured to store a computer program; and the processor 620 is configured to perform the following operations when executing the computer program:

[0093] Loading a preset design component and a preset paper size, wherein the preset paper size includes a plurality of different international paper sizes;

[0094] Based on the preset paper size, according to the acquired paper determination instruction and the screen resolution, the form display size is determined, and the form paper DOM node is displayed within the form display size, wherein the paper determination instruction includes a preset size selection instruction and a custom size selection instruction;

[0095] Based on the preset design component, according to the obtained component calling command, the called preset design component is rendered to the form paper DOM node, form style data is generated, and the obtained user input data is rendered to the form paper DOM node;

[0096] The form style data and the user input data are rendered to generate a target form.

[0097] An embodiment of the present invention provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the form generating method as described above is implemented.

[0098] In other words, a non-volatile computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the processor performs the following operations:

[0099] Loading a preset design component and a preset paper size, wherein the preset paper size includes a plurality of different international paper sizes;

[0100] Based on the preset paper size, according to the acquired paper determination instruction and the screen resolution, the form display size is determined, and the form paper DOM node is displayed within the form display size, wherein the paper determination instruction includes a preset size selection instruction and a custom size selection instruction;

[0101] Based on the preset design component, according to the obtained component calling command, the called preset design component is rendered to the form paper DOM node, form style data is generated, and the obtained user input data is rendered to the form paper DOM node;

[0102] The form style data and the user input data are rendered to generate a target form.

[0103] An electronic device 600 that can be used as a server or client of the present invention will now be described, which is an example of a hardware device that can be applied to various aspects of the present invention. The electronic device 600 is intended to represent various forms of digital electronic computer equipment, such as laptop computers, desktop computers, workbenches, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device 600 can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples, and are not intended to limit the implementation of the present invention described and / or required herein.

[0104] The electronic device 600 includes a computing unit, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) or a computer program loaded from a storage unit into a random access memory (RAM). In the RAM, various programs and data required for the operation of the device can also be stored. The computing unit, ROM, and RAM are connected to each other via a bus. An input / output (I / O) interface is also connected to the bus.

[0105] A person of ordinary skill in the art can understand that all or part of the processes in the above-mentioned embodiment method can be completed by instructing the relevant hardware through a computer program, and the program can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, the storage medium can be a disk, an optical disk, a read-only memory (ROM) or a random access memory (RAM), etc. In the present application, the unit described as a separate component may or may not be physically separated, and the component displayed as a unit may or may not be a physical unit, that is, it may be located in one place, or it may be distributed on multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the embodiment of the present invention. In addition, each functional unit in each embodiment of the present invention can be integrated in a processing unit, or each unit can exist physically separately, or two or more units can be integrated in one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of a software functional unit.

[0106] Although the present invention is disclosed as above, the protection scope of the present invention is not limited thereto. Those skilled in the art may make various changes and modifications without departing from the spirit and scope of the present invention, and these changes and modifications will fall within the protection scope of the present invention.

Claims

1. A form generation method, characterized in that: include: Loading a preset design component and a preset paper size, wherein the preset paper size includes a plurality of different international paper sizes; Based on the preset paper size, according to the acquired paper determination instruction and the screen resolution, the form display size is determined, and the form paper DOM node is displayed within the form display size, wherein the paper determination instruction includes a preset size selection instruction and a custom size selection instruction; Based on the preset design component, according to the obtained component calling command, the called preset design component is rendered to the form paper DOM node, form style data is generated, and the obtained user input data is rendered to the form paper DOM node; The form style data and the user input data are rendered to generate a target form.

2. The form generation method according to claim 1, characterized in that: The step of determining the form display size based on the preset paper size and according to the acquired paper determination instruction and screen resolution includes: Based on the preset paper size, and according to the paper determination instruction, determining the actual paper size; Determining a screen pixel constant according to the screen resolution and a preset error parameter; The form display size is determined according to the actual paper size and the screen pixel constant.

3. The form generation method according to claim 1, characterized in that: The rendering of the form style data and the user input data to generate a target form includes: Generate commands based on the obtained form and call the renderer; According to the renderer, the form style data and the user input data are rendered to generate the target form.

4. The form generation method according to claim 1, characterized in that: The user input data includes static data and dynamic data; the step of rendering the acquired user input data to the form paper DOM node includes: Rendering the acquired static data to the form paper DOM node; Binding the dynamic data and the preset design component corresponding thereto to generate a dynamic logo; The dynamic logo is rendered to the form paper DOM node.

5. The form generation method according to claim 1, characterized in that: After rendering the acquired user input data to the form paper DOM node, and before rendering the form style data and the user input data and generating the target form, the method further includes: According to the obtained preview instruction, CSS technology is adopted to hide the called preset design component and display the form paper DOM node.

6. The form generation method according to claim 1, characterized in that: After rendering the form style data and the user input data to generate a target form, the method further includes: Generate an extensible markup language text through the target form according to the obtained form printing instruction; Generate a portable document format export text based on the extensible markup language text.

7. The form generation method according to claim 1, characterized in that: Before loading the preset design component and the preset paper size, the method further includes: Build a form design environment based on Web technology.

8. A form generating device, characterized in that: include: A loading module, used for loading a preset design component and a preset paper size, wherein the preset paper size includes a plurality of different international paper sizes; A paper module, used to determine the form display size based on the preset paper size, according to the acquired paper determination instruction and the screen resolution, and display the form paper DOM node within the form display size, wherein the paper determination instruction includes a preset size selection instruction and a custom size selection instruction; A rendering module, for rendering the called preset design component to the form paper DOM node based on the preset design component and according to the acquired component calling command, generating form style data, and rendering the acquired user input data to the form paper DOM node; A generation module is used to render the form style data and the user input data to generate a target form.

9. An electronic device, characterized in that: including memory and processor; The memory is used to store computer programs; The processor is used to implement the form generation method according to any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium, characterized in that: The storage medium stores a computer program, and when the computer program is executed by a processor, the form generation method according to any one of claims 1 to 7 is implemented.

Images