Method and apparatus for generating html page, device

CN115268902BActive Publication Date: 2026-10-13QINGDAO HAIER TECH +1
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN202110473137.9
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2021-04-29
Publication Date
2026-10-13
Estimated Expiration
2041-04-29

AI Technical Summary

Technical Problem

而对于一些企业用户而言,通过构建Html(Hyper Text Markup Language,超文本标记语言)页面能够实现表单的申报、审批,业务文件的上传等快捷功能,但通过Excel生成各种表单以及构建Html页面实现表单的申报、审批是独立的两个流程,现有技术无法通过Excel文件构建Html页面

Benefits of technology

[0009]本公开实施例提供的用于生成Html页面的方法及装置、设备,可以实现以下技术效果:通过获取包括若干Sheet页面的Excel文件,Sheet页面内包括若干个Excel组件;对Sheet页面进行解析,获得Sheet页面中Excel组件的类型;根据Excel组件的类型生成React组件;将预设的配置信息填充至React组件中,获取React组件对应的第一JSON数据;创建Schema对象,将第一JSON数据填充到Schema对象的属性字段中,并获取填充后的Schema对象对应的第二JSON数据;将第二JSON数据引入静态页面中,生成与Sheet页面对应的Html页面。通过以上方式能够实现利用Excel文件构建Html页面,由于用户对Excel的操作更加熟悉,在一定程度上能够更方便快捷的构建Html页面,降低了构建Html页面的技术门槛。

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN115268902B_ABST
    Figure CN115268902B_ABST
Patent Text Reader

Abstract

The application relates to the computer technical field and discloses a method for generating an Html page. The method comprises the following steps: obtaining an Excel file; the Excel file comprises a plurality of Sheet pages, and each Sheet page comprises a plurality of Excel components; analyzing the Sheet pages to obtain the types of the Excel components in the Sheet pages; generating React components according to the types of the Excel components; filling preset configuration information into the React components to obtain first JSON data corresponding to the filled React components; creating a Schema object, filling the first JSON data into an attribute field of the Schema object, and obtaining second JSON data corresponding to the filled Schema object; and introducing the second JSON data into a static page to generate an Html page corresponding to the Sheet page. Through the above method, an Html page can be constructed by using an Excel file. Since users are more familiar with the operation of Excel, the Html page can be more conveniently and quickly constructed, and the technical threshold for constructing the Html page is reduced. The application further discloses a device and equipment for generating an Html page.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This application relates to the field of computer technology, and for example to a method, apparatus, or device for generating HTML pages. Background Technology

[0002] With the continuous development of computer technology, extensive user surveys have revealed that Excel, as one of the most well-known digital office software programs, is widely used by users to create various forms for application and approval processes. While some enterprise users can quickly implement form submission, approval, and business document upload functions by building HTML (Hypertext Markup Language) pages, generating various forms from Excel and building HTML pages for form submission and approval are two separate processes. Current technology cannot build HTML pages from Excel files. Summary of the Invention

[0003] To provide a basic understanding of some aspects of the disclosed embodiments, a brief summary is given below. This summary is not intended as a general commentary, nor is it intended to identify key / important components or describe the scope of protection of these embodiments, but rather as a prelude to the detailed description that follows.

[0004] This disclosure provides a method, apparatus, and device for generating HTML pages, enabling the construction of HTML pages from Excel files.

[0005] In some embodiments, the method for generating an HTML page includes: obtaining an Excel file; the Excel file includes several Sheet pages, and each Sheet page includes several Excel components; parsing the Sheet pages to obtain the types of the Excel components in the Sheet pages; generating a React component based on the type; the React component is a front-end component encapsulated using React technology, such as a button component, a dropdown component, and a slider component; filling the React component with preset configuration information, and obtaining the first JSON (JavaScript Object Notation) data corresponding to the filled React component; creating a Schema (data structure model) object, filling the first JSON data into the attribute fields of the Schema object, and obtaining the second JSON data corresponding to the filled Schema object; and importing the second JSON data into a static page to generate an HTML page corresponding to the Sheet pages.

