A bill interface display method and device, equipment and storage medium thereof
By parsing and dynamically processing document interface display requests, dynamic style templates and rendering components are obtained, solving the problem of cross-platform adaptation of document display and achieving flexible display with resource conservation.
Patent Information
- Application Number
- CN202411923949.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-25
- Publication Date
- 2026-01-06
- Estimated Expiration
- 2044-12-25
AI Technical Summary
In existing technologies, document display cannot achieve flexible display and automatic adaptation across different screen sizes and systems, resulting in the need to develop separate PC and mobile versions, which consumes a lot of resources.
By receiving and parsing document interface display requests, dynamic style templates and rendering components are obtained. Using pre-built template parsers and dynamic rendering components, different components in the document structure are dynamically processed and mapped to the display interface to achieve cross-platform display.
It enables flexible display and automatic adaptation of documents on different terminals, reducing the consumption of development resources.
Smart Images

Figure CN119829186B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of research and development design technology, and is applied to the scenario of supporting output of documents at multiple output terminals. In particular, it relates to a method, device, equipment and storage medium for document interface display. Background Technology
[0002] With its massive user base, the internet has led to a surge in online services across various industries, aimed at improving convenience and fully leveraging its advantages. For instance, traditional invoicing services are increasingly moving towards online services, including online invoicing, online document data extraction, and online document statistics.
[0003] However, there are still many bottlenecks in document display, mainly due to the following reasons: First, there are many mobile screen interface service providers, making it impossible to form a unified screen interface size; Second, in terms of interface interaction, business requirements and functions expanded on the PC side involve conversion from Windows systems to Android or Apple systems when converting to mobile devices, and cannot be directly transferred to mobile device applications; Third, the screen interface sizes of various mobile devices or mobile phone models are different, resulting in document display not being fully compatible with all models. Therefore, the development and implementation of front-end display functions requires separate development for PC and mobile sides, which cannot be flexibly displayed or automatically adapted, and requires a significant investment of resources. Summary of the Invention
[0004] The purpose of this application is to propose a document interface display method, device, equipment and its storage medium to solve the problem that the development and implementation of existing front-end display functions require separate development for PC and mobile terminals, which cannot be flexibly displayed and automatically adapted, and require a lot of resources.
[0005] To address the aforementioned technical problems, this application provides a method for graphically displaying documents, employing the following technical solution:
[0006] A method for graphically displaying documents includes the following steps:
[0007] Receive and parse the target document's request for graphical display, and obtain the corresponding parsing results;
[0008] Based on the analysis results, obtain the predefined dynamic style templates for different components in the target document structure;
[0009] A pre-built template parser is used to parse the dynamic style template to obtain the parsed UI interface components.
[0010] Based on the analysis results, obtain the pre-encapsulated dynamic rendering components for different components in the target document structure;
[0011] The UI interface components corresponding to different components in the target document structure are dynamically processed using the corresponding dynamic rendering components.
[0012] The dynamic processing results are mapped to a preset display interface to complete the graphical display of the target document.
[0013] Furthermore, the step of receiving and parsing the target document's graphical display request and obtaining the corresponding parsing result includes:
[0014] Receive a target document interface display request sent by the target display terminal, wherein the target display terminal includes a mobile-based target display terminal and a PC-based target display terminal;
[0015] Parse the graphical display request to obtain the model information of the target display terminal and the model information of the document provider terminal;
[0016] Using the model information of the target display terminal as an index field, the interface size information of the target display terminal is identified through a preset model interface relationship mapping form;
[0017] Using the model information of the document provider as an index field, the interface size information of the document provider is identified through the model interface relationship mapping form.
[0018] Furthermore, the different components of the target document structure include a title section, a main content section, and a closing section. The main content section includes form field content, image description content, and functional buttons. Before performing the step of obtaining the predefined dynamic style templates for the different components of the target document structure based on the parsing result, the method further includes:
[0019] Based on the interface size information of the document provider, identify the font size of the Chinese text in the title, main content, and closing sections in the document provider.
[0020] Based on the interface size information of the document provider, the display ratio of the title, main content, and ending to the overall interface of the document provider is identified.
[0021] Based on the interface size information of the document provider, identify the number of columns and layout information corresponding to the form field content, image description content, and functional buttons in the main content section;
[0022] The font size, the display ratio, the number of display columns, and the layout information are used as the template control conditions for the dynamic style template.
[0023] Furthermore, the step of obtaining predefined dynamic style templates for different components of the target document structure based on the parsing results specifically includes:
[0024] Based on the interface size information of the target display terminal and the template control conditions, determine the font size of the text content of the title part in the target document structure in the target display terminal and the display ratio of the title part in the target display terminal;
[0025] Based on the font size of the text content in the title section in the target display terminal and the display ratio of the title section in the target display terminal, a dynamic style template corresponding to the title section is constructed;
[0026] Based on the interface size information of the target display terminal and the template control conditions, determine the font size of the text content of the main body of the target document structure in the target display terminal, the form field content, image description content and functional button content in the main body of the content, and their respective interface position information in the target display terminal.
[0027] Based on the font size of the text content of the main content section in the target display terminal, the interface position information of the form field content, image description content and functional buttons in the main content section in the target display terminal, a dynamic style template corresponding to the main content section is constructed.
[0028] Based on the interface size information of the target display terminal and the template control conditions, determine the font size of the text content at the end of the target document structure in the target display terminal and the display ratio of the end part in the target display terminal;
[0029] Based on the font size of the text content at the end of the text in the target display device and the display ratio of the end of the text in the target display device, a dynamic style template corresponding to the end of the text is constructed.
[0030] Furthermore, before performing the step of obtaining the pre-encapsulated dynamic rendering components for different components in the target document structure based on the parsing result, the method further includes:
[0031] Based on the differences of each UI component, dynamic rendering components of different rendering types are set up respectively. The dynamic rendering components of different rendering types include dynamic rendering components based on condition judgment, dynamic rendering components based on loading method, and dynamic rendering components based on routing.
[0032] The step of obtaining the pre-encapsulated dynamic rendering components for different parts of the target document structure based on the parsing results specifically includes:
[0033] Based on the UI interface components corresponding to the title section, identify the dynamic rendering type of the title section, and obtain the dynamic rendering component corresponding to the title section in the target document structure.
[0034] Based on the UI components corresponding to the form field content, image description content, and functional buttons in the main content section, identify the dynamic rendering type corresponding to the form field content, image description content, and functional buttons in the main content section, and obtain the dynamic rendering components corresponding to the form field content, image description content, and functional buttons in the main content section of the target document structure.
[0035] Based on the UI component corresponding to the end part, identify the dynamic rendering type of the end part, and obtain the dynamic rendering component corresponding to the end part in the target document structure.
[0036] Furthermore, the step of dynamically processing the UI interface components corresponding to different components in the target document structure using the corresponding dynamic rendering components specifically includes:
[0037] Activate the dynamic rendering component corresponding to the title section in the target document structure, and determine whether the title section meets the specified dynamic rendering conditions based on the dynamic rendering type of the title section.
[0038] If the title portion meets the specified dynamic rendering conditions, the dynamic rendering component is used to dynamically render the UI interface component corresponding to the title portion to complete the dynamic generation of the title portion.
[0039] Activate the dynamic rendering components corresponding to the form field content, image description content, and functional button in the main content section of the target document structure, and determine whether the form field content, image description content, and functional button in the main content section meet the specified dynamic rendering conditions based on the dynamic rendering type corresponding to the form field content, image description content, and functional button in the main content section.
[0040] If the form field content, image description content, and functional button content in the main content section meet the specified dynamic rendering conditions, then the corresponding dynamic rendering components are used to dynamically render the UI interface components corresponding to the form field content, image description content, and functional button content in the main content section, so as to complete the dynamic generation of the main content section.
[0041] Activate the dynamic rendering component corresponding to the end part of the target document structure, and determine whether the end part meets the specified dynamic rendering conditions based on the dynamic rendering type of the end part.
[0042] If the ending portion meets the specified dynamic rendering conditions, the dynamic rendering component is used to dynamically render the UI interface component corresponding to the ending portion to complete the dynamic generation of the ending portion.
[0043] Furthermore, the step of mapping the dynamic processing results to a preset display interface to complete the graphical display of the target document specifically includes:
[0044] Obtain the interface address information of the target display terminal;
[0045] Using the interface address information, the dynamically generated title, main content, and ending are sequentially sent to the display interface.
[0046] The dynamically generated title, main content, and ending sections are sequentially joined together to obtain a graphical display of the target document.
[0047] To address the aforementioned technical problems, this application also provides a document interface display device, which employs the following technical solution:
[0048] A document interface display device, comprising:
[0049] The request parsing module is used to receive and parse the target document's graphical display request and obtain the corresponding parsing results.
[0050] The dynamic style template acquisition module is used to acquire, based on the parsing results, predefined dynamic style templates for different components in the target document structure.
[0051] The UI component acquisition module is used to parse the dynamic style template using a pre-built template parser to obtain the parsed UI components.
[0052] The dynamic rendering component acquisition module is used to acquire, based on the parsing results, the pre-encapsulated dynamic rendering components for different components in the target document structure.
[0053] The UI interface component dynamic rendering module is used to dynamically process the UI interface components corresponding to different components in the target document structure using the corresponding dynamic rendering components.
[0054] The graphical mapping and display module is used to map the dynamic processing results to a preset display interface to complete the graphical display of the target document.
[0055] To address the aforementioned technical problems, this application also provides a computer device that employs the following technical solution:
[0056] A computer device includes a memory and a processor, wherein the memory stores computer-readable instructions, and the processor executes the computer-readable instructions to implement the steps of the document interface display method described above.
[0057] To address the aforementioned technical problems, this application also provides a computer-readable storage medium, employing the technical solution described below:
[0058] A computer-readable storage medium storing computer-readable instructions, which, when executed by a processor, implement the steps of the document interface display method described above.
[0059] Compared with the prior art, the embodiments of this application have the following main advantages:
[0060] The document interface display method described in this application receives and parses a target document interface display request to obtain corresponding parsing results; based on the parsing results, it obtains predefined dynamic style templates for different components in the target document structure; it uses a pre-built template parser to parse the dynamic style templates to obtain parsed UI interface components; based on the parsing results, it obtains pre-encapsulated dynamic rendering components for different components in the target document structure; it uses the corresponding dynamic rendering components to dynamically process the UI interface components corresponding to different components in the target document structure; and it maps the dynamic processing results to a preset display interface to complete the interface display of the target document. The document interface display method described in this application, combined with dynamic rendering components to dynamically render UI interface components, achieves flexible display and automatic adaptation of the target document from the provider to the display end, reducing development resource consumption. Attached Figure Description
[0061] To more clearly illustrate the solutions in this application, the accompanying drawings used in the description of the embodiments of this application will be briefly introduced below. Obviously, the accompanying drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0062] Figure 1 This is an exemplary system architecture diagram to which this application can be applied;
[0063] Figure 2 This is a flowchart of an embodiment of the document interface display method according to this application;
[0064] Figure 3 yes Figure 2 A flowchart of a specific embodiment of step 201 shown;
[0065] Figure 4 This is a flowchart of a specific embodiment of the document interface display method described in this application for obtaining template control conditions;
[0066] Figure 5 yes Figure 2 A flowchart of a specific embodiment of step 202 shown;
[0067] Figure 6 yes Figure 2 A flowchart of a specific embodiment of step 204 shown;
[0068] Figure 7 yes Figure 2 A flowchart of a specific embodiment of step 205 shown;
[0069] Figure 8 yes Figure 2 A flowchart of a specific embodiment of step 206 shown;
[0070] Figure 9 This is a schematic diagram of the structure of one embodiment of the document interface display device according to this application;
[0071] Figure 10 This is a schematic diagram of the structure of one embodiment of the computer device according to this application. Detailed Implementation
[0072] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application pertains; the terminology used herein in the specification of the application is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "comprising" and "having," and any variations thereof, in the specification, claims, and foregoing drawings of this application, are intended to cover non-exclusive inclusion. The terms "first," "second," etc., in the specification, claims, or foregoing drawings of this application are used to distinguish different objects, not to describe a particular order.
[0073] In this document, the term "embodiment" means that a particular feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of this application. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a separate or alternative embodiment mutually exclusive with other embodiments. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described herein can be combined with other embodiments.
[0074] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings.
[0075] like Figure 1 As shown, system architecture 100 may include terminal device 101, network 102, and server 103. Terminal device 101 may be a laptop 1011, tablet 1012, or mobile phone 1013. Network 102 is used as a medium to provide a communication link between terminal device 101 and server 103. Network 102 may include various connection types, such as wired, wireless communication links, or fiber optic cables.
[0076] Users can use terminal device 101 to interact with server 103 via network 102 to receive or send messages, etc. Various communication client applications can be installed on terminal device 101, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social media platform software, etc.
[0077] Terminal device 101 can be various electronic devices with a display screen and support web browsing. In addition to laptops 1011, tablets 1012, or mobile phones 1013, terminal device 101 can also be e-book readers, MP3 players (Moving Picture Experts Group Audio Layer III), MP4 players (Moving Picture Experts Group Audio Layer IV), laptops, and desktop computers.
[0078] Server 103 can be a server that provides various services, such as a backend server that provides support for the pages displayed on terminal device 101.
[0079] It should be noted that the document interface display method provided in this application embodiment is generally executed by the server, and correspondingly, the document interface display device is generally set in the server.
[0080] It should be understood that Figure 1 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.
[0081] Continue to refer to Figure 2 The diagram illustrates a flowchart of an embodiment of the document interface display method according to this application. The document interface display method includes the following steps:
[0082] Step 201: Receive and parse the target document's graphical display request to obtain the corresponding parsing results.
[0083] In this embodiment, the target document interface display request refers to the interface display request issued by the document viewing terminal for the target document. The target document includes shopping receipts, medical vouchers, bank transfer receipts, and any other documents that can be displayed on a mobile terminal interface or a PC terminal interface.
[0084] In this embodiment, the document interface display method is generally deployed by the software service provider that offers document display. The software service provider processes the target document using this method and displays it on the document viewing terminal. That is, the document provider only provides the document, and the document viewing terminal only sends a viewing request command and subsequently receives the processed document.
[0085] Step 202: Based on the parsing results, obtain the predefined dynamic style templates for different components in the target document structure.
[0086] In this embodiment, based on the parsing results, predefined dynamic style templates are obtained for different components in the target document structure. These templates fully consider the font size, display ratio, number of columns, and layout information of the target document on the document provider side. The font size, display ratio, number of columns, and layout information of the target document on the document provider side are used as the template control conditions for the dynamic style templates. The dynamic style templates are then generated by combining the interface size information of the target display side.
[0087] Specifically, the dynamic style template is generated by using the font size, display ratio, number of columns, and layout information of the target document in the document provider as template control conditions, combined with the interface size information of the target display end. This takes into account the change of the target document from the provider interface to the display end interface, which facilitates reasonable visual effect control of the entire display transformation.
[0088] Step 203: Use a pre-built template parser to parse the dynamic style template to obtain the parsed UI interface components.
[0089] Specifically, the pre-built template parser can obtain UI interface components through parsing. The UI interface components can be understood as display components after adding corresponding dynamic style templates to the data content in the target document. This facilitates the subsequent display of the target document on the target display terminal by combining the UI interface components, thereby minimizing the impact of dynamic style templates on document display.
[0090] It should be understood that in this embodiment, step 202 uses the font size, display ratio, number of columns, and layout information of the target document in the document providing end as template control conditions, and combines them with the interface size information of the target display end to generate the dynamic style template. This takes into account the change of the target document from the providing end interface to the display end interface, which facilitates reasonable visual effect control of the entire display transformation. Step 203, based on the visual effect control in step 202, parses the dynamic template through a template parser to reduce the impact of the dynamic style template on the document display, and also facilitates the subsequent rendering of the target document to the target display end using the UI interface components obtained from the parsing.
[0091] Step 204: Based on the parsing results, obtain the dynamic rendering components pre-encapsulated for different components in the target document structure.
[0092] In this embodiment, dynamic rendering components are encapsulated for different components in the target document structure to ensure that the rendering components do not interfere with each other during subsequent dynamic rendering, enabling flexible rendering.
[0093] Step 205: Dynamically process the UI interface components corresponding to different components in the target document structure using the corresponding dynamic rendering components.
[0094] Step 206: Map the dynamic processing results to a preset display interface to complete the graphical display of the target document.
[0095] In this embodiment, a target document's UI display request is received and parsed to obtain corresponding parsing results. Based on the parsing results, predefined dynamic style templates for different components of the target document's structure are obtained. A pre-built template parser is used to parse the dynamic style templates to obtain the parsed UI interface components. Based on the parsing results, pre-encapsulated dynamic rendering components for different components of the target document's structure are obtained. The corresponding dynamic rendering components are used to dynamically process the UI interface components corresponding to different components of the target document's structure. The dynamic processing results are mapped to a preset display interface to complete the UI display of the target document. The document UI display method described in this application, combined with dynamic rendering components to dynamically render UI interface components, achieves flexible display and automatic adaptation of the target document from the provider to the display end, reducing development resource consumption.
[0096] Continue to refer to Figure 3 , Figure 3 yes Figure 2 A flowchart of a specific embodiment of step 201 shown includes the following steps:
[0097] Step 301: Receive a target document interface display request sent by the target display terminal, wherein the target display terminal includes a mobile-based target display terminal and a PC-based target display terminal;
[0098] Step 302: parse the interface display request to obtain the model information of the target display terminal and the model information of the document provider terminal;
[0099] Step 303: Using the model information of the target display terminal as an index field, the interface size information of the target display terminal is identified through a preset model interface relationship mapping form;
[0100] Step 304: Using the model information of the document provider as an index field, identify the interface size information of the document provider through the model interface relationship mapping form.
[0101] Specifically, the interface display request includes the model information of the target display terminal and the model information of the document provider terminal. That is, the interface display request includes the model information of the document request terminal and the model information of the document provider terminal. The document request terminal and the document provider terminal can both be mobile devices and PCs simultaneously, or one can be a mobile device and the other a PC. By obtaining the model information of the target display terminal and the model information of the document provider terminal, the document display conversion between mobile devices and PCs can be achieved.
[0102] In this embodiment, the different components of the target document structure include a title section, a main content section, and a closing section. The main content section includes form field content, image description content, and functional buttons.
[0103] Continue to refer to Figure 4 In some optional implementations, a step of obtaining template control conditions is included before step 202. Figure 4 This is a flowchart of a specific embodiment of the document interface display method described in this application for obtaining template control conditions, including the following steps:
[0104] Step 401: Based on the interface size information of the document provider, identify the font size of the Chinese text in the title, main content, and closing sections in the document provider.
[0105] Step 402: Based on the interface size information of the document provider, identify the display ratio of the title, main content, and ending parts to the overall interface of the document provider.
[0106] Step 403: Based on the interface size information of the document provider, identify the number of columns and layout information corresponding to the form field content, image description content and functional buttons in the main content section;
[0107] Step 404: The font size, the display ratio, the number of display columns, and the layout information are used as the template control conditions for the dynamic style template.
[0108] By combining the interface size information of the document provider, the font size, display ratio, number of columns, and layout information of the target document on the document provider can be identified, so as to ensure that the document results displayed to the target display end will not have significant differences.
[0109] Continue to refer to Figure 5 , Figure 5 yes Figure 2 A flowchart of a specific embodiment of step 202 shown includes the following steps:
[0110] Step 501: Based on the interface size information of the target display terminal and the template control conditions, determine the font size of the text content of the title part in the target document structure in the target display terminal and the display ratio of the title part in the target display terminal.
[0111] Step 502: Based on the font size of the text content of the title portion in the target display terminal and the display ratio of the title portion in the target display terminal, construct a dynamic style template corresponding to the title portion;
[0112] Step 503: Based on the interface size information of the target display terminal and the template control conditions, determine the font size of the text content of the main body of the content in the target document structure in the target display terminal, the interface position information of the form field content, image description content and functional buttons in the main body of the content in the target display terminal respectively;
[0113] Step 504: Based on the font size of the text content of the main content in the target display terminal, the interface position information of the form field content, image description content and functional buttons in the main content in the target display terminal, construct a dynamic style template corresponding to the main content.
[0114] Step 505: Based on the interface size information of the target display terminal and the template control conditions, determine the font size of the text content at the end of the target document structure in the target display terminal and the display ratio of the end part in the target display terminal.
[0115] Step 506: Based on the font size of the text content of the ending portion in the target display terminal and the display ratio of the ending portion in the target display terminal, construct a dynamic style template corresponding to the ending portion.
[0116] By combining the interface size information of the target display terminal and the template control conditions obtained from the document provider, dynamic style templates are generated for the title, the main content, and the ending of the target document. This ensures that the document results displayed to the target display terminal will not differ significantly from those displayed to the document provider.
[0117] In this embodiment, before performing the step of obtaining the pre-encapsulated dynamic rendering components for different components in the target document structure based on the parsing result, the method further includes: setting dynamic rendering components of different rendering types according to the different UI interface components, wherein the dynamic rendering components of different rendering types include dynamic rendering components based on condition judgment, dynamic rendering components based on loading method, and dynamic rendering components based on routing.
[0118] Specifically, the condition-based dynamic rendering component, for example, renders only when a certain condition is met; the loading-based dynamic rendering component, for example, asynchronously loads certain parts when a certain condition is met; and the routing-based dynamic rendering component, for example, manages the rendering of different pages and components through a router in large page displays.
[0119] Continue to refer to Figure 6 , Figure 6 yes Figure 2 A flowchart of a specific embodiment of step 204 shown includes the following steps:
[0120] Step 601: Based on the UI interface component corresponding to the title part, identify the dynamic rendering type of the title part, and obtain the dynamic rendering component corresponding to the title part in the target document structure.
[0121] Step 602: Based on the UI interface components corresponding to the form field content, image description content, and functional buttons in the main content section, identify the dynamic rendering type corresponding to the form field content, image description content, and functional buttons in the main content section, and obtain the dynamic rendering components corresponding to the form field content, image description content, and functional buttons in the main content section of the target document structure.
[0122] Step 603: Based on the UI interface component corresponding to the ending part, identify the dynamic rendering type of the ending part, and obtain the dynamic rendering component corresponding to the ending part in the target document structure.
[0123] In this embodiment, dynamic rendering components and dynamic rendering types corresponding to different components in the target document structure are used to facilitate the subsequent dynamic rendering of the corresponding UI interface components.
[0124] Continue to refer to Figure 7 , Figure 7 yes Figure 2 A flowchart of a specific embodiment of step 205 shown includes the following steps:
[0125] Step 701: Activate the dynamic rendering component corresponding to the title section in the target document structure, and determine whether the title section meets the specified dynamic rendering conditions based on the dynamic rendering type of the title section.
[0126] Step 702: If the title portion meets the specified dynamic rendering conditions, the dynamic rendering component is used to dynamically render the UI interface component corresponding to the title portion to complete the dynamic generation of the title portion.
[0127] Accordingly, if the title section does not meet the specified dynamic rendering conditions, the UI interface component corresponding to the title section will not be dynamically rendered using the dynamic rendering component for the time being, and rendering will continue while waiting.
[0128] Step 703: Activate the dynamic rendering components corresponding to the form field content, image description content, and functional buttons in the main content section of the target document structure, and determine whether the form field content, image description content, and functional buttons in the main content section meet the specified dynamic rendering conditions based on the dynamic rendering types corresponding to the form field content, image description content, and functional buttons in the main content section.
[0129] Step 704: If the form field content, image description content, and functional button in the main content part meet the specified dynamic rendering conditions, then the corresponding dynamic rendering components are used to dynamically render the UI interface components corresponding to the form field content, image description content, and functional button in the main content part, so as to complete the dynamic generation of the main content part.
[0130] Accordingly, if the main content portion does not meet the specified dynamic rendering conditions, the dynamic rendering component will not be used to dynamically render the UI interface component corresponding to the main content portion for the time being, and rendering will continue while waiting.
[0131] Step 705: Activate the dynamic rendering component corresponding to the end part of the target document structure, and determine whether the end part meets the specified dynamic rendering conditions based on the dynamic rendering type of the end part.
[0132] Step 706: If the ending portion meets the specified dynamic rendering conditions, the dynamic rendering component is used to dynamically render the UI interface component corresponding to the ending portion to complete the dynamic generation of the ending portion.
[0133] Accordingly, if the ending portion does not meet the specified dynamic rendering conditions, the dynamic rendering component will not be used to dynamically render the UI interface component corresponding to the ending portion for the time being, and rendering will continue while waiting.
[0134] Continue to refer to Figure 8, Figure 8 yes Figure 2 A flowchart of a specific embodiment of step 206 shown includes the following steps:
[0135] Step 801: Obtain the interface address information of the target display terminal;
[0136] Step 802: Using the interface address information, the dynamically generated title, main content, and ending are sequentially sent to the display interface;
[0137] Step 803: The dynamically generated title, main content, and ending parts are sequentially joined together to obtain the graphical display result of the target document.
[0138] By combining the interface address information of the target display terminal, the dynamically generated title, main content, and closing parts are sent to the display interface in sequence. The dynamically generated title, main content, and closing parts are then connected in a coherent manner according to the order of sending, resulting in a graphical display of the target document. This achieves a sending and display process that conforms to the user's browsing habits, allowing browsing from the title, main content, and closing parts of the document in sequence.
[0139] This application receives and parses a request for a graphical display of a target document to obtain corresponding parsing results. Based on the parsing results, it acquires predefined dynamic style templates for different components of the target document structure. A pre-built template parser is used to parse the dynamic style templates to obtain the parsed UI interface components. Based on the parsing results, it acquires pre-encapsulated dynamic rendering components for different components of the target document structure. The corresponding dynamic rendering components are used to dynamically process the UI interface components corresponding to different components of the target document structure. The dynamic processing results are mapped to a preset display interface to complete the graphical display of the target document. The graphical display method for documents described in this application, combined with dynamic rendering components for dynamic rendering of UI interface components, achieves flexible display and automatic adaptation of the target document from the provider to the display end, reducing development resource consumption.
[0140] The embodiments of this application can acquire and process relevant data based on artificial intelligence technology. Artificial intelligence (AI) refers to the theories, methods, technologies, and application systems that use digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use that knowledge to obtain optimal results.
[0141] Foundational technologies for artificial intelligence generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing, operating / interactive systems, and mechatronics. AI software technologies mainly encompass computer vision, robotics, biometrics, speech processing, natural language processing, and machine learning / deep learning.
[0142] In this embodiment, a target document UI display request is received and parsed to obtain corresponding parsing results. Based on the parsing results, predefined dynamic style templates for different components of the target document structure are obtained. A pre-built template parser is used to parse the dynamic style templates to obtain the parsed UI interface components. Based on the parsing results, pre-encapsulated dynamic rendering components for different components of the target document structure are obtained. The corresponding dynamic rendering components are used to dynamically process the UI interface components corresponding to different components of the target document structure. The dynamic processing results are mapped to a preset display interface to complete the UI display of the target document. The document UI display method described in this application, combined with dynamic rendering components to dynamically render UI interface components, achieves flexible display and automatic adaptation of the target document from the provider to the display end, reducing development resource consumption.
[0143] Further reference Figure 9 As a response to the above Figure 2 To implement the method shown, this application provides an embodiment of a document interface display device, which is similar to... Figure 2 Corresponding to the method embodiments shown, this device can be specifically applied to various electronic devices.
[0144] like Figure 9 As shown, the document interface display device 900 described in this embodiment includes: a display request parsing module 901, a dynamic style template acquisition module 902, a UI interface component acquisition module 903, a dynamic rendering component acquisition module 904, a UI interface component dynamic rendering module 905, and an interface mapping display module 906. Wherein:
[0145] The request parsing module 901 is used to receive and parse the target document's graphical display request and obtain the corresponding parsing results.
[0146] The dynamic style template acquisition module 902 is used to acquire, based on the parsing result, predefined dynamic style templates for different components in the target document structure.
[0147] UI component acquisition module 903 is used to parse the dynamic style template using a pre-built template parser to obtain the parsed UI components.
[0148] The dynamic rendering component acquisition module 904 is used to acquire, based on the parsing result, the pre-encapsulated dynamic rendering components for different components in the target document structure.
[0149] The UI interface component dynamic rendering module 905 is used to dynamically process the UI interface components corresponding to different components in the target document structure using the corresponding dynamic rendering components.
[0150] The graphical mapping and display module 906 is used to map the dynamic processing results to a preset display interface to complete the graphical display of the target document.
[0151] This application receives and parses a request for a graphical display of a target document to obtain corresponding parsing results. Based on the parsing results, it acquires predefined dynamic style templates for different components of the target document structure. A pre-built template parser is used to parse the dynamic style templates to obtain the parsed UI interface components. Based on the parsing results, it acquires pre-encapsulated dynamic rendering components for different components of the target document structure. The corresponding dynamic rendering components are used to dynamically process the UI interface components corresponding to different components of the target document structure. The dynamic processing results are mapped to a preset display interface to complete the graphical display of the target document. The graphical display method for documents described in this application, combined with dynamic rendering components for dynamic rendering of UI interface components, achieves flexible display and automatic adaptation of the target document from the provider to the display end, reducing development resource consumption.
[0152] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by instructing related hardware through computer-readable instructions. These computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the methods described above. The aforementioned storage medium can be a non-volatile storage medium such as a magnetic disk, optical disk, or read-only memory (ROM), or random access memory (RAM).
[0153] It should be understood that although the steps in the flowcharts of the accompanying figures are shown sequentially as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the accompanying figures may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.
[0154] To address the aforementioned technical problems, embodiments of this application also provide a computer device. Please refer to [link / reference needed]. Figure 10 , Figure 10 This is a basic structural block diagram of the computer device in this embodiment.
[0155] The computer device 10 includes a memory 10a, a processor 10b, and a network interface 10c, which are interconnected via a system bus. It should be noted that... Figure 10 Only a computer device 10 with component memory 10a, processor 10b, and network interface 10c is shown in the illustration. However, it should be understood that it is not required to implement all of the shown components, and more or fewer components may be implemented instead. Those skilled in the art will understand that the computer device described herein is a device capable of automatically performing numerical calculations and / or information processing according to pre-set or stored instructions. Its hardware includes, but is not limited to, microprocessors, application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.
[0156] The computer device can be a desktop computer, laptop, handheld computer, or cloud server, etc. The computer device can interact with the user via a keyboard, mouse, remote control, touchpad, or voice control.
[0157] The memory 10a includes at least one type of readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 10a may be an internal storage unit of the computer device 10, such as the hard disk or memory of the computer device 10. In other embodiments, the memory 10a may also be an external storage device of the computer device 10, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc. Of course, the memory 10a may include both internal storage units and external storage devices of the computer device 10. In this embodiment, the memory 10a is typically used to store the operating system and various application software installed on the computer device 10, such as computer-readable instructions for a document interface display method. In addition, the memory 10a can also be used to temporarily store various types of data that have been output or will be output.
[0158] In some embodiments, the processor 10b may be a central processing unit (CPU), controller, microcontroller, microprocessor, or other data processing chip. The processor 10b is typically used to control the overall operation of the computer device 10. In this embodiment, the processor 10b is used to execute computer-readable instructions stored in the memory 10a or to process data, for example, to execute computer-readable instructions for the document interface display method.
[0159] The network interface 10c may include a wireless network interface or a wired network interface, which is typically used to establish communication connections between the computer device 10 and other electronic devices.
[0160] The computer device proposed in this embodiment belongs to the field of research and development design technology and is applied in scenarios supporting multi-output terminals of documents. This application receives and parses a target document's interface display request to obtain corresponding parsing results; based on the parsing results, it obtains predefined dynamic style templates for different components of the target document structure; it uses a pre-built template parser to parse the dynamic style templates to obtain various parsed UI interface components; based on the parsing results, it obtains pre-encapsulated dynamic rendering components for different components of the target document structure; it uses the corresponding dynamic rendering components to dynamically process the UI interface components corresponding to different components of the target document structure; and it maps the dynamic processing results to a preset display interface to complete the interface display of the target document. The document interface display method described in this application, combined with dynamic rendering components to dynamically render UI interface components, achieves flexible display and automatic adaptation of the target document from the providing end to the display end, reducing development resource consumption.
[0161] This application also provides another embodiment, namely, providing a computer-readable storage medium storing computer-readable instructions that can be executed by a processor to cause the processor to perform the steps of the document interface display method described above.
[0162] The computer-readable storage medium proposed in this embodiment belongs to the field of research and development design technology and is applied in scenarios supporting multi-output terminals for documents. This application receives and parses a target document's UI display request to obtain corresponding parsing results; based on the parsing results, it obtains predefined dynamic style templates for different components of the target document structure; it uses a pre-built template parser to parse the dynamic style templates to obtain the parsed UI interface components; based on the parsing results, it obtains pre-encapsulated dynamic rendering components for different components of the target document structure; it uses the corresponding dynamic rendering components to dynamically process the UI interface components corresponding to different components of the target document structure; and it maps the dynamic processing results to a preset display interface to complete the UI display of the target document. The document UI display method described in this application, combined with dynamic rendering components to dynamically render UI interface components, achieves flexible display and automatic adaptation of the target document from the providing end to the display end, reducing development resource consumption.
[0163] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of this application.
[0164] Obviously, the embodiments described above are only some embodiments of this application, not all embodiments. The accompanying drawings show preferred embodiments of this application, but do not limit the patent scope of this application. This application can be implemented in many different forms; rather, the purpose of providing these embodiments is to provide a more thorough and comprehensive understanding of the disclosure of this application. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions described in the foregoing specific embodiments, or make equivalent substitutions for some of the technical features. Any equivalent structures made using the content of this application's specification and drawings, directly or indirectly applied to other related technical fields, are similarly within the scope of patent protection of this application.
Claims
1. A method of displaying a document interface, characterized by, The method comprises the following steps: receiving and analyzing a target bill interface display request to obtain a corresponding analysis result, specifically comprising: receiving a target bill interface display request sent by a target display end; analyzing the interface display request to obtain model information of the target display end and model information of a bill providing end; taking the model information of the target display end as an index field, identifying the interface size information of the target display end through a preset model interface relationship mapping table; taking the model information of the bill providing end as an index field, identifying the interface size information of the bill providing end through the model interface relationship mapping table, wherein the target display end comprises a target display end based on a mobile end and a target display end based on a PC end; based on the analysis result, obtaining a dynamic style template predefined for different components in the target bill structure, wherein the different components in the target bill structure comprise a title part, a content main part and an end part, the content main part comprises form field content, picture description content and functional buttons; using a pre-constructed template parser to analyze the dynamic style template to obtain analyzed UI interface components; based on the analysis result, obtaining a dynamic rendering component pre-packaged for different components in the target bill structure, specifically comprising: identifying the dynamic rendering type of the title part according to the UI interface component corresponding to the title part, and obtaining the dynamic rendering component corresponding to the title part in the target bill structure; identifying the dynamic rendering type of the content main part according to the UI interface component corresponding to the form field content, picture description content and functional buttons in the content main part, and obtaining the dynamic rendering component corresponding to the form field content, picture description content and functional buttons in the content main part in the target bill structure; identifying the dynamic rendering type of the end part according to the UI interface component corresponding to the end part, and obtaining the dynamic rendering component corresponding to the end part in the target bill structure; respectively using the corresponding dynamic rendering component to dynamically process the UI interface component corresponding to the different components in the target bill structure; mapping the dynamic processing result to a preset display interface to complete the interface display of the target bill.
2. The method of claim 1, wherein Before the step of obtaining a dynamic style template predefined for different components in the target bill structure based on the analysis result, the method further comprises: identifying the font size of the text content in the title part, the content main part and the end part in the bill providing end according to the interface size information of the bill providing end; identifying the display proportion relationship of the title part, the content main part and the end part with the overall interface of the bill providing end respectively according to the interface size information of the bill providing end; identifying the display column number and layout information corresponding to the form field content, picture description content and functional buttons in the content main part respectively according to the interface size information of the bill providing end; The template control condition of the dynamic style template is the font size, the display proportion relationship, and the display column number and layout information.
3. The method of claim 2, wherein the single document interface is a web page. The step of obtaining the dynamic style templates respectively predefined for different components in the target single document structure based on the analysis result specifically includes: According to the interface size information of the target display end and the template control condition, the font size of the text content of the title part in the target display end, and the display proportion relationship of the title part in the target display end are determined. Based on the font size of the text content of the title part in the target display end and the display proportion relationship of the title part in the target display end, the dynamic style template corresponding to the title part is constructed. According to the interface size information of the target display end and the template control condition, the font size of the text content of the content main part in the target display end, and the interface position information respectively corresponding to the form field content, the picture description content, and the functional button in the content main part in the target display end are determined. Based on the font size of the text content of the content main part in the target display end and the interface position information respectively corresponding to the form field content, the picture description content, and the functional button in the content main part in the target display end, the dynamic style template corresponding to the content main part is constructed. According to the interface size information of the target display end and the template control condition, the font size of the text content of the end part in the target display end, and the display proportion relationship of the end part in the target display end are determined. Based on the font size of the text content of the end part in the target display end and the display proportion relationship of the end part in the target display end, the dynamic style template corresponding to the end part is constructed.
4. The method of claim 1, wherein Before the step of obtaining the dynamic rendering components respectively packaged for different components in the target single document structure based on the analysis result is executed, the method further includes: According to the differences of the UI interface components, dynamic rendering components of different rendering types are respectively set, wherein the dynamic rendering components of different rendering types include dynamic rendering components based on condition judgment, dynamic rendering components based on loading mode, and dynamic rendering components based on routing.
5. The method of claim 1, wherein the single document interface is a web page. The step of respectively utilizing the corresponding dynamic rendering components to dynamically process the UI interface components respectively corresponding to different components in the target single document structure specifically includes: The dynamic rendering component corresponding to the title part in the target single document structure is started, and whether the title part reaches the specified dynamic rendering condition is judged according to the dynamic rendering type of the title part. If the title part reaches the specified dynamic rendering condition, the UI interface component corresponding to the title part is dynamically rendered by the dynamic rendering component to complete the dynamic generation of the title part. starting the dynamic rendering component corresponding to the form field content, the picture description content and the functional button in the content main part in the target document structure, and judging whether the form field content, the picture description content and the functional button in the content main part meet the prescribed dynamic rendering condition according to the dynamic rendering type corresponding to the form field content, the picture description content and the functional button in the content main part; if the form field content, the picture description content and the functional button in the content main part meet the prescribed dynamic rendering condition, then dynamically rendering the UI interface component corresponding to the form field content, the picture description content and the functional button in the content main part by using the corresponding dynamic rendering component, so as to complete the dynamic generation of the content main part; starting the dynamic rendering component corresponding to the end part in the target document structure, and judging whether the end part meets the prescribed dynamic rendering condition according to the dynamic rendering type of the end part; if the end part meets the prescribed dynamic rendering condition, then dynamically rendering the UI interface component corresponding to the end part by using the dynamic rendering component, so as to complete the dynamic generation of the end part.
6. The method of claim 1, wherein the single document interface is a web page. The step of mapping the dynamic processing result to the preset display interface to complete the interface display of the target document specifically includes: obtaining the interface address information of the target display end; sending the dynamically generated title part, content main part and end part to the display interface in sequence through the interface address information; sequentially splicing the dynamically generated title part, content main part and end part according to the sending order to obtain the interface display result of the target document.
7. A document interface display device, characterized by comprising: The method specifically includes: a display request analysis module configured to receive and analyze a target document interface display request to obtain a corresponding analysis result, specifically including: receiving a target document interface display request sent by a target display end; analyzing the interface display request to obtain the model information of the target display end and the model information of a document providing end; taking the model information of the target display end as an index field and identifying the interface size information of the target display end through a preset model interface relationship mapping table; taking the model information of the document providing end as an index field and identifying the interface size information of the document providing end through the model interface relationship mapping table, wherein the target display end includes a target display end based on a mobile end and a target display end based on a PC end; a dynamic style template acquisition module configured to acquire, based on the analysis result, a dynamic style template predefined for different components in a target document structure, wherein the different components in the target document structure include a title part, a content main part and an end part, and the content main part includes form field content, picture description content and a functional button; a UI interface component acquisition module configured to analyze the dynamic style template by using a pre-constructed template parser to obtain each analyzed UI interface component. The dynamic rendering component acquisition module is configured to acquire, based on the parsing result, dynamic rendering components respectively pre-packaged for different components in the target document structure, and specifically includes: According to the UI interface component corresponding to the title part, a dynamic rendering type of the title part is identified, and a dynamic rendering component corresponding to the title part in the target document structure is acquired; According to the UI interface components respectively corresponding to the form field content, the picture description content, and the functional button in the content main part, dynamic rendering types respectively corresponding to the form field content, the picture description content, and the functional button in the content main part are identified, and dynamic rendering components respectively corresponding to the form field content, the picture description content, and the functional button in the content main part in the target document structure are acquired; According to the UI interface component corresponding to the end part, a dynamic rendering type of the end part is identified, and a dynamic rendering component corresponding to the end part in the target document structure is acquired; The UI interface component dynamic rendering module is configured to dynamically process the UI interface components respectively corresponding to different components in the target document structure by using the corresponding dynamic rendering components. The interface mapping display module is configured to map the dynamic processing result to a preset display interface to complete interface display of the target document.
8. A computer device, comprising: The computer readable storage medium stores computer readable instructions, and the computer readable instructions are executed by the processor to implement the steps of the document interface display method according to any one of claims 1 to 6.
9. A computer-readable storage medium, characterized in that, The computer readable storage medium stores computer readable instructions, and the computer readable instructions are executed by the processor to implement the steps of the document interface display method according to any one of claims 1 to 6.
Citation Information
Patent Citations
Method and device for displaying dynamic control bill interface
CN102819423A
Showing method and system of bills
CN103713901A