Method and device for generating PDF (Portable Document Format) report of front-end page

Abstract

The invention relates to the technical field of front ends, and provides a PDF report generation method and device of a front-end page. The method comprises the following steps: receiving a PDF report generation request; setting a CSS style for a real DOM according to the PDF report generation request, so that a display form corresponding to the real DOM is the same as a display form corresponding to a pseudo element; controlling a target front-end page to display the real DOM, and obtaining all nodes of the real DOM; on the basis of all the nodes, a preset Canvas generation plug-in is used for intercepting the target front-end page, and an intercepted image is obtained; and generating a PDF report of the target front-end page according to the intercepted image. According to the embodiment of the invention, the accuracy of exporting the PDF report by the front end can be improved.

Description

Technical Field

[0001] The present invention relates to the field of front-end technology, and more particularly to a method and device for generating a PDF report of a front-end page. Background Art

[0002] Cyber ​​Range is a technology or product based on virtualization technology that simulates and reproduces the operating status and operating environment of network architecture, system equipment, and business processes in real cyberspace, so as to more effectively realize network security-related learning, research, testing, competition, exercises, etc., thereby improving the network security confrontation level of personnel and institutions. Users can use the Cyber ​​Range to improve the required skills and experience through practical training and exercises. After the practical training and exercises, users can view their training scores and download their score report by exporting it to PDF.

[0003] However, the current PDF export method commonly used in the front end of the network target range is to combine a third-party Canvas generation plug-in and a third-party PDF generation plug-in to realize the export of PDF reports. Specifically, the third-party Canvas generation plug-in is used to first capture the specified part of the front-end page into an image, and then the captured image is generated into a PDF report for export through the third-party PDF generation plug-in. Among them, the third-party Canvas generation plug-in can obtain the DOM elements in the front-end page and convert the specified DOM elements into image format. However, the images captured by the third-party Canvas generation plug-in have defects. Since the third-party Canvas generation plug-in does not support the rendering of CSS pseudo-elements, the pseudo-element part of the front-end page will be displayed disorderly in the captured image. Therefore, a PDF report generation method for the front-end page is urgently needed to avoid the pseudo-element part of the front-end page from being displayed disorderly in the captured image, so as to improve the accuracy of the front-end exported PDF report. Summary of the invention

[0004] In view of the fact that the commonly used PDF export method for the front end of the network target range is to combine a third-party Canvas generation plug-in and a third-party PDF generation plug-in to realize the export of PDF reports, specifically, the third-party Canvas generation plug-in is used to first capture the specified part of the front-end page into an image, and then the captured image is generated into a PDF report for export through the third-party PDF generation plug-in, wherein the third-party Canvas generation plug-in can obtain the DOM elements in the front-end page and convert the specified DOM elements into the image format, but the images captured by the third-party Canvas generation plug-in have defects. Since the third-party Canvas generation plug-in does not support the rendering of CSS pseudo-elements, the pseudo-element part of the front-end page will be displayed disorderly in the captured image. This solution is proposed to overcome the above problems or at least partially solve the above problems.

[0005] On the one hand, an object of some embodiments of this specification is to provide a method for generating a PDF report of a front-end page, the method comprising:

[0006] Receive PDF report generation request;

[0007] According to the PDF report generation request, a CSS style is set for the real DOM so that the display form corresponding to the real DOM is the same as the display form corresponding to the pseudo element;

[0008] Control the target front-end page to display the real DOM and obtain all nodes of the real DOM;

[0009] Based on all nodes, the target front-end page is intercepted using a preset Canvas generation plug-in to obtain an intercepted image;

[0010] A PDF report of the target front-end page is generated according to the captured image.

[0011] Further, according to the PDF report generation request, a CSS style is set for the real DOM so that the display form corresponding to the real DOM is the same as the display form corresponding to the pseudo element, including:

[0012] Obtain selector style information corresponding to the pseudo-element according to the PDF report generation request;

[0013] The CSS style is set for the real DOM according to the selector style information, so that the display form corresponding to the real DOM is the same as the display form corresponding to the pseudo element.

