Method for downloading webpage as pdf

Abstract

The invention provides a method for downloading a webpage as a pdf. The method comprises the steps that S11, elements needing to be downloaded in an html page are identified, a main downloading area is constructed according to the identification, all the elements needing to be downloaded are put into corresponding modules according to the identification, and modules needing to be downloaded are formed; s12, elements in the module needing to be downloaded are sequentially subjected to initial processing; s13, constructing an element downloading module, inserting the primary processing element into the element downloading module, and then performing reprocessing on the primary processing element; s14, cutting elements which cannot be accommodated in the pdf download page through a cutting algorithm; and S15, generating a canvas object from the cut elements by utilizing html2canvas, inserting the canvas object into a pdf downloading page through a jspdf plug-in, and generating a pdf file for downloading. According to the method and the device, the to-be-downloaded elements of the html are identified and processed through the cutting algorithm, so that the to-be-downloaded elements are accurately cut, and the cut elements can be downloaded into the pdf file capable of being paged on the basis of one-to-one reduction of the webpage.

Description

Technical Field

[0001] The present invention relates to the technical field of web page conversion, and in particular to a method for downloading a web page as a PDF. Background Art

[0002] Downloading web pages as PDF is a common demand scenario. The first type is to rearrange the web page data on the server side, write the content into the PDF file using the server-side language, and then return it to the client for download. This type of method generally cannot restore the original style of the web page well, and it consumes server resources. The second type is to use the browser's own functions or peripheral functions for downloading. The disadvantage of this type is that it cannot be well integrated into the b / s architecture program. It can only be provided to users in the form of plug-ins, and the controllable granularity is small. Many areas that require specific control cannot be well controlled. The third type is based on JavaScript and basic class library development. Generally, this traditional approach supports poor paging or even no paging, cannot accurately determine the paging position, and the overall download effect is not beautiful. Summary of the invention

[0003] In view of this, the purpose of the present invention is to provide a method for downloading a web page as a PDF, so as to solve the technical problems that when a web page is downloaded as a PDF, the original style of the web page cannot be restored well and the PDF file cannot be paginated.

[0004] To achieve the above-mentioned object of the invention, the present invention provides a method for downloading a web page as a PDF, the method comprising:

[0005] S11. First, in the HTML page, elements to be downloaded and elements to be ignored are marked, and a main download area is constructed according to the marks to store the elements to be downloaded. According to the marks, all elements to be downloaded are placed into corresponding modules to form modules to be downloaded;

[0006] S12, pre-processing the elements in the module to be downloaded in step S11 in sequence to obtain pre-processed elements;

[0007] S13, construct a div element with export-temp-item logo, insert it into the main download area to obtain an element download module, which is used to store the elements in each PDF download page, insert the initial processing element in step S12 into the element download module, and obtain the width and height of the initial processing element in the PDF download page, and then reprocess the elements in the element download module;

[0008] S14, cutting the elements that cannot be accommodated in the PDF download page by using a cutting algorithm to obtain the elements that have been cut;

[0009] S15. Use html2canvas to generate a canvas object from the elements cut in step S14, insert the canvas object into the pdf download page through the jspdf plug-in, and generate a pdf file for download.

[0010] Furthermore, in step S11, the identifier includes export-page-container, export-item and dignore, the export-page-container identifier is used to identify the unique main download area, the export-item identifier is used to identify the element to be downloaded, and the dignore identifier is used to prevent the element identified by it from being generated into the PDF.

[0011] Furthermore, in step S11, a main download area is constructed according to the identifier, specifically including:

[0012] S21. By using the export-page-container identifier, a new area identical to the HTML page is constructed in the HTML page;

[0013] S22. Add a new unique identifier export-temp-container for new area style customization;

[0014] S23. Clear all elements in the new area, and fill the cleared new area with elements identified by export-item to construct the main download area.

[0015] Furthermore, in step S11, all elements to be downloaded are placed into corresponding modules according to the identifiers to form the modules to be downloaded, which specifically include:

[0016] S31. Use the export-force tag to identify the hidden elements that need to be downloaded, and store the modules that need to be downloaded in order;

[0017] S32, collecting the iframe elements marked by export-item, and storing the modules to be downloaded in order;

[0018] S33. Remove the elements marked with export-item more than twice.

[0019] Furthermore, in step S12, the elements in the module to be downloaded in step S11 are processed sequentially, specifically including:

[0020] S41, obtaining modules to be downloaded, and copying a new module newE for each module in the modules to be downloaded. If the new module newE has an export-force identifier, the new module newE is forcibly displayed, and the elements in the new module newE that are identified by dignore are removed;

[0021] S42. Customize the custom style by processing the export-style tag and the export-class tag;

[0022] S43. Add the export-split-text tag to handle text segmentation, which is used to split text into multiple span tags.

[0023] Furthermore, in step S13, the elements in the element download module are reprocessed, specifically including:

[0024] S51, refreshing and redrawing the chart elements to adapt the chart elements to the width and size of the PDF download page;

[0025] S52. For a table element that is scaled beyond the width of the PDF download page, the width of the table element in the PDF download page is calculated, and the expression is:

[0026]

[0027] Among them, ch is the width occupied by the table element in the PDF download page, tw is the width of the table element, cw is the width of the main element of the download area, and th is the original height of the table;

[0028] S53. Use the transform:scale property of CSS3 to set the zoom ratio, and set transform-origin:lefttop to return it to the upper left position;

[0029] S54, monitor the onload event of all pictures, and determine whether the picture width and height exceed the width and height of the PDF download page for scaling.

[0030] Further, in step S14, the elements that cannot be accommodated in the PDF download page are cut using a cutting algorithm, specifically including:

[0031] S61. If the current element height exceeds the height that can be accommodated by the PDF download page, it will be cut. The calculation formula is as follows:

[0032] remainHeight=maxHeight-existHeight+curHeight

[0033] Among them, remainingHeight is the remaining accommodating height, maxHeight is the maximum height, existingHeight is the height of the existing element, and curHeight is the height of the current element;

[0034] S62, cutting the table elements by using a cutting algorithm;

[0035] S63. Cut common elements using a cutting algorithm, where the common elements are elements other than table elements.

[0036] Furthermore, in step S62, the table elements are cut using a cutting algorithm, specifically including:

[0037] S71, take out the header, the first line is the header by default, or select any line as the header by adding the flag export-nohead, if the remaining height of the PDF download page is less than the header height, the header is returned as the unprocessed element remainE, and the newE module that accommodates the unprocessed element remainE is returned empty;

[0038] S72, copy the newE module in step S71 as a new module newE, remove all row labels except the header as the elements that can be accommodated this time, and then copy another new module newE to accommodate the unprocessed element remainE this time, ensuring that both parts obtained by cutting have headers;

[0039] S73, traverse the row labels in the table, try to insert the row labels into the table in each newE module one by one, and calculate whether the height of the newE module exceeds the maximum height that can be accommodated by the PDF download page after insertion;

[0040] S74. If a row exceeds the maximum accommodating height, it is necessary to add the export-split-td tag to the td tag of the row for recording;

[0041] S75. If the table contains pictures, the pictures need to be refreshed and redrawn, and then the picture width and height are obtained to determine whether they exceed the width and height of the PDF download page for scaling.

[0042] Furthermore, in step S14, common elements are cut by a cutting algorithm, which specifically includes:

[0043] S81. Determine whether the common element can be cut. If the common element can be cut, add the export-split flag to calculate the minimum granularity of the cut with the flag as the cut. If any element in the common element can be cut, add the export-split-all flag to traverse all elements in the module.

[0044] S82, searching for a cutting point in order according to the export-split identifier, copying the module identified by export-split as the cutting point, clearing the elements in the module identified by export-split, using it as a new element newSplitE, and then copying newSplitE as the unprocessed element remainSplitE;

