Method, device, storage medium and electronic device for generating PDF file
By setting invisible preview components in a single page application, generating preview objects in HTML format and generating PDF files on the current page, the problem of not being able to generate PDF files in a single page application is solved, and unaware PDF generation and a better user experience are achieved.
Patent Information
- Application Number
- CN202210264882.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-03-17
- Publication Date
- 2025-04-18
- Estimated Expiration
- 2042-03-17
AI Technical Summary
In a single page application, it is impossible to obtain a PDF file generated from the page content of the previous page without the user's awareness.
By setting invisible preview components on the current page, obtaining the specified preview content and generating the corresponding HTML format preview object, and then generating a PDF file on the current page.
It realizes the generation of PDF files without perception in single-page applications, solves the style and compatibility problems that may be caused by traditional back-end services to generate PDFs, and improves user experience and system performance.
Smart Images

Figure CN114722778B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of file processing, and in particular to a method, device, storage medium and electronic equipment for generating a PDF file. Background Art
[0002] Standard writing is a specific form of technical document. In order to facilitate writing, review and use, ISO / IEC and various international standards groups and international standards organizations have a set of basic regulations for writing standards. In other words, there is a unified writing method for standards.
[0003] The implementation method of generating a standard PDF file through the front-end service is to support users to manually input forms, rich text, pictures and other information online through an html page. According to the standard format, after the user fills in the information, he previews the generated PDF style on the html page, and finally pays and downloads the written PDF format document. Usually, after the payment is completed, the user needs to return to the order list and download the document written by the user in PDF format. In the prior art, html generates PDF by referencing a third-party plug-in. In addition, in order to generate PDF, the page node of the html page must be visible, that is, the dom node can be accessed through the js script. Generally speaking, if you want to convert the html page content into PDF format, the html dom node must be on the current page, that is, the preview page.
[0004] However, on the user's order list page that displays orders, since the single-page application only displays one page from beginning to end, that is, when a new page is opened, the original page will be closed, and js cannot obtain the dom node related to the original page. Therefore, there is the following problem, that is, on the order list page, the dom node of the preview page cannot be accessed, and the PDF document cannot be generated according to the dom content, that is, on the order list page, the generated PDF document cannot be previewed. The prior art has the following technical problems: in a single-page application, in the current page, it is impossible to obtain the PDF file generated according to the page content of the previous page without the user noticing.
[0005] The traditional way to achieve the generation of standard PDF files by back-end services is that, based on the relevant information submitted by the user on the front-end, such as forms, rich text, pictures, etc., the back-end service generates a PDF document based on the user input information and the content of each field, and returns the address of the generated PDF document to the front-end. When the user enters the order page, the front-end manually triggers the address of the PDF document, that is, manually triggers the request PDF hyperlink, to download the relevant PDF document to the local computer on the order page. However, the disadvantage of generating standard PDF files through back-end services is that the business logic load of the back-end services is increased, and the style effect of the generated PDF is not as good as the standard PDF files generated by the front-end services, and there may also be compatibility CSS style issues. Summary of the invention
[0006] In view of this, the present invention provides a method, device, storage medium and electronic device for generating a PDF file, which can solve the technical problem that in a single-page application, a PDF file generated based on the page content of the previous page cannot be obtained in the current page without the user noticing.
[0007] The present invention provides a method for generating a PDF file. The method comprises:
[0008] Using the invisible preview component set in the current page, obtain the specified preview content and generate a corresponding invisible preview object in HTML format based on the obtained preview content;
[0009] Based on the preview object in HTML format, a corresponding PDF file is generated in the current page.
[0010] Optionally, the preview component is a positioning element and is set outside the visible window of the current page.
[0011] Optionally, a layer depth value of the preview component in the current page is a negative value.
[0012] Optionally, the preview component is a positioning element and is set outside or inside the visible window of the current page, and the preview interface of the preview component is set under a preset shielding layer after being reduced to a predetermined size range.
[0013] Optionally, based on the preview object in HTML format, generating a corresponding PDF file in the current page includes:
[0014] In response to a condition for generating a PDF file being triggered, a corresponding PDF file is generated in the current page based on the preview object in HTML format.
[0015] Optionally, the preview component includes a content area corresponding to any one or more of the cover, preface, content scope, normative reference documents, term definitions, technical requirements, and appendix.
[0016] Optionally, the generating a corresponding PDF file in the current page based on the preview object in the HTML format includes:
[0017] Obtaining the preview content in HTML format corresponding to the preview object in HTML format;
[0018] Draw the preview content in HTML format on the canvas, and convert the drawn preview content into an image in IMG format;
[0019] Convert the IMG format image to a corresponding PDF file.
[0020] The present invention provides a device for generating a PDF file. The device comprises:
[0021] A preview object generation module: configured to use the invisible preview component set in the current page to obtain the specified preview content and generate a corresponding invisible preview object in HTML format based on the obtained preview content;
[0022] The PDF file generation module is configured to generate a corresponding PDF file in the current page based on the preview object in the HTML format.
[0023] The present invention provides a storage medium, wherein a plurality of instructions are stored in the storage medium; the plurality of instructions are used for a processor to load and execute the method as described in any of the preceding items.
[0024] The present invention provides an electronic device, comprising:
[0025] A processor, which is used to execute multiple instructions;
[0026] A memory for storing a plurality of instructions;
[0027] Wherein, the multiple instructions are used to be stored by the memory, and loaded and executed by the processor as the method described in any of the previous items.
[0028] The process of generating PDF in the present invention is generated by the front-end service, and the controllability is stronger. By locating the characteristics of the element, the element content can be operated to generate a PDF format document without the user's perception, visibility, and influence on the current page display. Compared with the implementation method of generating a standard PDF file by the back-end service, the style problem that may be caused by the traditional back-end service generating PDF is solved. The PDF is generated by the front-end control, and the compatibility is better, and there is no need to initiate an ajax request, which saves broadband traffic and provides a better user experience.
[0029] The technical solution of the present invention is further described in detail below through the accompanying drawings and embodiments. BRIEF DESCRIPTION OF THE DRAWINGS
[0030] The above and other purposes, features and advantages of the present invention will become more apparent by describing the embodiments of the present invention in more detail in conjunction with the accompanying drawings. The accompanying drawings are used to provide a further understanding of the embodiments of the present invention and constitute a part of the specification. Together with the embodiments of the present invention, they are used to explain the present invention and do not constitute a limitation of the present invention. In the accompanying drawings, the same reference numerals generally represent the same components or steps.
[0031] Figure 1 It is a flowchart of a method provided by an exemplary embodiment of the present invention.
[0032] Figure 2 It is a flowchart of a method provided by another exemplary embodiment of the present invention.
[0033] Figure 3 A schematic structural diagram of a device provided by an exemplary embodiment of the present invention.
[0034] Figure 4 This is a structure of an electronic device provided by an exemplary embodiment of the present invention. DETAILED DESCRIPTION
[0035] Below, the exemplary embodiments according to the present invention will be described in detail with reference to the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all the embodiments of the present invention, and it should be understood that the present invention is not limited to the exemplary embodiments described here.
[0036] It should be noted that the relative arrangement of components and steps, the numerical expressions and numerical values set forth in these embodiments do not limit the scope of the present invention unless specifically stated otherwise.
[0037] Those skilled in the art can understand that the terms "first" and "second" in the embodiments of the present invention are only used to distinguish different steps, devices or modules, etc., and neither represent any specific technical meaning nor indicate the necessary logical order between them.
[0038] It should also be understood that, in the embodiments of the present invention, “plurality” may refer to two or more than two, and “at least one” may refer to one, two or more than two.
[0039] It should also be understood that any component, data or structure mentioned in the embodiments of the present invention can generally be understood as one or more, unless explicitly limited or otherwise indicated in the context.
[0040] In addition, the term "and / or" in the present invention is only a description of the association relationship of the associated objects, indicating that there can be three relationships. 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 the present invention generally indicates that the associated objects before and after are in an "or" relationship.
[0041] It should also be understood that the description of the various embodiments of the present invention focuses on the differences between the various embodiments, and the same or similar aspects thereof can be referenced to each other, and for the sake of brevity, they will not be described one by one.
[0042] At the same time, it should be understood that for the convenience of description, the sizes of the various parts shown in the drawings are not drawn according to the actual proportional relationship.
[0043] The following description of at least one exemplary embodiment is merely illustrative in nature and is in no way intended to limit the invention, its application, or uses.
[0044] Technologies, methods, and equipment known to ordinary technicians in the relevant art may not be discussed in detail, but where appropriate, the technologies, methods, and equipment should be considered part of the specification.
[0045] It should be noted that like reference numerals and letters refer to similar items in the following figures, and therefore, once an item is defined in one figure, it need not be further discussed in subsequent figures.
[0046] Embodiments of the present invention can be applied to electronic devices such as terminal devices, computer systems, servers, etc., which can operate with many other general or special computing system environments or configurations. Examples of well-known terminal devices, computing systems, environments and / or configurations suitable for use with electronic devices such as terminal devices, computer systems, servers, etc. include, but are not limited to: personal computer systems, server computer systems, thin clients, thick clients, handheld or laptop devices, microprocessor-based systems, set-top boxes, programmable consumer electronics, network personal computers, small computer systems, large computer systems, and distributed cloud computing technology environments including any of the above systems, etc.
[0047] Electronic devices such as terminal devices, computer systems, servers, etc. can be described in the general context of computer system executable instructions (such as program modules) executed by computer systems. Generally, program modules can include routines, programs, object programs, components, logic, data structures, etc., which perform specific tasks or implement specific abstract data types. Computer systems / servers can be implemented in a distributed cloud computing environment, where tasks are performed by remote processing devices linked through a communication network. In a distributed cloud computing environment, program modules can be located on local or remote computing system storage media including storage devices.
[0048] Exemplary Methods
[0049] Figure 1 FIG. 1 is a flow chart of a method for generating a PDF file provided by an exemplary embodiment of the present invention. This embodiment can be applied to electronic devices such as Figure 1 As shown, the following steps are included:
[0050] Step S1, using the invisible preview component set in the current page, obtaining the specified preview content and generating a corresponding invisible preview object in HTML format based on the obtained preview content.
[0051] The preview component includes a content area corresponding to any one or more of the cover, preface, content scope, normative reference documents, term definitions, technical requirements, and appendix. The preview content is the content that is expected to be displayed in the PDF file, for example, it can be any one or more of the content in other pages except the order page in a single-page application, the blank order information in the order page, and the information entered by the user in the blank order in the order page. The user specifies the preview content according to the use needs, and the specified preview content is used as the data object transmitted to the preview component. According to the content area, the attribute content such as text information corresponding to the data object is rendered in the corresponding content area, thereby constructing a preview object in HTML format.
[0052] In this embodiment, after the preview component is constructed, a preview object is generated. In the current page of the single-page application, the preview object is referenced, that is, the preview component previously laid out is introduced into the current page through the preview object. Therefore, in the current page, by introducing the preview component and transmitting the data object of the preview component to the preview component, the preview object can be displayed on the current page, and the displayed text content is displayed in the format of the PDF document layout.
[0053] For example, the current page is an order list page. By introducing a preview component on the order list page, the preview component already exists on the order list page before the user pays for the order. According to the PDF format effect, all the data information edited by the user is displayed in the preview component. At this time, the content of the preview component is visible on the order list page.
[0054] On the current page, the preview object is set to be invisible. On the current page, for example, on the order list page, after the preview object is introduced, if the preview object is not hidden, the preview object will be displayed on the current order list page, which is inconsistent with the product UI design.
[0055] In this embodiment, the method of making the preview component and the preview object invisible includes but is not limited to: setting the preview component as a positioning element and setting it outside the visible window of the current page. Setting the layer depth value of the preview component in the current page to a negative value. Setting the preview component as a positioning element and setting it outside or inside the visible window of the current page, and the preview interface of the preview component is set under the preset blocking layer after being reduced to a predetermined size range. For example, the z-index of the preview object is set to be negative, that is, the stacking order is the smallest, so that it will be blocked by other DOM nodes on the current page, or the position of the preview object is set to a distance of 9999 from the top and the right side of the visible window, that is, the preview object is moved to the outside of the page visible port. The z-index is interpreted as setting the stacking order of DOM elements. DOM elements with higher stacking orders are always in front of elements with lower stacking orders and will not be blocked by elements with lower stacking orders.
[0056] Step S2: Generate a corresponding PDF file in the current page based on the preview object in HTML format.
[0057] Based on the preview object in the HTML format, generating a corresponding PDF file in the current page includes:
[0058] In response to a condition for generating a PDF file being triggered, a corresponding PDF file is generated in the current page based on the preview object in HTML format.
[0059] There are various conditions for generating the PDF file. For example, if the condition for generating the PDF file is that the user completes the order payment, the PDF file is automatically generated and downloaded in the current page.
[0060] In this embodiment, the preview object is referenced by the current page, and the content edited by the user on other pages is passed to the preview component. At this time, the preview component is invisible to the user, but the preview component has the function of implicit display. The preview component is displayed on the current page, and the PDF content and PDF page layout to be generated can be obtained through the script. The preview content in HTML format corresponding to the preview object in HTML format is obtained; the preview content in HTML format is drawn on the canvas, and the drawn preview content is converted into an image in IMG format; the image in IMG format is converted into a corresponding PDF file.
[0061] In this embodiment, the preview function is made into a component, which means that it can be referenced and displayed in various locations in the current application or project. Therefore, on the current page, for example, on the order list page, there is a preview object obtained, and the corresponding DOM node is obtained. By setting the preview component and the preview object to be invisible, but in fact, the preview component exists on the current page, the DOM element of the entire preview component can be obtained through a scripting language, and the DOM child nodes of the preview component DOM element are traversed in turn to obtain the text content corresponding to the child node, so as to generate a PDF document. In addition, the preview object is invisible to the user and does not affect the page layout of the current page. There is no impact on the user experience. When the user is unaware of the preview object, the relevant HTML is converted into a content document in PDF format and downloaded locally.
[0062] Figure 2 FIG. 1 is a flow chart of a method for generating a PDF file provided by an exemplary embodiment of the present invention. Figure 2 As shown, in a single-page application or project, step S21: on the setting page, encapsulate the content and format of the PDF to be generated as a component through html; step S22: reference the html preview object corresponding to the component on the order list page; step S23: set the preview component to a positioning attribute to make it invisible; step S24: on the order list page, a third-party plug-in converts the html preview object into a PDF document.
[0063] Exemplary Devices
[0064] Figure 3 FIG. 1 is a schematic diagram of a structure of an apparatus for generating a PDF file provided by an exemplary embodiment of the present invention. Figure 3 As shown, the device for generating a PDF file includes a preview object generating module 31 and a PDF file generating module 32.
[0065] The preview object generation module 31 is configured to use the invisible preview component set in the current page to obtain the specified preview content and generate a corresponding invisible preview object in HTML format based on the obtained preview content.
[0066] The PDF file generating module 32 is configured to generate a corresponding PDF file in the current page based on the preview object in the HTML format.
[0067] Exemplary Electronic Devices
[0068] Figure 4 The electronic device provided by an exemplary embodiment of the present invention may be any one or both of the first device and the second device, or a stand-alone device independent of them, and the stand-alone device may communicate with the first device and the second device to receive the collected input signals from them. Figure 4 FIG. 1 is a block diagram of an electronic device according to an embodiment of the present disclosure. Figure 4 As shown, the electronic device includes one or more processors 41 and a memory 42 .
[0069] The processor 41 may be a central processing unit (CPU) or other forms of processing units having data processing capabilities and / or instruction execution capabilities, and may control other components in the electronic device to perform desired functions.
[0070] The memory 42 may include one or more computer program products, which may include various forms of computer-readable storage media, such as volatile memory and / or non-volatile memory. The volatile memory may include, for example, random access memory (RAM) and / or cache memory (cache), etc. The non-volatile memory may include, for example, read-only memory (ROM), hard disk, flash memory, etc. One or more computer program instructions may be stored on the computer-readable storage medium, and the processor 41 may run the program instructions to implement the method for generating a PDF file and / or other desired functions of the software program of each embodiment of the present disclosure described above. In one example, the electronic device may also include: an input device 43 and an output device 44, which are interconnected via a bus system and / or other forms of connection mechanisms (not shown).
[0071] In addition, the input device 43 may also include, for example, a keyboard, a mouse, etc.
[0072] The output device 44 can output various information to the outside. The output device 44 can include, for example, a display, a speaker, a printer, a communication network and a remote output device connected thereto.
[0073] Of course, to simplify, Figure 4 Only some of the components related to the present disclosure in the electronic device are shown, and components such as a bus, an input / output interface, etc. are omitted. In addition, according to specific application situations, the electronic device may further include any other appropriate components.
[0074] Exemplary computer program products and computer-readable storage media
[0075] In addition to the above-mentioned methods and devices, an embodiment of the present disclosure may also be a computer program product, which includes computer program instructions, which, when executed by a processor, enable the processor to execute the steps in the method for generating a PDF file according to various embodiments of the present disclosure described in the above “Exemplary Method” section of this specification.
[0076] The computer program product may be written in any combination of one or more programming languages to write program code for performing the operations of the disclosed embodiments, including object-oriented programming languages such as Java, C++, etc., and conventional procedural programming languages such as "C" or similar programming languages. The program code may be executed entirely on the user computing device, partially on the user device, as a separate software package, partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server.
[0077] In addition, an embodiment of the present disclosure may also be a computer-readable storage medium having computer program instructions stored thereon, which, when executed by a processor, causes the processor to execute the steps of the method for generating a PDF file according to various embodiments of the present disclosure described in the above “Exemplary Method” section of this specification.
[0078] The computer readable storage medium can adopt any combination of one or more readable media. The readable medium can be a readable signal medium or a readable storage medium. The readable storage medium can include, for example, but is not limited to, a system, device or device of electricity, magnetism, light, electromagnetic, infrared, or semiconductor, or any combination of the above. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.
[0079] The basic principles of the present disclosure are described above in conjunction with specific embodiments. However, it should be noted that the advantages, strengths, effects, etc. mentioned in the present disclosure are only examples and not limitations, and it cannot be considered that these advantages, strengths, effects, etc. are required by each embodiment of the present disclosure. In addition, the specific details disclosed above are only for the purpose of illustration and ease of understanding, and are not limitations. The above details do not limit the present disclosure to the necessity of adopting the above specific details to be implemented.
[0080] Each embodiment in this specification is described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the embodiments can be referred to each other. For the system embodiment, since it basically corresponds to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.
[0081] The block diagrams of the devices, apparatuses, equipment, and systems involved in this disclosure are only illustrative examples and are not intended to require or imply that they must be connected, arranged, and configured in the manner shown in the block diagrams. As will be appreciated by those skilled in the art, these devices, apparatuses, equipment, and systems can be connected, arranged, and configured in any manner. Words such as "including," "comprising," "having," and the like are open words, referring to "including but not limited to," and can be used interchangeably therewith. The words "or" and "and" used herein refer to the words "and / or," and can be used interchangeably therewith, unless the context clearly indicates otherwise. The word "such as" used herein refers to the phrase "such as but not limited to," and can be used interchangeably therewith.
[0082] The method and apparatus of the present disclosure may be implemented in many ways. For example, the method and apparatus of the present disclosure may be implemented by software, hardware, firmware, or any combination of software, hardware, and firmware. The above order of steps for the method is for illustration only, and the steps of the method of the present disclosure are not limited to the order specifically described above, unless otherwise specifically stated. In addition, in some embodiments, the present disclosure may also be implemented as a program recorded in a recording medium, which includes machine-readable instructions for implementing the method according to the present disclosure. Therefore, the present disclosure also covers a recording medium storing a program for executing the method according to the present disclosure.
[0083] It should also be noted that in the apparatus, equipment and method of the present disclosure, each component or each step can be decomposed and / or recombined. These decompositions and / or recombinations should be regarded as equivalent schemes of the present disclosure. The above description of the disclosed aspects is provided to enable any technician in the field to make or use the present disclosure. Various modifications to these aspects are very obvious to those skilled in the art, and the general principles defined herein can be applied to other aspects without departing from the scope of the present disclosure. Therefore, the present disclosure is not intended to be limited to the aspects shown here, but to the widest scope consistent with the principles and novel features disclosed herein.
[0084] The above description has been given for the purpose of illustration and description. In addition, this description is not intended to limit the embodiments of the present disclosure to the forms disclosed herein. Although multiple example aspects and embodiments have been discussed above, those skilled in the art will recognize certain variations, modifications, changes, additions and sub-combinations thereof.
Claims
1. A method for generating a PDF file, characterized in that: include: Using the invisible preview component set in the current page, the specified preview content is obtained and a corresponding invisible preview object in HTML format is generated based on the obtained preview content, wherein the preview component is a positioning element and is set outside the visible window of the current page; or the layer depth value of the preview component in the current page is a negative value; or the preview component is a positioning element and is set outside or inside the visible window of the current page, and the preview interface of the preview component is reduced to a predetermined size range and is set under a preset shielding layer; Based on the preview object in the HTML format, generating a corresponding PDF file in the current page includes: Obtaining the preview content in HTML format corresponding to the preview object in HTML format; Draw the preview content in HTML format on the canvas, and convert the drawn preview content into an image in IMG format; Convert the IMG format image to a corresponding PDF file.
2. The method according to claim 1, characterized in that Based on the preview object in the HTML format, generating a corresponding PDF file in the current page includes: In response to a condition for generating a PDF file being triggered, a corresponding PDF file is generated in the current page based on the preview object in HTML format.
3. The method according to claim 1, characterized in that The preview component includes a content area corresponding to any one or more of the cover, preface, content scope, normative reference documents, term definitions, technical requirements, and appendix.
4. A device for generating a PDF file, characterized in that: The device comprises: A preview object generation module is configured to use an invisible preview component set in the current page to obtain specified preview content and generate a corresponding invisible preview object in HTML format based on the obtained preview content, wherein the preview component is a positioning element and is set outside the visible window of the current page; or the layer depth value of the preview component in the current page is a negative value; or the preview component is a positioning element and is set outside or inside the visible window of the current page, and the preview interface of the preview component is reduced to a predetermined size range and is set under a preset shielding layer; The PDF file generation module is configured to generate a corresponding PDF file in the current page based on the preview object in the HTML format, including: Obtaining the preview content in HTML format corresponding to the preview object in HTML format; Draw the preview content in HTML format on the canvas, and convert the drawn preview content into an image in IMG format; Convert the IMG format image to a corresponding PDF file.
5. A computer-readable storage medium, wherein a plurality of instructions are stored in the storage medium; the plurality of instructions are used for a processor to load and execute the method as claimed in any one of claims 1 to 3.
6. An electronic device, characterized in that: The electronic device comprises: A processor, which is used to execute multiple instructions; A memory for storing a plurality of instructions; The plurality of instructions are used to be stored in the memory and loaded and executed by the processor according to any one of claims 1 to 3.
Citation Information
Patent Citations
Method for acquiring web page loaded file of swf format and for generating file of PDF format
CN105389293A
Web page uploading method and device
CN108121761A