CN115544416A

CN115544416A - Custom export method based on WEB terminal HTML (hypertext markup language) to Excel (Excel)

Info

Publication number: CN115544416A
Application number: CN202211176184.8A
Authority: CN
Inventors: 高志远; 金波
Original assignee: Baizhuo Network Technology Co ltd
Current assignee: Baizhuo Network Technology Co ltd
Priority date: 2022-09-26
Filing date: 2022-09-26
Publication date: 2022-12-30

Abstract

A self-defined export method based on web-side HTML (hypertext markup language) to Excel downloads an HTML page in an Excel form, and adjusts the style so as to adapt to the display form of Excel: 1) The method comprises the steps that a user selects document types required by the user at a web end to support 15 document types, and then sets template formats required by the user in a TinyMCE rich text and covers the existing main template formats; 2) Selecting a document type on a detail page or a list page needing to export Excel by a user, selecting the document type on the detail page or the list page needing to be printed, clicking to export, clicking to print, selecting and selecting a self-set template, and clicking to export Excel; 3) And (4) putting the parsed html structure and the dependent css3 file into a newly generated iframe, and then exporting the parsed file through a Blob object.

Description

Custom export method based on WEB terminal HTML (hypertext markup language) to Excel

Technical Field

The invention relates to the technical field of front-end development of computer engines and development platforms.

Background

To complete a software platform with Saas, the product as developed is a Saas-type internet product that manages inventory for various types of businesses. Because the method is related to daily document management of enterprises, related export functions are required, ordinary page export does not meet the requirements of users of products of companies, and the requirement of self-defined export Excel functions is met.

For example, the types of documents of managed products are more, however, users have more custom requirements for exporting business documents, the simple and direct function of exporting documents directly through a webpage cannot meet the requirements of the users, and for business documents, the users often need to export data and then export documents through adjustment of other document editing software and processing of data display formats, so that the experience of the users is not good, and the first requirement is to meet the requirements of the users for the products.

To solve this pain point, existing implementations basically fail to solve the existing problems. The early self-defined export is based on the Java logic call of back end, and the export module of calling the computer through the back end carries out the self-defined export, but the browser type that supports is few, except early Ie8, later google and fire fox browser do not support, and the interface is laggard behind. Or the export can be customized later by downloading a small plug-in installation, and most of the export has requirements on the system, such as incompatibility with win10, macOS and the like. Or the function is available, the requirements on the system are relaxed greatly, but the charging price is high. To solve the problem, a compatible method is adopted, and the best compatible method is to develop the problem through a cross-platform language and have compatibility to various environments. Then, the function development is carried out on the browser through JavaScript, so that the functionality can be met, various systems can be compatible, and the performance is also sufficiently ensured. In this case, custom export functions based on HTML to Excel were developed.

The template editor compiled by the Tinymce rich text is a comprehensive and easy-to-use rich text editor with strong functions, and other editor plug-ins are forbidden when the plug-in is used. And Nodejs is a JavaScript running environment based on a Chrome V8 engine, a development platform for running the JavaScript on a server side can be used for conveniently building network application with high response speed and easy expansion. Js is an indispensable tool for front-end workers. Js occupies a place in most fields, especially in the I/O intensive type. Such as Web development, microservices, front-end construction, etc. Node.js is used as a background development language for many large-scale websites, and most of the large-scale websites are node.js used for front-end rendering and architecture optimization. Js, e.g., webpack is a powerful packager, and fact/Vue is a mature front-end componentization framework. But there is no precedent for application on printing.

Disclosure of Invention

In order to solve the problems in the prior art, the invention aims to realize the function of self-defining export of Excel through a front-end language (JavaScript), and particularly to complete the improvement of the software platform of Saas on the daily document management export function of an enterprise.

The technical scheme of the invention is that a custom export method based on web end HTML to Excel downloads an HTML page in an Excel form, and adjusts the style so as to adapt to the display form of Excel, and the method comprises the following steps:

step 1: the method comprises the steps that a user selects document types required by the user at a web end, supports 15 document types, and respectively comprises purchasing warehousing, selling returning, other warehousing, checking warehousing, transferring warehousing, production warehousing, internal receiving, checking ex-warehouse, selling ex-warehouse, purchasing returning, other ex-warehouse, transferring ex-warehouse, purchasing orders and selling orders, then sets template formats required by the user in a TinyMCE rich text and covers the existing main template formats, including font sizes and paper sizes (A3-A6 and the like) to be printed, the set templates classify page templates through nodes, divide data, perform bonding operation through data types, divide large data into different parts, and then store the parts in a storage module;

and 2, step: and selecting the document type on the detail page or the list page needing to export the Excel by a user, selecting the document type on the detail page or the list page needing to be printed, clicking to export, clicking to print, selecting and selecting a template set by the user, and clicking to export the Excel. Analyzing and classifying the obtained data by acquiring detailed data of a template, converting the obtained data into an Html object, analyzing according to a Dom tree, classifying Table elements and non-Table elements, performing Base 64-bit processing on a picture, setting a long and wide style of canvas by creating a canvas object, performing character string splitting on the picture by drawing picture attributes of the canvas, and performing 64-bit processing on the picture; matching and classifying fields set in the template and data given by a back end, and carrying out one-to-one classification processing on the data in the form;