[0006] In some embodiments, the apparatus for generating an HTML page includes: an acquisition module configured to acquire an Excel file; the Excel file includes a plurality of Sheet pages, each Sheet page including a plurality of Excel components; a parsing module configured to parse the Sheet pages to obtain the types of the Excel components in the Sheet pages; a first generation module configured to generate a React component based on the types; a first filling module configured to fill the React component with preset configuration information and acquire first JSON data corresponding to the filled React component; a second filling module configured to create a Schema object, fill the first JSON data into the attribute fields of the Schema object, and acquire second JSON data corresponding to the filled Schema object; and a second generation module configured to import the second JSON data into a static page to generate an HTML page corresponding to the Sheet pages.

[0007] In some embodiments, the apparatus for generating HTML pages includes a processor and a memory storing program instructions, the processor being configured to execute the method for generating HTML pages as described above when executing the program instructions.

[0008] In some embodiments, the device includes the apparatus described above for generating HTML pages.

[0009] The method, apparatus, and device for generating HTML pages provided in this disclosure can achieve the following technical effects: By acquiring an Excel file containing several Sheet pages, each Sheet page including several Excel components; parsing the Sheet pages to obtain the types of the Excel components; generating React components based on the types of the Excel components; filling the React components with preset configuration information to obtain the first JSON data corresponding to the React components; creating a Schema object, filling the attribute fields of the Schema object with the first JSON data, and obtaining the second JSON data corresponding to the filled Schema object; and importing the second JSON data into a static page to generate an HTML page corresponding to the Sheet pages. This method enables the construction of HTML pages using Excel files. Since users are more familiar with Excel operations, this method facilitates faster and more convenient HTML page construction, lowering the technical barrier to HTML page creation.

[0010] The above general description and the description below are exemplary and illustrative only and are not intended to limit this application. Attached Figure Description

[0011] One or more embodiments are illustrated by way of example with reference to the accompanying drawings. These illustrations and drawings do not constitute a limitation on the embodiments. Elements having the same reference numerals in the drawings are shown as similar elements. The drawings are not to be scaled. And wherein:

[0012] Figure 1 This is a schematic diagram of a method for generating HTML pages provided in an embodiment of this disclosure;

[0013] Figure 2 This is a schematic diagram of an apparatus for generating HTML pages provided in an embodiment of this disclosure;

[0014] Figure 3 This is a schematic diagram of another apparatus for generating HTML pages provided in an embodiment of this disclosure. Detailed Implementation

[0015] To provide a more detailed understanding of the features and technical content of the embodiments of this disclosure, the implementation of the embodiments of this disclosure will be described in detail below with reference to the accompanying drawings. The accompanying drawings are for illustrative purposes only and are not intended to limit the embodiments of this disclosure. In the following technical description, for ease of explanation, several details are used to provide a full understanding of the disclosed embodiments. However, one or more embodiments may still be implemented without these details. In other cases, well-known structures and devices may be simplified in their depiction to simplify the drawings.

[0016] The terms "first," "second," etc., used in the specification, claims, and accompanying drawings of this disclosure are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate for the embodiments of this disclosure described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion.

[0017] Unless otherwise stated, the term "multiple" means two or more.

[0018] In this embodiment of the disclosure, the character " / " indicates that the objects before and after it are in an "or" relationship. For example, A / B means: A or B.

[0019] The term "and / or" describes an association between objects, indicating that three relationships can exist. For example, A and / or B means: A or B, or A and B.

[0020] Combination Figure 1 As shown, this disclosure provides a method for generating HTML pages, including:

[0021] Step S101: Obtain an Excel file; the Excel file includes several sheet pages, and each sheet page contains several Excel components;

[0022] Step S102: Parse the Sheet page to obtain the type of the Excel component in the Sheet page;

[0023] Step S103: Generate a React component based on the type of the Excel component;

[0024] Step S104: Populate the preset configuration information into the React component and obtain the first JSON data corresponding to the populated React component;