[0045] S83, traverse all elements in the cutting point, filter out invalid elements, assemble each element into an object item, store the object item in the stack, perform loop operation and simulate recursion, the object item contains the following attributes:

[0046] Node, current html element information;

[0047] targetNewElement, new element newSplitE;

[0048] targetRemainElement, the unprocessed element remainSplitE;

[0049] Index, the sequence number of the current child element;

[0050] Level, the current level, used for the following nested loops, the default is the first level cut;

[0051] isLast, whether it is the last one;

[0052] splitAll, whether the parent element is an element that can be split arbitrarily, that is, the parent element contains the element marked with export-split-all.

[0053] Furthermore, in step S83, the object item is stored in a stack, and a loop operation and simulated recursion are performed, specifically including:

[0054] S91, take out the object item from the stack, and determine whether the element has child elements according to the node of the item, and whether the child elements can be cut. If cutting is not allowed, add the child element to the targetNewElement of the current object, and determine whether the height after adding exceeds the maximum height that the PDF download page can accommodate. If not, it can be successfully placed, and continue to take out the next object item from the stack for operation. If it exceeds, it means that the PDF download page is full, then remove the targetNewElement of the previous object item and store it in the targetRemainElement of the current object item, and all the remaining objects in the stack are only stored in the corresponding targetRemainElement according to the operation, and the cutting is completed;

[0055] S92, if the object item in step S91 has child elements and the child elements are allowed to be cut, then traverse these child elements, copy the current object item and clear its content as a child new element childNewSplitE, then copy childNewSplitE as a child unprocessed element childRemainSplitE, assemble them one by one into a new object childItem, after the attributes in step S83 are stored, the level is increased by 1 based on the parent element, and two additional attributes are added: parentNewElement, parentRemainElement;

[0056] S93, adding two additional attributes to the new object childItem as parent element information, adding the thisNCount attribute to store the number of newly added elements, and the thisRCount attribute to store the number of unprocessed elements to record them, which is used to determine whether there are any new additions this time, and then storing the childItem object in the stack, using the first-in-last-out feature of the stack to give priority to processing the objects added later;

[0057] S94. Traverse all objects in the stack until the height that the PDF download page can accommodate is reached, then complete the cutting operation, and finally return newE and remainE. After adding the newE element to the current PDF download page, a new PDF download page is added. If the height of remainE is less than the height of the download page element, it is inserted and then processed by other modules. If the height of remainE is still higher than the height of the PDF download page, continue to use the cutting algorithm to cut remainE into two parts until it is completely cut.

[0058] Compared with the prior art, the present invention has the following beneficial effects:

[0059] (1) The access is simple. The present invention only needs to mark the elements to be downloaded in HTML, and the web page can be downloaded as a one-to-one restored PDF file by calling the method through JS.

[0060] (2) Strong controllability: the present invention allows users to flexibly select the elements they want or don’t want and customize the download.

[0061] (3) The degree of style restoration is high. The present invention can maintain a one-to-one restoration of the web page, and can also perform customized optimization for the PDF style on the original basis.

[0062] (4) It has excellent paging and cutting capabilities and can split web pages into several PDF pages, making it convenient for users to print.

[0063] (5) Supporting intelligent zooming, the present invention can well zoom in and out some tables with horizontal scroll bars or relatively wide areas, fill them into PDF files and download them, making it convenient for users to consult.

[0064] (6) Good compatibility: it can download any web page, even if the web page has an iframe, without having to treat it specially for specific business scenarios. BRIEF DESCRIPTION OF THE DRAWINGS

[0065] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only preferred embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0066] Figure 1 It is a schematic diagram of the overall flow of a method for downloading a web page as a PDF provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0067] The principles and features of the present invention are described below in conjunction with the accompanying drawings. The enumerated embodiments are only used to explain the present invention and are not used to limit the scope of the present invention.

[0068] Reference Figure 1 This embodiment provides a method for downloading a web page as a PDF, the method comprising:

[0069] S11. First, the elements to be downloaded and the elements to be ignored are marked in the HTML page, and a main download area is constructed according to the marks to store the elements to be downloaded. According to the marks, all the elements to be downloaded are placed into corresponding modules to form modules to be downloaded.

[0070] In step S11, the identifiers include export-page-container, export-item and dignore. The export-page-container identifier is used to identify the unique main download area, the export-item identifier is used to identify the elements that need to be downloaded, and the dignore identifier is used to prevent the elements identified by it from being generated into the PDF. This step is intended to identify the elements that need to be downloaded and the elements that need to be ignored so that the program can recognize them. Here are the following necessary identifiers, and the remaining auxiliary identifiers will be mentioned in the following steps and explained later.

[0071] In step S11, a main download area is constructed according to the identifier, which specifically includes:

[0072] S21, construct a new area in the html page that is identical to the html page through the export-page-container identifier. That is, in this step, a new area that is identical to the original html page is constructed through the export-page-container identifier.

[0073] S22. Add a new unique identifier, export-temp-container, for customizing the style of a new area. You can use this identifier to search for styles and apply the searched styles to the new area.

[0074] S23, clear all elements in the new area, fill the elements marked by export-item into the cleared new area to construct the main download area. Clear the elements in the copied new area, and the cleared area is used to store the elements to be downloaded. The elements to be downloaded can be operated in the new area without destroying the style of the original interface.

[0075] In step S11, all elements to be downloaded are placed into corresponding modules according to the identification to form the modules to be downloaded, which specifically include:

[0076] S31, identify the hidden elements to be downloaded by the export-force tag, and store the modules to be downloaded in order. In this step, all elements to be downloaded are found according to the export-item tag. Here are the following details: if the element itself is a hidden element, it is not collected. If the hidden element also needs to be downloaded, the export-force tag is added.

[0077] S32, collect the iframe elements marked with export-item, and store them in order into the modules to be downloaded. If there is an iframe element, collect all the elements marked with export-item in the iframe element, and store them in order into the modules to be downloaded.

[0078] S33. Remove the elements marked with export-item more than twice.

[0079] S12, pre-processing the elements in the modules to be downloaded in step S11 in sequence to obtain pre-processed elements. After obtaining the modules to be downloaded in step S11, all modules are processed in sequence for the first time, and each module is processed as follows:

[0080] In step S12, the elements in the module to be downloaded in step S11 are processed sequentially, specifically including:

[0081] S41, obtain the modules to be downloaded, copy a new module newE for each module in the modules to be downloaded, if the new module newE has an export-force mark, then force the new module newE to be displayed, and remove the elements marked with dignore in the new module newE. The elements marked with dignore are directly removed because they do not need to be downloaded.

[0082] S42. Customize the custom style through the export-style tag and the export-class tag. To process the custom style, the user will be provided with the export-style tag and the export-class tag for customization. If there is customization, the user's custom attributes will overwrite the original attributes, but if there is no overwritten attribute, the original attribute will still be retained to maximize compatibility.

[0083] S43. Add the export-split-text tag to process text segmentation, which is used to segment the text into multiple span tags. The text is segmented into span tags that can be recognized by the subsequent segmentation algorithm, so that the subsequent segmentation algorithm can process it.

[0084] In this embodiment, if the user has additional download logic that needs to be adjusted in this step, for example: in the original page, picture 1 is above picture 2, but the user wants to place picture 2 above picture 1 when downloading the web page as a pdf file, the callback method can be called to process the module.

[0085] S13, construct a div element with export-temp-item mark, insert it into the main download area to obtain the element download module, which is used to store the elements in each PDF download page, insert the initial processing element in step S12 into the element download module, and obtain the width and height of the initial processing element in the PDF download page, and then reprocess the elements in the element download module. The div element is a paging element.

[0086] In step S13, the elements in the element download module are reprocessed, specifically including:

[0087] S51. Refresh and redraw the chart elements to adapt to the width and size of the PDF download page. If some charts, such as highncharts, echarts, etc., can be refreshed and redrawn so that the chart can adapt to the currently defined width and size.