and 3, putting the analyzed html structure and the dependent css3 file into a newly generated iframe, and then exporting the analyzed file through a Blob object.

The set template format required by the user specifically comprises 15 functional templates which are a purchasing warehousing template, a selling returning template, other warehousing templates, an checking warehousing template, a transferring warehousing template, a production warehousing template, an internal receiving template, a checking ex-warehouse template, a selling ex-warehouse template, a purchasing returning template, other ex-warehouse templates, a transferring ex-warehouse template, a purchasing order template and a selling order template, and each functional module is independent and coexists.

In step 2, adding page dom elements when analyzing the styles one by one for the time and the field fields of the pictures which need special processing.

The tag elements of HTML are the elements nodes of the DOM, which provide the structure of a document. But the document itself does not contain anything, so the element node may contain other nodes.

And (4) adding page dom elements to fields needing special processing, such as time and picture fields, in the process of analyzing the styles one by one.

The cs 3 file refers to a Cascading Style sheet (english full name: cascading Style Sheets), which is a computer language used to express file styles such as HTML (an application of standard general markup language) or XML (a subset of standard general markup language).

A self-defined export method based on web-side HTML (hypertext markup language) to Excel is characterized in that a set template format required by a user specifically comprises 12 functional templates, and each functional module depends on each other.

Has the beneficial effects that:

(1) The invention realizes the self-defined export function of converting HTML of a web end into Excel through JavaScript of a front-end script language, can realize cross-platform including supporting window and MacOs systems because the Excel is exported by self-defining through a browser, can realize the self-defined export function of the Excel as long as the browser can run, and is efficient, convenient and greatly convenient for users to use.

(2) Because the middleware is made by the node, the method has extremely high advantages of system compatibility and adaptability to different environments, the software sensitivity is kept forever in the operation of the system, the node bottom layer is written based on c + +, and the single-core flow is operated. Although multi-core has speed advantage in high-concurrency projects, under a single-core application scenario in single-core flow operation, more cores in a single core have inherent speed advantage.

Drawings

Fig. 1 is a schematic system structure diagram of a node request in the embodiment of the present invention.

Fig. 2 is a flow of data analysis with the node core module.

FIG. 3 is a flow diagram of an embodiment of a custom derived Excel template.

Detailed Description

FIG. 1 is a schematic diagram of a system architecture for implementing a custom template method in accordance with the present invention; front end module group: the module is mainly implemented in the module by releasing some scripts at the front end, providing triggers for various functions, providing access to user experience functions, and embodying styles and interactions including UIs.

Setting templates, classifying the page templates through the nodes, and then storing the page templates in a database; the flow of how to work is as follows: in the Node core module group, the Node module mainly processes some processing of the backend data, including request type, data format, and the size of the discourse structure, and is a core area for processing and calculation, and a module generated for better serving the data to the front-end module group. The method comprises the steps of acquiring which type of document is currently transmitted data according to the summarized data transmitted to a node core module by a page, matching the document type to a dictionary model with the node core module, performing one-to-one matching classification on document fields after acquiring a matching model, processing and combining the document fields, and storing the document fields in a storage module.

Ordinary derived Excel model: the Excel function module is mainly displayed and processed, and basic export functions are realized by calling corresponding function selection types of the node module.

And (3) self-defining and exporting an Excel model: the method mainly comprises the steps of processing a front-end module and analyzing data by a node core module, then leading out Excel processing of a generated template in and out of the front-end module, obtaining which type of document the currently transmitted data is according to summarized data transmitted to the node core module by a page, obtaining data stored in a database according to the type of the document, then obtaining a matching model and then carrying out reverse matching classification on document fields, and processing a data structure which can be processed by a front end. Performing Base 64-bit processing on a picture, setting a length and width style of the Canvas through newly creating a Canvas object, performing character string splitting on the picture through the drawing picture attribute of the Canvas, and performing 64-bit processing on the picture, wherein the Canvas is an element in HTML5, and a developer can draw a series of figures on the Canvas. And carrying out one-to-one correspondence on the obtained data through a dictionary arranged at the front end, instantiating a data structure required by a user, transmitting the data to the front end, loading the data by calling a Blob object in a WebApi of a browser, initializing a hyperlink, triggering a click event of a target, and realizing the function of exporting Excel by self-definition.

And 3, putting the analyzed html structure and the dependent css3 file into a newly generated iframe, dynamically setting css styles, acquiring corresponding style data according to a style model selected by a user, loading the data into corresponding Dom elements one by one, refreshing Dom objects, and calling a set function module to finish the self-defining of a specified style template to derive an Excel function. CSS is a cascading style sheet, and CSS styles can implement a CSS style control page.