[0014] Furthermore, the target front-end page is controlled to display the real DOM and obtain all nodes of the real DOM, including:

[0015] Using preset control variables, control the target front-end page to display the real DOM;

[0016] The outermost nodes of the real DOM are acquired by using a preset node capture algorithm, and all nodes of the real DOM are acquired by traversing from the outermost nodes to the inner nodes.

[0017] Furthermore, in some embodiments, after generating a PDF report of a target front-end page, a preset control variable is used to control the target front-end page to change from displaying the real DOM to displaying the pseudo-element.

[0018] Further, based on all nodes, the target front-end page is intercepted using a preset Canvas generation plug-in to obtain an intercepted image, including:

[0019] The preset Canvas generation plug-in is used to obtain the Canvas images corresponding to all nodes, and the captured image and the size information and typesetting format information corresponding to the captured image are obtained according to the Canvas image.

[0020] Further, generating a PDF report of the target front-end page according to the captured image includes:

[0021] Initialize the PDF instance using the preset PDF generation plug-in;

[0022] Based on the size information and typesetting format information corresponding to the captured image, the captured image is added to the PDF instance to generate a PDF report.

[0023] On the other hand, some embodiments of this specification also provide a PDF report generation device for a front-end page, the device comprising:

[0024] A receiving module, used for receiving a PDF report generation request;

[0025] A setting module, used for setting a CSS style for the real DOM according to the PDF report generation request, so that the display form corresponding to the real DOM is the same as the display form corresponding to the pseudo element;

[0026] A display module, used to control the target front-end page to display the real DOM and obtain all nodes of the real DOM;

[0027] The interception module is used to intercept the target front-end page based on all nodes using a preset Canvas generation plug-in to obtain an intercepted image;

[0028] A generation module is used to generate a PDF report of a target front-end page according to the captured image.

[0029] On the other hand, some embodiments of the present specification further provide a computer device, including a memory, a processor, and a computer program stored in the memory, wherein when the computer program is executed by the processor, the instructions of the above method are executed.

[0030] On the other hand, some embodiments of the present specification further provide a computer storage medium having a computer program stored thereon, wherein when the computer program is executed by a processor of a computer device, the instructions of the above method are executed.

[0031] On the other hand, some embodiments of the present specification further provide a computer program product, wherein the computer program product comprises a computer program, and when the computer program is executed by a processor of a computer device, the instructions of the above method are executed.

[0032] One or more technical solutions provided by some embodiments of this specification have at least the following technical effects:

[0033] The embodiment of the present specification automatically receives a PDF report generation request, and sets a CSS style for the real DOM in the target front-end page according to the PDF report generation request, so that the display form corresponding to the real DOM is the same as the display form corresponding to the pseudo-element. Since the target front-end page was originally displayed in the display form corresponding to the pseudo-element, and there is a problem of confusion when directly exporting the target front-end page to PDF at this time, it is necessary to control the target front-end page to display the real DOM and obtain all nodes of the real DOM. Based on all nodes, a preset Canvas generation plug-in is used to intercept the target front-end page at this time to obtain a intercepted image without confusion, thereby efficiently and accurately generating a PDF report of the target front-end page according to the intercepted image.

[0034] The above description is only an overview of the technical solutions of some embodiments of this specification. In order to more clearly understand the technical means of some embodiments of this specification, they can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of some embodiments of this specification more obvious and easy to understand, the specific implementation methods of some embodiments of this specification are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] In order to more clearly illustrate some embodiments of this specification or technical solutions in the prior art, the following briefly introduces the drawings required for the embodiments or prior art descriptions. Obviously, the drawings described below are only some embodiments recorded in this specification. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative labor. In the drawings:

[0036] Figure 1A schematic diagram of an implementation system of a PDF report generation method for a front-end page in some embodiments of this specification is shown;

[0037] Figure 2 A flowchart of a method for generating a PDF report of a front-end page in some embodiments of this specification is shown;

[0038] Figure 3 This is a schematic diagram of the steps of setting CSS styles for real DOM in some embodiments of this specification;

[0039] Figure 4 A schematic diagram of the steps of controlling the target front-end page to display the real DOM and obtaining all nodes of the real DOM in some embodiments of this specification;