[0088] S52. For a table element that is scaled beyond the width of the PDF download page, the width of the table element in the PDF download page is calculated, and the expression is:

[0089]

[0090] Among them, ch is the width occupied by the table element in the PDF download page, tw is the width of the table element, cw is the width of the main element of the download area, and th is the original height of the table;

[0091] S53. Use the transform:scale property of CSS3 to set the zoom ratio, and return it to the upper left position by setting transform-origin:lefttop.

[0092] S54, monitor the onload event of all pictures, and determine whether the picture width and height exceed the width and height of the PDF download page for scaling. If it exceeds the maximum height limit that the current page can accommodate, the corresponding height adjustment is also required. The height adjustment is performed in the subsequent cutting step. Here, only the pictures that exceed the width are scaled proportionally. Since the picture loading is an asynchronous model, the picture here needs to wait for all pictures to be loaded before proceeding to the next step, otherwise the height calculation may be inaccurate.

[0093] S14, cutting the elements that cannot be accommodated by the PDF download page through the cutting algorithm to obtain the elements that have been cut. First, calculate the HTML page height corresponding to the elements that can be accommodated by each PDF download page, and then determine whether the height exceeds the PDF download page after each element is placed in the PDF download page. If it does not exceed, it can be placed in the PDF download page. If it exceeds, the element is cut by the cutting algorithm.

[0094] In step S14, the elements that cannot be accommodated in the PDF download page are cut using a cutting algorithm, specifically including:

[0095] S61. If the current element height exceeds the height that can be accommodated by the PDF download page, it will be cut. The calculation formula is as follows:

[0096] remainHeight=maxHeight-existHeight+curHeight

[0097] Among them, remainingHeight is the remaining accommodating height, maxHeight is the maximum height, existingHeight is the height of the existing element, and curHeight is the height of the current element.

[0098] S62, cutting the table elements by a cutting algorithm. Because the style presentation of the table elements has certain particularity, the table also has its particularity in the HTML and CSS layout, and the sense of the download effect also has its particularity, so the table is taken out for a special cutting algorithm.

[0099] S63, common elements are cut by cutting algorithm, and the common elements are elements other than table elements. Common elements are complex because of their diversity, because the user can first set whether it is a module that can be cut, if it is, add the export-split mark, the program will calculate this mark as the minimum granularity of cutting, that is, it is regarded as a whole, and the content inside is not allowed to be cut, so that a lot of invalid checks can be avoided, making the performance better, but if it is indeed possible to cut any element, then add the export-split-all mark, after adding this mark, the algorithm will traverse all elements in the module, and any possible place may be used as a cutting point.

[0100] In step S62, the table elements are cut using a cutting algorithm, specifically including:

[0101] S71. Take out the header. By default, the first line is the header, or any line can be selected as the header by adding the flag export-nohead. If the remaining height of the PDF download page is less than the header height, the header is returned as the unprocessed element remainE, and the newE module that accommodates the unprocessed element remainE is returned empty.

[0102] S72. Copy the newE module of step S71 as a new module newE, remove all row labels except the header as the elements that can be accommodated this time, and then copy a new module newE to accommodate the unprocessed element remainE this time, ensuring that both parts obtained by cutting have headers.

[0103] S73, traverse the row labels in the table, try to insert the row labels into the table in each newE module one by one, and after the insertion, calculate whether the height of the newE module exceeds the maximum height that can be accommodated by the PDF download page.

[0104] S74. If a row exceeds the maximum accommodating height, it is necessary to add the export-split-td tag to the td tag of the row for recording.

[0105] S75. If the table contains pictures, the pictures need to be refreshed and redrawn, and then the picture width and height are obtained to determine whether they exceed the width and height of the PDF download page for scaling.

[0106] In step S14, common elements are cut by a cutting algorithm, which specifically includes:

[0107] S81. Determine whether the common elements can be cut. If the common elements can be cut, add the export-split flag to calculate the minimum granularity of the cut with this flag as the cut. If any element in the common elements can be cut, add the export-split-all flag to traverse all elements in the module.

[0108] S82. Search for the cutting point in order according to the export-split identifier, copy the module identified by export-split as the cutting point, clear the elements in the module identified by export-split, use it as a new element newSplitE, and then copy newSplitE as the unprocessed element remainSplitE.

[0109] S83, traverse all elements in the cutting point, filter out invalid elements, assemble each element into an object item, store the object item in the stack, perform loop operation and simulate recursion, the object item contains the following attributes:

[0110] Node, current html element information;

[0111] targetNewElement, new element newSplitE;

[0112] targetRemainElement, the unprocessed element remainSplitE;

[0113] Index, the sequence number of the current child element;

[0114] Level, the current level, used for the following nested loops, the default is the first level cut;

[0115] isLast, whether it is the last one;

[0116] splitAll, whether the parent element is an element that can be split arbitrarily, that is, the parent element contains the element marked with export-split-all.

[0117] In step S83, the object item is stored in the stack, and a loop operation and simulated recursion are performed, specifically including:

[0118] S91. Take the object item from the stack, and determine whether the element has child elements according to the node of the item, and whether the child elements can be cut. If cutting is not allowed, add the child element to the targetNewElement of the current object, and determine whether the height after adding exceeds the maximum height that the PDF download page can accommodate. If not, it can be successfully inserted, and continue to take the next object item from the stack for operation. If it exceeds, it means that the PDF download page is full, then remove the targetNewElement of the previous object item and store it in the targetRemainElement of the current object item, and all the remaining objects in the stack are only stored in the corresponding targetRemainElement according to the operation to complete the cutting.

[0119] S92. If the object item in step S91 has child elements and the child elements are allowed to be cut, then traverse these child elements, copy the current object item and clear its content as a child new element childNewSplitE, then copy childNewSplitE as a child unprocessed element childRemainSplitE, and assemble them one by one into a new object childItem. After the attributes in step S83 are stored accordingly, the level is increased by 1 based on the parent element, and two additional attributes are added: parentNewElement and parentRemainElement.

[0120] S93. Add two additional attributes to the new object childItem as the parent element information. In addition, add the thisNCount attribute to store the number of newly added elements and the thisRCount attribute to store the number of unprocessed elements and record them to determine whether there are any new additions this time. Then store the childItem object in the stack. Use the first-in-last-out feature of the stack to give priority to the objects added later.

[0121] S94. Traverse all objects in the stack until the height that the PDF download page can accommodate is reached, then complete the cutting operation, and finally return newE and remainE. After adding the newE element to the current PDF download page, a new PDF download page is added. If the height of remainE is less than the height of the download page element, it is inserted and then processed by other modules. If the height of remainE is still higher than the height of the PDF download page, continue to use the cutting algorithm to cut remainE into two parts until it is completely cut.

[0122] S15. Use html2canvas to generate a canvas object from the elements cut in step S14, insert the canvas object into the pdf download page through the jspdf plug-in, and generate a pdf file for download.

[0123] According to the above steps, all the PDF download page elements have been prepared, and then the html2canvas method is used to generate a canvas object for each download page element, and then the canvas object is inserted into the PDF using the jspdf plug-in to generate a PDF file for download. Because we added DOM elements through the script during the execution process, we need to delete the added elements and restore the page to its original state.

[0124] The present invention is a pure front-end operation and does not interact with the server. The present invention requires the use of common js libraries:

[0125] Jquery: A very commonly used js library with simpler syntax and better compatibility than native js.

[0126] html2canvas: used to convert web page elements into canvas objects, which can be better converted into images.

[0127] Jspdf: can write images into pdf objects, which can then be input into the client for downloading.