The self-defined export method based on the conversion from web-side HTML to Excel specifically comprises 12 functional templates, and each functional module depends on each other. These modules complement each other and cooperate with each other, and each module is of no more importance. The flow of data analysis with the node core module is shown in fig. 2, and the self-set template can be selected, how to acquire the detailed data of the template, the acquired data is analyzed and classified, the picture is subjected to Base64 bit processing, the front-end module acquires data display data, the ndoe core module processes the data and interacts with the database, and the data are stored and read.

As shown in fig. 3, this is a flowchart of an embodiment of custom export from HTML to Excel, and at the beginning, the document types are preferably selected, and there are 15 types of document types, which include purchase warehousing, sales return, other warehousing, inventory warehousing, transfer warehousing, production warehousing, internal reception, inventory ex-warehousing, sales ex-warehousing, purchase return, other ex-warehousing, transfer ex-warehousing, purchase order, sales order, and others. After a receipt is selected, paper types of the template are set, wherein the paper types comprise A4-A6 and triple-second-third, and then specific contents of the template are set, wherein the specific contents comprise self-contained header, header and tail self-contained data, the template style can also be set in a self-defined mode, and the template can be stored after clicking is confirmed.

And selecting a self-built template on the detail page of the document to export Excel operation.

Claims

1. A self-defined export method based on web end HTML to Excel is characterized in that an HTML page is downloaded in an Excel form, and the style is adjusted to adapt to the display form of Excel; the method comprises the following steps:

step 1: the method comprises the steps that a user selects document types required by the user at a web end, supports 15 document types, and respectively comprises the steps of purchasing and warehousing, selling and returning goods, warehousing other warehousing, checking and warehousing, transferring and warehousing, producing and warehousing, internal receiving, checking and ex-warehousing, selling and ex-warehousing, purchasing and returning goods, transferring and ex-warehousing, purchasing orders and selling orders, then sets template formats required by the user in a TinyMCE rich text and covers the existing template formats, including font sizes and paper sizes to be printed, and the set templates classify page templates through nodes and then store the page templates in a storage module;

and 2, step: selecting a document type on a detail page or a list page needing to export Excel by a user, selecting the document type on the detail page or the list page needing to be printed, clicking to export, clicking to print, selecting and selecting a template set by the user, and clicking to export the Excel; analyzing and classifying the obtained data by acquiring detailed data of a template, converting the obtained data into an Html object, analyzing according to a Dom tree, classifying Table elements and non-Table elements, performing Base 64-bit processing on a picture, setting a long and wide style of canvas by creating a canvas object, performing character string splitting on the picture by drawing picture attributes of the canvas, and performing 64-bit processing on the picture; matching and classifying fields set in the template and data given by a back end, and carrying out one-to-one classification processing on the data in the form;

and 3, putting the parsed html structure and the dependent css3 file into a newly generated iframe, and then exporting the parsed file through a Blob object.

2. The exporting method from web-side HTML to Excel according to claim 1, wherein the set required template format specifically includes 14 functional templates, which are respectively a purchase warehousing template, a sales return template, other warehousing templates, an inventory warehousing template, a transfer warehousing template, a production warehousing template, an internal reception template, an inventory ex-warehousing template, a sales ex-warehousing template, a purchase return template, other ex-warehousing templates, a transfer ex-warehousing template, a purchase order template, a sales order template, and each functional module is independent and coexistent.

3. The exporting method from web-end HTML to Excel according to claim 1, wherein in step 2, the page dom element is added to the field of the time and the picture which need to be specially processed when the style is analyzed one by one.

4. The exporting method for converting HTML (hypertext markup language) into Excel based on the web end as claimed in claim 1, wherein the set templates classify the page templates through the nodes and then store the page templates in the database; the working process comprises the following steps: in the Node core module group, the Node module processes some processing of the back end data, including the type of the request, the format of the data and the size of the discourse structure; the method comprises the steps of acquiring which type of document is currently transmitted data according to the summarized data transmitted to a node core module by a page, matching the document type to a dictionary model with the node core module, performing one-to-one matching classification on document fields after acquiring a matching model, processing and combining the document fields, and storing the document fields in a storage module.

5. The export method from HTML to Excel based on web site as claimed in claim 4, wherein the ordinary export Excel model: and displaying, processing and exporting the Excel function module, and realizing a basic exporting function by calling the corresponding function type selection of the node module.

6. The exporting method for converting HTML (hypertext markup language) into Excel based on web end according to claim 1, wherein the exporting Excel model is customized: the method comprises the steps that data are analyzed through a front-end module, then generated templates are led out of the front-end module to be processed, excel processing is conducted, the current transmitted data is obtained according to summary data transmitted to the node core module through a page, the data stored in a database are obtained according to the type of the document, then a matching model is obtained, then reverse matching classification is conducted on the document field, and the processed data at the front end are processed; performing Base 64-bit processing on the picture, setting a length and width style of the canvas through a newly-built canvas object, splitting a character string of the picture through the drawing picture attribute of the canvas, and performing 64-bit processing on the picture; and finally, realizing the function of self-defining the printing module.