[0040] Figure 5 A schematic diagram of the steps of generating a PDF report of a target front-end page in some embodiments of this specification;

[0041] Figure 6 This is a schematic diagram of the structure of a PDF report generating device for a front-end page in some embodiments of this specification;

[0042] Figure 7 This is a schematic diagram of the computer device structure provided in some embodiments of this specification.

[0043] [Description of Reference Numerals]

[0044] 101. Terminal;

[0045] 102. Server;

[0046] 601, receiving module;

[0047] 602. Setting module;

[0048] 603, display module;

[0049] 604, interception module;

[0050] 605. Generate module;

[0051] 702. Computer equipment;

[0052] 704, processor;

[0053] 706. Memory;

[0054] 708, driving mechanism;

[0055] 710, input / output interface;

[0056] 712. Input devices;

[0057] 714. Output devices;

[0058] 716. Presentation equipment;

[0059] 718. Graphical user interface;

[0060] 720, network interface;

[0061] 722. Communication link;

[0062] 724. Communication bus. DETAILED DESCRIPTION

[0063] In order to enable those skilled in the art to better understand the technical solutions in this specification, the technical solutions in the embodiments of this specification will be clearly and completely described below in conjunction with the drawings in some embodiments of this specification. Obviously, the described embodiments are only part of the embodiments of this specification, not all of the embodiments. Based on some embodiments in this specification, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of this specification.

[0064] It should be noted that the terms "first", "second", etc. in the specification and claims of this article and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of this article described here can be implemented in an order other than those illustrated or described here. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, device, product or equipment that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or equipment.

[0065] It should be noted that the acquisition, storage, use, and processing of data in the technical solution of this application are in compliance with the relevant provisions of relevant laws and regulations.

[0066] It should be noted that in the embodiments of this specification, certain software, components, models and other existing solutions in the industry may be mentioned, and they should be regarded as exemplary. Their purpose is only to illustrate the feasibility of implementing the technical solution of this application, but it does not mean that the applicant has or will necessarily use the solution.

[0067] like Figure 1The system diagram of the implementation method of the PDF report generation method of the front-end page of the embodiment of the present invention is shown, which may include: a terminal 101 and a server 102, wherein the terminal 101 and the server 102 communicate with each other through a network, and the network may include a local area network (LAN), a wide area network (WAN), the Internet or a combination thereof, and is connected to a website, a user device (such as a computing device) and a back-end system. The staff can send a PDF report generation request to the server 102 through the terminal 101, and after receiving the PDF report generation request, the server 102 calls the corresponding data for calculation and processing, obtains the processing result, and sends the processing result to the terminal 101, so that the staff can process the business according to the processing result.

[0068] In the embodiments of this specification, the server 102 can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (CDN, Content Delivery Network), and big data and artificial intelligence platforms.

[0069] In an optional embodiment, the terminal 101 may include but is not limited to electronic devices such as self-service terminal devices, desktop computers, tablet computers, laptop computers, smart wearable devices, etc. Optionally, the operating system running on the electronic device may include but is not limited to Android system, IOS system, Linux, Windows, etc. Of course, the terminal 101 is not limited to the above-mentioned electronic devices with a certain entity, and it can also be software running in the above-mentioned electronic devices.

[0070] In addition, it should be noted that Figure 1 What is shown is only an application environment provided by the present disclosure. In actual application, multiple terminals 101 may be included, and this specification does not limit this.

[0071] Figure 2 It is a flowchart of a method for generating a PDF report for a front-end page provided by an embodiment of the present invention. This specification provides method operation steps as described in the embodiment or flowchart, but may include more or fewer operation steps based on conventional or non-creative labor. The order of steps listed in the embodiment is only one way of executing the steps among many orders, and does not represent the only order of execution. When the actual system or device product is executed, it can be executed in the order or in parallel according to the method shown in the embodiment or the accompanying drawings. Specifically, Figure 2As shown, applied to the above-mentioned server side, the method may include:

[0072] S201: receiving a PDF report generation request;