[0025] Step S105: Create a Schema object, populate the attribute fields of the Schema object with the first JSON data, and obtain the second JSON data corresponding to the populated Schema object;

[0026] Step S106: Import the second JSON data into the static page to generate an HTML page corresponding to the Sheet page.

[0027] The method for generating HTML pages provided in this disclosure involves: obtaining an Excel file; the Excel file includes several sheets, each containing several Excel components; parsing the sheets to obtain the types of the Excel components; generating React components based on their types; filling the React components with preset configuration information to obtain the first JSON data corresponding to the React components; creating a Schema object; filling the attribute fields of the Schema object with the first JSON data and obtaining the second JSON data corresponding to the filled Schema object; and importing the second JSON data into a static page to generate an HTML page corresponding to the sheets. This method enables the construction of HTML pages using Excel files. Since users are more familiar with Excel operations, this method facilitates faster and more convenient HTML page construction, lowering the technical barrier to HTML page creation.

[0028] Optionally, the Excel file can be uploaded to the Quick SaaS (Software-as-a-Service) platform, and the backend server of the Quick SaaS platform can parse the Sheet pages in the Excel file to obtain the types of Excel components in the Sheet pages.

[0029] Optionally, the Sheet page is parsed to obtain the JSON data of the Excel component; the type of the Excel component is determined from the JSON data of the Excel component.

[0030] Optionally, the Excel component types include: upload type, request for approval type, return type, input information type, etc.

[0031] Optionally, the configuration information corresponding to the Excel component can be determined based on the type of the Excel component.

[0032] Optionally, the configuration information for each type of Excel component includes function configuration information, style configuration information, and size configuration information.

[0033] In some embodiments, the Excel component of the "Please Approve" type has the function configuration information "Please Approve" function, the style configuration information "Please Approve" style, and the size configuration information "Medium Size"; the Excel component of the "Upload" type has the function configuration information "Upload" function, the style configuration information "Upload" style, and the size configuration information "Large Size"; the Excel component of the "Return" type has the function configuration information "Return" function, the style configuration information "Return" style, and the size configuration information "Large Size"; and the Excel component of the "Input Information" type has the function configuration information "Input Information" function, the style configuration information "Input Information" style, and the size configuration information "Small Size".

[0034] Optionally, the range of "small size" in the size configuration information is 1 to 12 cells; the range of "medium size" is 13 to 24 cells; and the range of "large size" is 25 or more cells.

[0035] Optionally, a React component is generated based on the type of the Excel component, including: creating a React component that includes the type of the Excel component in the Sheet page.

[0036] In some embodiments, the React component is of the same type as the Excel component in the Sheet page.

[0037] Optionally, generating a React component based on the type of the Excel component includes: obtaining a component object corresponding to the type of the Excel component, parsing the JSON data of the Excel component in the component object, and generating a React component.

[0038] Optionally, the component object includes style configuration information, size configuration information, function configuration information, and other embedded components of the Excel component.

[0039] Optionally, the component object is set with a tag ID.

[0040] Optionally, obtaining the component object corresponding to the type of the Excel component includes: obtaining the component object corresponding to the tag ID that is the same as the type of the Excel component.

[0041] Optionally, the preset configuration information includes functional configuration information, each with a unique corresponding first ID. Populating the preset configuration information into the React component includes: obtaining the second ID of the React component; and populating the functional configuration information corresponding to the first ID that has a corresponding relationship with the second ID into the React component.

[0042] Optionally, the preset function configuration information includes: upload function, request approval function, return function, input information function, etc.

[0043] Optionally, the first ID is the name corresponding to the preset function configuration information. For example, if the name corresponding to the upload function is shangchuan, then the first ID corresponding to the upload function is shangchuangongneng; if the name corresponding to the request approval function is qingpizhungongneng, then the first ID corresponding to the request approval function is qingpizhungongneng; if the name corresponding to the return function is fanhuigongneng, then the first ID corresponding to the return function is fanhuigongneng; if the name corresponding to the input information function is shuruxinxigongneng, then the first ID corresponding to the input information function is shuruxinxigongneng.