[0128] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. A method for downloading a web page as a pdf, characterized in that: The method comprises: S11. First, in the HTML page, elements to be downloaded and elements to be ignored are marked, and a main download area is constructed according to the marks to store the elements to be downloaded. According to the marks, all elements to be downloaded are placed into corresponding modules to form modules to be downloaded; S12, pre-processing the elements in the module to be downloaded in step S11 in sequence to obtain pre-processed elements; S13, construct a div element with export-temp-item logo, insert it into the main download area to obtain an element download module, which is used to store the elements in each PDF download page, insert the initial processing element in step S12 into the element download module, and obtain the width and height of the initial processing element in the PDF download page, and then reprocess the elements in the element download module; S14, cutting the elements that cannot be accommodated in the PDF download page by using a cutting algorithm to obtain the elements that have been cut; S15. Use html2canvas to generate a canvas object from the elements cut in step S14, insert the canvas object into the pdf download page through the jspdf plug-in, and generate a pdf file for download.

2. The method for downloading a web page as a pdf according to claim 1, characterized in that: In step S11, the identifier includes export-page-container, export-item and dignore, the export-page-container identifier is used to identify the unique main download area, the export-item identifier is used to identify the element to be downloaded, and the dignore identifier is used to prevent the element identified by it from being generated into the PDF.

3. The method for downloading a web page as a pdf according to claim 2, characterized in that: In step S11, a main download area is constructed according to the identifier, which specifically includes: S21. By using the export-page-container identifier, a new area identical to the HTML page is constructed in the HTML page; S22. Add a new unique identifier export-temp-container for new area style customization; S23. Clear all elements in the new area, and fill the cleared new area with elements identified by export-item to construct the main download area.

4. The method for downloading a web page as a pdf according to claim 1, characterized in that: In step S11, all elements to be downloaded are placed into corresponding modules according to the identification to form the modules to be downloaded, which specifically include: S31. Use the export-force tag to identify the hidden elements that need to be downloaded, and store the modules that need to be downloaded in order; S32, collecting the iframe elements marked by export-item, and storing the modules to be downloaded in order; S33. Remove the elements marked with export-item more than twice.

5. The method for downloading a web page as a pdf according to claim 4, characterized in that: In step S12, the elements in the module to be downloaded in step S11 are processed sequentially, specifically including: S41, obtaining modules to be downloaded, and copying a new module newE for each module in the modules to be downloaded. If the new module newE has an export-force identifier, the new module newE is forcibly displayed, and the elements in the new module newE that are identified by dignore are removed; S42. Customize the custom style by processing the export-style tag and the export-class tag; S43. Add the export-split-text tag to handle text segmentation, which is used to split text into multiple span tags.

6. The method for downloading a web page as a pdf according to claim 1, characterized in that: In step S13, the elements in the element download module are reprocessed, specifically including: S51, refreshing and redrawing the chart elements to adapt the chart elements to the width and size of the PDF download page; S52. For a table element that is scaled beyond the width of the PDF download page, the width of the table element in the PDF download page is calculated, and the expression is: Among them, ch is the width occupied by the table element in the PDF download page, tw is the width of the table element, cw is the width of the main element of the download area, and th is the original height of the table; S53. Use the transform:scale property of CSS3 to set the zoom ratio, and set transform-origin:left top to return it to the upper left position; S54, monitor the onload event of all pictures, and determine whether the picture width and height exceed the width and height of the PDF download page for scaling.

7. The method for downloading a web page as a pdf according to claim 5, characterized in that: In step S14, the elements that cannot be accommodated in the PDF download page are cut using a cutting algorithm, specifically including: S61. If the current element height exceeds the height that can be accommodated by the PDF download page, it will be cut. The calculation formula is as follows: remainHeight=maxHeight-existHeight+curHeight Among them, remainingHeight is the remaining accommodating height, maxHeight is the maximum height, existingHeight is the height of the existing element, and curHeight is the height of the current element; S62, cutting the table elements by using a cutting algorithm; S63. Cut common elements using a cutting algorithm, where the common elements are elements other than table elements.