[0073] When a user needs to generate a PDF report from a target front-end page, a PDF report generation request can be sent to perform a subsequent response based on the PDF report generation request.

[0074] S202: Setting a CSS style for the real DOM according to the PDF report generation request, so that the display form corresponding to the real DOM is the same as the display form corresponding to the pseudo element;

[0075] Since the target front-end page uses pseudo elements for page display, and the target front-end page using pseudo elements for page display has a problem of intercepting disordered images when exporting a PDF report, resulting in disordered PDF reports and errors, it is necessary to adjust the target front-end page. Specifically, in some embodiments, refer to the attached Figure 3 , setting a CSS style for the real DOM according to the PDF report generation request so that the display form corresponding to the real DOM is the same as the display form corresponding to the pseudo element, including:

[0076] S301: Obtain selector style information corresponding to the pseudo-element according to the PDF report generation request;

[0077] S302: Setting a CSS style for the real DOM according to the selector style information, so that the display form corresponding to the real DOM is the same as the display form corresponding to the pseudo element.

[0078] It can be understood that, in some embodiments, based on the fact that the target front-end page is originally displayed using pseudo-elements, when generating a PDF report, the target front-end page can be changed from using pseudo-elements to using real DOM for display. Specifically, a control variable can be preset to control whether the target front-end page displays pseudo-elements or real DOM, and the default value of the control variable is to display pseudo-elements (that is, the default value of show_dom is false). In some embodiments, the relevant code of the control variable and the code annotation can be:

[0079]

[0080]

[0081] Further, in some embodiments, the selector style information corresponding to the pseudo-element is obtained according to the PDF report generation request, and the CSS style is set for the real DOM according to the selector style information, so that the display form corresponding to the real DOM is the same as the display form corresponding to the pseudo-element, thereby ensuring that when the target front-end page uses the real DOM for display and PDF export, there will be no image confusion and a display form different from the original target front-end. In some embodiments, the relevant code and comments for setting the CSS style for the real DOM can be:

[0082]

[0083] S203: Control the target front-end page to display the real DOM and obtain all nodes of the real DOM;

[0084] In some embodiments, after completing the setting of the target front-end page, generating a PDF report also requires obtaining all nodes of the real DOM, see the attached Figure 4 , control the target front-end page to display the real DOM, and obtain all nodes of the real DOM, including:

[0085] S401: Using preset control variables, controlling the target front-end page to display the real DOM;

[0086] S402: using a preset node capture algorithm to obtain the outermost nodes of the real DOM, and traversing from the outermost nodes to the inner nodes to obtain all the nodes of the real DOM.

[0087] It can be understood that in some embodiments, it is first necessary to use the preset control variables to control the target front-end page to display the real DOM, that is, the value of show_dom needs to be changed from false to true, and then the preset node capture algorithm is used to obtain the outermost nodes of the real DOM. Since the real DOM is a tree structure, it is necessary to traverse from the outermost nodes to the inner nodes to obtain all the nodes of the real DOM, so as to ensure that the subsequent capture image is obtained without confusion based on all the nodes of the real DOM.

[0088] S204: Based on all nodes, the target front-end page is intercepted using a preset Canvas generation plug-in to obtain a captured image;

[0089] Further, in some embodiments, based on all nodes, the target front-end page is intercepted using a preset Canvas generation plug-in to obtain a captured image, including:

[0090] The preset Canvas generation plug-in is used to obtain the Canvas images corresponding to all nodes, and the captured image and the size information and typesetting format information corresponding to the captured image are obtained according to the Canvas image.

[0091] It can be understood that, in some embodiments, the preset Canvas generation plug-in can convert all nodes of the real DOM to generate corresponding Canvas images and capture images, as shown in the following code example:

[0092]

[0093] Among them, exportPDF is a function method for exporting PDF reports, and the value of show_dom is true. At this time, the target front-end page is displayed using the real DOM. Since the real DOM is a tree structure, when obtaining all the nodes of the real DOM, you first need to use this.$refs.contentRef to obtain the outermost DOM of the target front-end page, and then traverse to obtain all the nodes. After that, the preset Canvas generation plug-in (such as html2canvas) can convert the real DOM node into a Canvas image, and convert the Canvas image into a Data URL, thereby realizing the conversion of the Canvas image into a captured image. As shown in the above code, the format of the captured image is png. In some embodiments, the format of the captured image can be png, jpg, tif, etc., which is not limited in this document.