[0044] Optionally, obtaining the second ID of the React component includes: parsing the Sheet page to obtain the location information of the Excel component in the Sheet page; and obtaining the second ID of the React component based on the location information and the type of the Excel component.

[0045] Optionally, the position information of the Excel component includes the cell position of the Excel component within the Sheet page and the page number of the Sheet page containing the Excel component. Optionally, the cell position includes the row number and column number of the cell within the Sheet page.

[0046] Optionally, the second ID of the React component is obtained based on the location information and the type of the Excel component, including: determining the functional configuration information corresponding to the Excel component based on the type of the Excel component; and generating the second ID based on the position of the cell where the Excel component is located, the page number of the Sheet page where the Excel component is located, and the functional configuration information corresponding to the Excel component.

[0047] Optionally, the second ID includes the name of the function configuration information corresponding to the Excel component, the page number of the sheet in which the Excel component is located, and the cell position of the Excel component.

[0048] Optionally, if the names corresponding to the functional configuration information in the first ID and the second ID are the same, it is determined that there is a corresponding relationship between the first ID and the second ID.

[0049] In some embodiments, the format of the second ID is "name of the function configuration information corresponding to the Excel component_page number of the Excel component_cell position of the Excel component". For example, if the second ID of the React component is qingpizhungongneng_page01_f2, and the first ID corresponding to the preset function configuration information is qingpizhungongneng, then it is determined that there is a correspondence between the first ID and the second ID, and the function configuration information "Please approve function" corresponding to the first ID "qingpizhungongneng" is filled into the React component.

[0050] Optionally, the preset configuration information includes style configuration information, and the style configuration information has a unique corresponding first ID; populating the preset configuration information into the React component includes: obtaining the second ID of the React component; and populating the style configuration information corresponding to the first ID that has a corresponding relationship with the second ID into the React component.

[0051] Optionally, the preset style configuration information includes: upload style, request approval style, return style, input information style, etc.

[0052] Optionally, the first ID is the name corresponding to the preset style configuration information. For example, if the name corresponding to the uploaded style is shangchuanyangshi, then the first ID corresponding to the uploaded style is shangchuanyangshi; if the name corresponding to the "please approve" style is qingpizhunyangshi, then the first ID corresponding to the "please approve" style is qingpizhunyangshi; if the name corresponding to the returned style is fanhuiyangshi, then the first ID corresponding to the returned style is fanhuiyangshi; if the name corresponding to the input information style is shuruxinxiyangshi, then the first ID corresponding to the input information style is shuruxinxiyangshi.

[0053] Optionally, the second ID of the React component is obtained based on the location information and the type of the Excel component, including: determining the style configuration information corresponding to the Excel component based on the type of the Excel component; and generating the second ID based on the position of the cell where the Excel component is located, the page number of the Sheet page where the Excel component is located, and the style configuration information corresponding to the Excel component.

[0054] Optionally, the second ID includes the name of the style configuration information corresponding to the Excel component, the page number of the sheet in which the Excel component is located, and the cell position of the Excel component.

[0055] Optionally, if the names corresponding to the style configuration information in the first ID and the second ID are the same, it is determined that there is a corresponding relationship between the first ID and the second ID.

[0056] In some embodiments, the second ID is formatted as "name of the style configuration information corresponding to the Excel component_page number of the Excel component_cell position of the Excel component". For example, if the second ID of the React component is qingpizhunyangshi_page01_f2, and the first ID corresponding to the preset style configuration information is qingpizhunyangshi, then it is determined that there is a correspondence between the first ID and the second ID, and the style configuration information "Please approve style" corresponding to the first ID "qingpizhunyangshi" is filled into the React component.

[0057] Optionally, the preset configuration information includes size configuration information, and the size configuration information has a unique corresponding first ID; filling the preset configuration information into the React component includes: obtaining the second ID of the React component; and filling the size configuration information corresponding to the first ID that has a corresponding relationship with the second ID into the React component.