8. The method for downloading a web page as a PDF according to claim 7, characterized in that: In step S62, the table elements are cut using a cutting algorithm, specifically including: S71, take out the header, the first line is the header by default, or select any line as the header by adding the flag export-nohead, if the remaining height of the PDF download page is less than the header height, the header is returned as the unprocessed element remainE, and the newE module that accommodates the unprocessed element remainE is returned empty; S72, copy the newE module in step S71 as a new module newE, remove all row labels except the header as the elements that can be accommodated this time, and then copy another new module newE to accommodate the unprocessed element remainE this time, ensuring that both parts obtained by cutting have headers; S73, traverse the row labels in the table, try to insert the row labels into the table in each newE module one by one, and calculate whether the height of the newE module exceeds the maximum height that can be accommodated by the PDF download page after insertion; S74. If a row exceeds the maximum accommodating height, it is necessary to add the export-split-td tag to the td tag of the row for recording; S75. If the table contains pictures, the pictures need to be refreshed and redrawn, and then the picture width and height are obtained to determine whether they exceed the width and height of the PDF download page for scaling.

9. The method for downloading a web page as a pdf according to claim 7, characterized in that: In step S14, common elements are cut by a cutting algorithm, which specifically includes: S81. Determine whether the common element can be cut. If the common element can be cut, add the export-split flag to calculate the minimum granularity of the cut with the flag as the cut. If any element in the common element can be cut, add the export-split-all flag to traverse all elements in the module. S82, searching for a cutting point in order according to the export-split identifier, copying the module identified by export-split as the cutting point, clearing the elements in the module identified by export-split, using it as a new element newSplitE, and then copying newSplitE as the unprocessed element remainSplitE; S83, traverse all elements in the cutting point, filter out invalid elements, assemble each element into an object item, store the object item in the stack, perform loop operation and simulate recursion, the object item contains the following attributes: Node, current html element information; targetNewElement, new element newSplitE; targetRemainElement, the unprocessed element remainSplitE; Index, the sequence number of the current child element; Level, the current level, used for the following nested loops, the default is the first level cut; isLast, whether it is the last one; splitAll, whether the parent element is an element that can be split arbitrarily, that is, the parent element contains the element marked with export-split-all.

10. The method for downloading a web page as a pdf according to claim 9, characterized in that: In step S83, the object item is stored in the stack, and a loop operation and simulated recursion are performed, specifically including: S91, take out the object item from the stack, and determine whether the element has child elements according to the node of the item, and whether the child elements can be cut. If cutting is not allowed, add the child element to the targetNewElement of the current object, and determine whether the height after adding exceeds the maximum height that the PDF download page can accommodate. If not, it can be successfully placed, and continue to take out the next object item from the stack for operation. If it exceeds, it means that the PDF download page is full, then remove the targetNewElement of the previous object item and store it in the targetRemainElement of the current object item, and all the remaining objects in the stack are only stored in the corresponding targetRemainElement according to the operation, and the cutting is completed; S92, if the object item in step S91 has child elements and the child elements are allowed to be cut, then traverse these child elements, copy the current object item and clear its content as a child new element childNewSplitE, then copy childNewSplitE as a child unprocessed element childRemainSplitE, assemble them one by one into a new object childItem, after the attributes in step S83 are stored, the level is increased by 1 based on the parent element, and two additional attributes are added: parentNewElement, parentRemainElement; S93, adding two additional attributes to the new object childItem as parent element information, adding the thisNCount attribute to store the number of newly added elements, and the thisRCount attribute to store the number of unprocessed elements to record them, which is used to determine whether there are any new additions this time, and then storing the childItem object in the stack, using the first-in-last-out feature of the stack to give priority to processing the objects added later; S94. Traverse all objects in the stack until the height that the PDF download page can accommodate is reached, then complete the cutting operation, and finally return newE and remainE. After adding the newE element to the current PDF download page, a new PDF download page is added. If the height of remainE is less than the height of the download page element, it is inserted and then processed by other modules. If the height of remainE is still higher than the height of the PDF download page, continue to use the cutting algorithm to cut remainE into two parts until it is completely cut.

Images