[0094] S205: Generate a PDF report of the target front-end page according to the captured image.

[0095] Specifically, refer to the attached Figure 5 In some embodiments, generating a PDF report of a target front-end page according to the captured image may include:

[0096] S501: Initializing a PDF instance using a preset PDF generation plug-in;

[0097] S502: Based on the size information and typesetting format information corresponding to the captured image, the captured image is added to the PDF instance to generate a PDF report.

[0098] It can be understood that, in some embodiments, a captured image is obtained, and a PDF instance is first initialized using a preset PDF generation plug-in. In the PDF instance, size information and typesetting format information corresponding to the captured image are obtained, and based on the size information and typesetting format information corresponding to the captured image, the captured image is added to the PDF instance to generate a PDF report, as shown in the following code and code comments:

[0099] / / Create a new jsPDF instance

[0100] const pdf = new jsPDF();

[0101] const imgProps=pdf.getImageProperties(imgData);

[0102] const pdfWidth=pdf.internal.pageSize.getWidth();

[0103] const pdfHeight=(imgProps.height*pdfWidth) / imgProps.width;

[0104] / / Add image to PDF document

[0105] / / pdf.addImage(image,format,x,y,width,height,alias,compression,rotation)

[0106] / / 1. image: indicates the image resource to be inserted, which can be the path of the image file or a base64 encoded string.

[0107] / / 2. format: indicates the image format to be inserted, including: 'JPEG', 'PNG', 'GIF', 'BMP', 'TIFF', 'RAW'

[0108] / / 3. x: The x-axis coordinate of the image in PDF, in pt (point).

[0109] / / 4. y: The y-axis coordinate of the image in PDF, in pt (point).

[0110] / / 5. width: The width of the image in PDF, in pt (points).

[0111] / / 6. height: The height of the image in PDF, in pt (points).

[0112] / / 7. alias (optional): specifies the alias of the image resource.

[0113] / / 8. compression (optional): specifies the compression quality of the image, with a floating point value between 0 and 1.

[0114] / / 9. rotation (optional): specifies the rotation angle of the image, the value range is an integer between 0 and 360 pdf.addImage(imgData,'PNG',10,10,pdfWidth-20,pdfHeight);

[0115] / / Save the PDF file

[0116] pdf.save('result report.pdf');

[0117] this.show_dom = false;

[0118] Among them, new jsPDF() is used to initialize the PDF instance, pdf.getImageProperties(imgData) is used to obtain the size information and typesetting format information corresponding to the captured image to process the captured image, pdfWidth and pdfHeight are used to configure the width and height of the PDF report. The width and height can be determined and modified according to user needs, and pdf.addImage(imgData,'PNG',10,10,pdfWidth-20,pdfHeight) is used to configure the margin and width of the inserted image to add the captured image to the PDF instance, so as to quickly and accurately generate a PDF report.

[0119] Further, continuing as shown in the above code, in some embodiments, it also includes:

[0120] After generating the PDF report of the target front-end page, the target front-end page is controlled to change from displaying the real DOM to displaying the pseudo element by using the preset control variables. Specifically, fast display switching can be achieved by changing show_dom from true to false with one click.

[0121] It can be understood that some embodiments of the present specification automatically receive a PDF report generation request, and set a CSS style for the real DOM in the target front-end page according to the PDF report generation request, so that the display form corresponding to the real DOM is the same as the display form corresponding to the pseudo-element. Since the target front-end page was originally displayed in the display form corresponding to the pseudo-element, and there is a problem of confusion when directly exporting the target front-end page to PDF at this time, it is necessary to control the target front-end page to display the real DOM and obtain all nodes of the real DOM. Based on all nodes, a preset Canvas generation plug-in is used to capture the target front-end page at this time to obtain a captured image without confusion, thereby efficiently and accurately generating a PDF report of the target front-end page according to the captured image.