[0058] Optionally, the preset size configuration information includes: large size, medium size, and small size.

[0059] Optionally, the first ID is the name corresponding to the preset size configuration information. For example, if the name corresponding to the large size is dachicun, then the first ID corresponding to the large size is dachicun; if the name corresponding to the medium size is zhongdengchicun, then the first ID corresponding to the medium size is zhongdengchicun; if the name corresponding to the small size is xiaochicun, then the first ID corresponding to the small size is xiaochicun.

[0060] Optionally, the second ID of the React component is obtained based on the location information and the type of the Excel component, including: determining the size configuration information corresponding to the Excel component based on the type of the Excel component; and generating the second ID based on the position of the cell where the Excel component is located, the page number of the Sheet page where the Excel component is located, and the size configuration information corresponding to the Excel component.

[0061] Optionally, the second ID includes the name corresponding to the size configuration information of the Excel component, the page number of the sheet in which the Excel component is located, and the cell position of the Excel component.

[0062] Optionally, if the names corresponding to the size configuration information in the first ID and the second ID are the same, it is determined that there is a correspondence between the first ID and the second ID.

[0063] In some embodiments, the second ID is formatted as "name corresponding to the size configuration information of the Excel component_page number of the Excel component_cell position of the Excel component". For example, if the second ID of the React component is zhongdengchicun_page01_f2, and the first ID corresponding to the preset size configuration information is zhongdengchicun, then it is determined that there is a correspondence between the first ID and the second ID, and the size configuration information "medium size" corresponding to the first ID "zhongdengchicun" is filled into the React component.

[0064] Optionally, the preset configuration information includes function configuration information, style configuration information, and size configuration information. The preset configuration information has a unique corresponding first ID. Populating the preset configuration information into the React component includes: obtaining the second ID of the React component; and populating the configuration information corresponding to the first ID that has a corresponding relationship with the second ID into the React component.

[0065] Optionally, the preset function configuration information includes: upload function, request approval function, return function, input information function, etc.

[0066] Optionally, the first ID is the name corresponding to the preset function configuration information, the name of the preset style configuration information, and the name of the preset size configuration information. For example, if the name corresponding to the upload function is shangchuangongneng, the name corresponding to the upload style is shangchuanyangshi, and the name corresponding to the large size is dachicun, then the first ID corresponding to the preset configuration information is shangchuangongneng_shangchuanyangshi_dachicun.

[0067] Optionally, the second ID of the React component is obtained based on the location information and the type of the Excel component, including: determining the functional configuration information, style configuration information, and size configuration information of the Excel component based on the type of the Excel component; and generating the second ID based on the position of the cell in which the Excel component is located, the page number of the Sheet in which the Excel component is located, the functional configuration information, style configuration information, and size configuration information of the Excel component.

[0068] Optionally, the second ID includes the name of the function configuration information corresponding to the Excel component, the name of the style configuration information corresponding to the Excel component, the name of the size configuration information corresponding to the Excel component, the sheet number where the Excel component is located, and the cell position where the Excel component is located.

[0069] Optionally, if the names corresponding to the configuration information in the first ID and the second ID are the same, it is determined that there is a correspondence between the first ID and the second ID.

[0070] In some embodiments, the format of the second ID is "name of the configuration information corresponding to the Excel component_page number of the Excel component_cell position of the Excel component". For example, if the second ID of the React component is shangchuangongneng_shangchuanyangshi_dachicun_page01_f2, and the first ID corresponding to the preset configuration information is shangchuangongneng_shangchuanyangshi_dachicun, then it is determined that there is a correspondence between the first ID and the second ID, and the configuration information "upload function_upload style_large size" corresponding to the first ID "shangchuangongneng_shangchuanyangshi_dachicun" is filled into the React component.

[0071] Optionally, after parsing the Sheet page, the method further includes: determining whether the Sheet page was parsed successfully; and if the Sheet page failed to be parsed, obtaining error information and sending the error information back to the user terminal.

[0072] Combination Figure 2 As shown in the figure, this disclosure provides an apparatus for generating HTML pages, including: an acquisition module 1, a parsing module 2, a first generation module 3, a first filling module 4, a second filling module 5, and a second generation module 6. The acquisition module 1 is configured to acquire an Excel file; the Excel file includes several Sheet pages, and each Sheet page includes several Excel components; the parsing module 2 is configured to parse the Sheet pages to obtain the types of the Excel components in the Sheet pages; the first generation module 3 is configured to generate React components based on the types of the Excel components; the first filling module 4 is configured to fill the React components with preset configuration information and obtain the first JSON data corresponding to the filled React components; the second filling module 5 is configured to create a Schema object, fill the attribute fields of the Schema object with the first JSON data, and obtain the second JSON data corresponding to the filled Schema object; the second generation module 6 is configured to import the second JSON data into a static page to generate an HTML page corresponding to the Sheet pages.

[0073] The apparatus for generating HTML pages provided in this disclosure acquires an Excel file via an acquisition module. The Excel file includes several Sheet pages, each containing several Excel components. The Sheet pages are parsed to obtain the types of the Excel components. React components are generated based on the types of the Excel components. Preset configuration information is populated into the React components, and the first JSON data corresponding to the React components is obtained. A Schema object is created, and the first JSON data is populated into the attribute fields of the Schema object, and the second JSON data corresponding to the populated Schema object is obtained. The second JSON data is imported into a static page to generate an HTML page corresponding to the Sheet pages. This method enables the construction of HTML pages using Excel files. Since users are more familiar with Excel operations, it facilitates faster and more convenient HTML page construction, lowering the technical barrier to HTML page creation.

[0074] Optionally, the acquisition module is also configured to acquire the location information of the Excel component in the Sheet page and the type of the Excel component.

[0075] Optionally, the first generation module is also configured to receive location information and the type of the Excel component sent by the acquisition module, and obtain the second ID of the React component based on the location information and the type of the Excel component.

[0076] Optionally, the first filling module is also configured to obtain preset configuration information.

[0077] Optionally, the preset configuration information includes functional configuration information, each with a unique corresponding first ID. The first population module is also configured to populate the functional configuration information corresponding to the first ID, which has a corresponding relationship with the second ID, into the React component.

[0078] Optionally, the preset configuration information includes style configuration information, each style configuration information having a unique corresponding first ID. The first population module is also configured to populate the style configuration information corresponding to the first ID, which has a corresponding relationship with the second ID, into the React component.

[0079] Optionally, the preset configuration information includes size configuration information, which has a unique corresponding first ID. The first fill module is also configured to fill the style size information corresponding to the first ID that has a corresponding relationship with the second ID into the React component.

[0080] Optionally, the apparatus for generating the HTML page also includes an error reporting module, which is configured to determine whether the Sheet page was successfully parsed; if the Sheet page fails to be parsed, the error reporting module obtains error information.

[0081] Combination Figure 3 As shown, this disclosure provides an apparatus for generating HTML pages, including a processor 100 and a memory 101 storing program instructions. Optionally, the apparatus may further include a communication interface 102 and a bus 103. The processor 100, communication interface 102, and memory 101 can communicate with each other via the bus 103. The communication interface 102 can be used for information transmission. The processor 100 can call the program instructions in the memory 101 to execute the method for generating HTML pages described in the above embodiment.

[0082] Furthermore, the program instructions in the aforementioned memory 101 can be implemented as software functional units and, when sold or used as independent products, can be stored in a computer-readable storage medium.

[0083] The memory 101, as a computer-readable storage medium, can be used to store software programs and computer-executable programs, such as program instructions / modules corresponding to the methods in the embodiments of this disclosure. The processor 100 executes functional applications and data processing by running the program instructions / modules stored in the memory 101, that is, it implements the method for generating HTML pages in the above embodiments.

[0084] The memory 101 may include a program storage area and a data storage area. The program storage area may store the operating system and applications required for at least one function; the data storage area may store data created based on the use of the terminal device. Furthermore, the memory 101 may include high-speed random access memory and may also include non-volatile memory.