[0122] It should be noted that, although the operations of the method of the present invention are described in a specific order in the above embodiments and the accompanying drawings, this does not require or imply that the operations must be performed in the specific order, or that all the operations shown must be performed to achieve the desired results. Additionally or alternatively, some steps may be omitted, multiple steps may be combined into one step, and / or one step may be decomposed into multiple steps.

[0123] Corresponding to the above-mentioned PDF report generation method for the front-end page, some embodiments of this specification also provide a PDF report generation device for the front-end page, referring to Figure 6 As shown, in some embodiments, the apparatus may include:

[0124] The receiving module 601 is used to receive a PDF report generation request;

[0125] A setting module 602 is used to set a CSS style for the real DOM according to the PDF report generation request, so that the display form corresponding to the real DOM is the same as the display form corresponding to the pseudo element;

[0126] The display module 603 is used to control the target front-end page to display the real DOM and obtain all nodes of the real DOM;

[0127] The interception module 604 is used to intercept the target front-end page based on all nodes using a preset Canvas generation plug-in to obtain an intercepted image;

[0128] The generating module 605 is used to generate a PDF report of the target front-end page according to the captured image.

[0129] For the convenience of description, the above device is described in various units according to their functions. Of course, when implementing this specification, the functions of each unit can be implemented in the same or multiple software and / or hardware.

[0130] It should be noted that in the embodiments of this specification, the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved are all information and data authorized by the user and fully authorized by all parties.

[0131] It should be noted that the computer program product described in this specification is a software product that mainly implements the method described in this specification through a computer program.

[0132] The embodiments of this specification also provide a computer device. Figure 7As shown, in some embodiments of the present specification, the computer device 702 may include one or more processors 704, such as one or more central processing units (CPUs) or graphics processing units (GPUs), and each processing unit may implement one or more hardware threads. The computer device 702 may also include any memory 706, which is used to store any kind of information such as code, settings, data, etc. In a specific embodiment, a computer program on the memory 706 and that can be run on the processor 704, when the computer program is run by the processor 704, the instructions of the method described in any of the above embodiments may be executed. Non-limitingly, for example, the memory 706 may include any one or more combinations of the following: any type of RAM, any type of ROM, flash memory device, hard disk, optical disk, etc. More generally, any memory may use any technology to store information. Further, any memory may provide volatile or non-volatile retention of information. Further, any memory may represent a fixed or removable component of the computer device 702. In one case, when the processor 704 executes an associated instruction stored in any memory or a combination of memories, the computer device 702 may perform any operation of the associated instruction. The computer device 702 also includes one or more drive mechanisms 708 for interacting with any storage, such as a hard disk drive mechanism, an optical disk drive mechanism, etc.

[0133] The computer device 702 may also include an input / output interface 710 (I / O) for receiving various inputs (via input device 712) and for providing various outputs (via output device 714). A specific output mechanism may include a presentation device 716 and an associated graphical user interface 718 (GUI). In other embodiments, the input / output interface 710 (I / O), input device 712, and output device 714 may not be included, and the computer device 702 may be used as a computer device in a network. The computer device 702 may also include one or more network interfaces 720 for exchanging data with other devices via one or more communication links 722. One or more communication buses 724 couple the components described above together.

[0134] The communication link 722 may be implemented in any manner, for example, through a local area network, a wide area network (e.g., the Internet), a point-to-point connection, etc., or any combination thereof. The communication link 722 may include any combination of hardwired links, wireless links, routers, gateway functions, name servers, etc. governed by any protocol or combination of protocols.

[0135] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), computer-readable storage media, and computer program products of some embodiments of the present specification. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processor to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processor generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0136] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processor to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture including an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0137] These computer program instructions can also be loaded onto a computer or other programmable data processor so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for executing on the computer or other programmable device to implement the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0138] In a typical configuration, a computer device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0139] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0140] Computer-readable media include permanent and non-permanent, removable and non-removable media that can be used to store information by any method or technology. Information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computer device. As defined in this specification, computer-readable media does not include temporary computer-readable media (transitory media), such as modulated data signals and carrier waves.