[0085] The apparatus for generating HTML pages provided in this disclosure involves: acquiring an Excel file (including several sheets, each containing several Excel components); parsing the sheets to obtain the types of the Excel components; generating React components based on their types; filling the React components with preset configuration information and obtaining the first JSON data corresponding to the React components; creating a Schema object; filling the attribute fields of the Schema object with the first JSON data and obtaining the second JSON data corresponding to the filled Schema object; and importing the second JSON data into a static page to generate an HTML page corresponding to the sheets. This method enables the construction of HTML pages from Excel files. Since users are more familiar with Excel operations, this method facilitates faster and more convenient HTML page construction, lowering the technical barrier to HTML page creation.

[0086] This disclosure provides an apparatus that includes the aforementioned means for generating HTML pages.

[0087] Alternatively, the device may be a server or a computer.

[0088] This device acquires an Excel file; the Excel file contains several sheets, and each sheet contains several Excel components; it parses the sheets to obtain the types of the Excel components; it generates React components based on the component types; it populates the React components with preset configuration information and obtains the first JSON data corresponding to the React components; it creates a Schema object, populates the attribute fields of the Schema object with the first JSON data, and obtains the second JSON data corresponding to the populated Schema object; it then imports the second JSON data into a static page to generate an HTML page corresponding to the sheet pages. This method enables the construction of HTML pages from Excel files. Since users are more familiar with Excel operations, this method facilitates faster and more convenient HTML page construction, lowering the technical barrier to entry for HTML page creation.

[0089] This disclosure provides a computer-readable storage medium storing computer-executable instructions configured to perform the method described above for generating HTML pages.

[0090] This disclosure provides a computer program product, which includes a computer program stored on a computer-readable storage medium. The computer program includes program instructions that, when executed by a computer, cause the computer to perform the above-described method for generating HTML pages.

[0091] The aforementioned computer-readable storage medium may be a transient computer-readable storage medium or a non-transitory computer-readable storage medium.

[0092] The technical solutions of this disclosure can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes one or more instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the method described in this disclosure. The aforementioned storage medium can be a non-transitory storage medium, including: a USB flash drive, a portable hard drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, and other media capable of storing program code; it can also be a transient storage medium.

[0093] The foregoing description and accompanying drawings fully illustrate embodiments of this disclosure to enable those skilled in the art to practice them. Other embodiments may include structural, logical, electrical, procedural, and other changes. The embodiments represent only possible variations. Individual components and functions are optional unless explicitly required, and the order of operation may vary. Parts and features of some embodiments may be included in or replace parts and features of other embodiments. Moreover, the terminology used in this application is for describing embodiments only and is not intended to limit the claims. As used in the description of embodiments and claims, the singular forms “a,” “an,” and “the” are intended to equally include the plural forms unless the context clearly indicates otherwise. Similarly, the term “and / or” as used in this application means including one or more of the associated listed items and all possible combinations thereof. Additionally, when used in this application, the term "comprise" and its variations "comprises" and / or "comprising" refer to the presence of stated features, integrals, steps, operations, elements, and / or components, but do not exclude the presence or addition of one or more other features, integrals, steps, operations, elements, components, and / or groups thereof. Without further limitations, an element defined by the phrase "comprises a..." does not exclude the presence of other identical elements in the process, method, or apparatus that includes said element. In this document, each embodiment may focus on the differences from other embodiments, and similar or identical parts between embodiments can be referred to mutually. For methods, products, etc., disclosed in the embodiments, if they correspond to the method section disclosed in the embodiments, the relevant parts can be referred to the description of the method section.