[0141] Those skilled in the art will appreciate that the embodiments of this specification may be provided as methods, systems or computer program products. Therefore, the embodiments of this specification may take the form of complete hardware embodiments, complete software embodiments or embodiments combining software and hardware. Moreover, the embodiments of this specification may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes.

[0142] The present specification embodiments may be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present specification embodiments may also be practiced in distributed computing environments where tasks are performed by remote processors connected through a communication network. In a distributed computing environment, program modules may be located in local and remote computer storage media, including storage devices.

[0143] It should also be understood that in the embodiments of this specification, the term "and / or" is only a description of the association relationship of the associated objects, indicating that three relationships can exist. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in this article generally indicates that the associated objects before and after are in an "or" relationship.

[0144] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the system embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0145] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the embodiments of this specification. In this specification, the schematic representations of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner. In addition, those skilled in the art may combine and combine the different embodiments or examples described in this specification and the features of the different embodiments or examples, without contradiction.

[0146] The above is only an embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. A method for generating a PDF report of a front-end page, characterized in that: The method comprises: Receive PDF report generation request; According to the PDF report generation request, a CSS style is set for the real DOM so that the display form corresponding to the real DOM is the same as the display form corresponding to the pseudo element; Control the target front-end page to display the real DOM and obtain all nodes of the real DOM; Based on all nodes, the target front-end page is intercepted using a preset Canvas generation plug-in to obtain an intercepted image; A PDF report of the target front-end page is generated according to the captured image.

2. The method according to claim 1, characterized in that: According to the PDF report generation request, a CSS style is set for the real DOM so that the display form corresponding to the real DOM is the same as the display form corresponding to the pseudo element, including: Obtain selector style information corresponding to the pseudo-element according to the PDF report generation request; The CSS style is set for the real DOM according to the selector style information, so that the display form corresponding to the real DOM is the same as the display form corresponding to the pseudo element.

3. The method according to claim 1, characterized in that Control the target front-end page to display the real DOM and obtain all nodes of the real DOM, including: Using preset control variables, control the target front-end page to display the real DOM; The outermost nodes of the real DOM are acquired by using a preset node capture algorithm, and all nodes of the real DOM are acquired by traversing from the outermost nodes to the inner nodes.

4. The method according to claim 3, characterized in that Further including: After the PDF report of the target front-end page is generated, the target front-end page is controlled to change from displaying the real DOM to displaying the pseudo-element by using the preset control variables.

5. The method according to claim 1, characterized in that: Based on all nodes, the target front-end page is intercepted using a preset Canvas generation plug-in to obtain an intercepted image, including: The preset Canvas generation plug-in is used to obtain the Canvas images corresponding to all nodes, and the captured image and the size information and typesetting format information corresponding to the captured image are obtained according to the Canvas image.

6. The method according to claim 5, characterized in that Generate a PDF report of the target front-end page based on the captured image, including: Initialize the PDF instance using the preset PDF generation plug-in; Based on the size information and typesetting format information corresponding to the captured image, the captured image is added to the PDF instance to generate a PDF report.

7. A PDF report generation device for a front-end page, characterized in that: The device comprises: A receiving module, used for receiving a PDF report generation request; A setting module, used for setting a CSS style for the real DOM according to the PDF report generation request, so that the display form corresponding to the real DOM is the same as the display form corresponding to the pseudo element; A display module, used to control the target front-end page to display the real DOM and obtain all nodes of the real DOM; The interception module is used to intercept the target front-end page based on all nodes using a preset Canvas generation plug-in to obtain an intercepted image; A generation module is used to generate a PDF report of a target front-end page according to the captured image.

8. A computer device comprising a memory, a processor, and a computer program stored in the memory, characterized in that: When the computer program is executed by the processor, the computer program executes the instructions of the method according to any one of claims 1 to 6.

9. A computer storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor of a computer device, the computer program executes instructions of the method according to any one of claims 1 to 6.

10. A computer program product, characterized in that The computer program product comprises a computer program, and when the computer program is executed by a processor, the computer program executes instructions of the method according to any one of claims 1 to 6.

Images