[0094] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of the embodiments of this disclosure. Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0095] The methods and products (including but not limited to devices and equipment) disclosed in the embodiments herein can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For instance, the division of units may be merely a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the shown or discussed units may be through some interfaces, and the indirect coupling or communication connection between devices or units may be electrical, mechanical, or other forms. The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of the units may be selected to implement this embodiment according to actual needs. Furthermore, the functional units in the embodiments of this disclosure may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0096] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. In some alternative implementations, the functions marked in the blocks may occur in a different order than that shown in the drawings. For example, two consecutive blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. In the descriptions corresponding to the flowcharts and block diagrams in the accompanying drawings, the operations or steps corresponding to different blocks may also occur in a different order than disclosed in the description, and sometimes there is no specific order between different operations or steps. For example, two consecutive operations or steps may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. Each block in a block diagram and / or flowchart, and combinations of blocks in a block diagram and / or flowchart, can be implemented using a dedicated hardware-based system that performs the specified function or action, or using a combination of dedicated hardware and computer instructions.

Claims

1. A method for generating HTML pages, characterized in that, include: Obtain an Excel file; the Excel file includes several sheet pages, and each sheet page includes several Excel components; The Sheet page is parsed to obtain the JSON data of the Excel component in the Sheet page, and the type of the Excel component is determined from the JSON data; wherein, the type of the Excel component includes: upload type, request approval type, return type, and input information type; Generate React components based on the type; The preset configuration information is populated into the React component, and the first JSON data corresponding to the populated React component is obtained; wherein, the preset configuration information includes: function configuration information, style configuration information and size configuration information; Create a Schema object, populate the attribute fields of the Schema object with the first JSON data, and obtain the second JSON data corresponding to the populated Schema object; The second JSON data is imported into the static page to generate an HTML page corresponding to the Sheet page.

2. The method according to claim 1, characterized in that, Generate React components based on the type, including: Create a React component that includes the type of the Excel component in the Sheet page.

3. The method according to claim 1, characterized in that, The functional configuration information has a unique corresponding first ID, and the step of filling the preset configuration information into the React component includes: Get the second ID of the React component; The functional configuration information corresponding to the first ID that has a corresponding relationship with the second ID is populated into the React component.

4. The method according to claim 1, characterized in that, The style configuration information has a unique corresponding first ID; the step of filling the preset configuration information into the React component includes: Get the second ID of the React component; The style configuration information corresponding to the first ID that corresponds to the second ID is populated into the React component.

5. The method according to claim 1, characterized in that, The size configuration information has a unique corresponding first ID; the step of filling the preset configuration information into the React component includes: Get the second ID of the React component; The size configuration information corresponding to the first ID that corresponds to the second ID is populated into the React component.

6. The method according to any one of claims 3 to 5, characterized in that, Obtain the second ID of the React component, including: The Sheet page is parsed to obtain the location information of the Excel component within the Sheet page; The second ID of the React component is obtained based on the location information and the type.

7. The method according to claim 2, characterized in that, After parsing the Sheet page, the following is also included: Determine whether the Sheet page was successfully parsed; If the Sheet page fails to parse, an error message is obtained and sent back to the user terminal.

8. An apparatus for generating HTML pages, characterized in that, The apparatus comprising the method for generating HTML pages as described in claim 1, wherein the apparatus comprises: The acquisition module is configured to acquire an Excel file; the Excel file includes several sheet pages, and each sheet page includes several Excel components; The parsing module is configured to parse the Sheet page to obtain the type of the Excel component in the Sheet page; The first generation module is configured to generate React components based on the type; The first filling module is configured to fill the React component with preset configuration information and obtain the first JSON data corresponding to the filled React component; The second filling module is configured to create a Schema object, fill the first JSON data into the attribute fields of the Schema object, and obtain the second JSON data corresponding to the filled Schema object; The second generation module is configured to import the second JSON data into a static page and generate an Html page corresponding to the Sheet page.

9. An apparatus for generating HTML pages, comprising a processor and a memory storing program instructions, characterized in that, The processor is configured to perform, when executing the program instructions, the method for generating an HTML page as described in any one of claims 1 to 7.

10. A device, characterized in that, Includes the apparatus for generating HTML pages as described in claim 9.

Citation Information

Patent Citations

  • Method and device for generating form based on an Excel template, and computer equipment

    CN111680479A

  • Webpage configuration processing method and device, equipment and storage medium

    CN112287266A