Method for generating PDF (Portable Document Format) based on front-end language

Abstract

The invention discloses a method for generating a PDF (Portable Document Format) based on a front-end language, and belongs to the technical field of computers. The method comprises the following steps: firstly, writing codes, code types, dynamic data and code dependencies of a to-be-processed front-end language into a server; generating a rendering file and a hydration file according to the code type; calling the rendering file to render the code and the dynamic data into an html code through a server-side rendering technology; inserting the code dependency item and the html code into corresponding positions in an html template to form an html page; then, the hydration file is called to carry out hydration on the html page; and finally, accessing the html page and generating a PDF file corresponding to the front-end language to be processed. The method provided by the invention supports all popular front-end languages or frameworks, and by adopting the scheme provided by the invention, a complex and high-fidelity PDF document can be easily generated.

Description

Technical Field

[0001] The present application belongs to the field of computer technology, and more specifically, to a method for generating PDF based on a front-end language. Background Art

[0002] With the development of all walks of life, users have more and more complex requirements for the content of PDF documents. Not only do they require PDF documents to contain text, pictures, tables, charts, etc., but they also have high requirements for the aesthetics and clarity of PDF documents.

[0003] At present, the technical means of generating PDF based on computer language are mainly divided into two categories. One is through front-end implementation. Front-end development generates PDF through canvas technology or DOM operation technology, but there will be problems such as PDF content truncation and insufficient PDF clarity. The other is through back-end implementation. Back-end implementation can generate high-fidelity PDF documents, but the back-end must be very familiar with front-end development technology to generate PDF documents that meet the complex needs of users, which increases the learning cost of back-end development. In general, it is difficult to generate a complex and high-fidelity PDF document at this stage. Summary of the invention

[0004] In response to the above defects or improvement needs of the prior art, the present application provides a method for generating PDF based on a front-end language, which aims to solve the technical problem that it is too difficult to generate complex and high-fidelity PDF documents at this stage.

[0005] To achieve the above objectives, in a first aspect, the present application provides a method for generating a PDF based on a front-end language, comprising:

[0006] Write the code, dynamic data and code dependencies of the front-end language to be processed into the server according to the code type;

[0007] Rendering the code and dynamic data into HTML code through server-side rendering technology;

[0008] Insert the code dependencies and HTML code into corresponding positions in the HTML template to form an HTML page;

[0009] Hydrate the HTML page;

[0010] Access the html page and generate a PDF file corresponding to the front-end language to be processed.

[0011] Preferably, a rendering file and a hydration file are generated according to the code type; the rendering file is called to render the code and dynamic data into HTML code through server-side rendering technology; and the hydration file is called to hydrate the HTML page.

[0012] Preferably, the front-end language code is written into the server according to the code type, specifically:

[0013] If the code type of the front-end language is HTML, the HTML code is written to the server in character form;

[0014] If the code type of the front-end language is ejs, the ejs template engine is used to render the ejs code into html and then write it to the server in character form;

[0015] If the code type of the front-end language is react, preact, solid, vue, or svelte, write the corresponding code directly to the server.

[0016] Preferably, if the code type of the front-end language is react, preact, solid, vue or svelte, the corresponding code is directly written to the server, and the plug-in of the corresponding code is introduced into the configuration file.

[0017] Preferably, before rendering the code and dynamic data into HTML code, the configuration file, the startup service file, the project dependencies and the HTML template are written to the server.

[0018] Preferably, before rendering the code and dynamic data into HTML code, the service startup file is executed to start the service.

[0019] Preferably, before rendering the code and dynamic data into HTML code, project dependencies are installed.

[0020] Preferably, the html page is accessed through a browser and a PDF file is generated.

[0021] In a second aspect, the present application provides an electronic device, comprising: a memory for storing programs; a processor for executing the programs stored in the memory, and when the programs stored in the memory are executed, the processor is used to execute any of the methods described in the first aspect.

[0022] In a third aspect, the present application provides a storage medium storing a computer program, which, when executed on a processor, enables the processor to execute any of the methods described in the first aspect.

[0023] In general, the above technical solutions conceived by this application have the following beneficial effects compared with the prior art:

[0024] This application solution uses server-side rendering technology to render various front-end codes into HTML pages on the server side, and then generates high-fidelity PDF documents by accessing HTML pages. This application solution does not require proficiency in various types of front-end languages, and can easily generate complex and high-fidelity PDF documents. At the same time, this application technical solution supports all currently popular front-end languages. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] Figure 1 This is a flow chart of a method for generating PDF based on a front-end language provided by an embodiment of the present invention;

[0026] Figure 2 It is a schematic diagram of the structure of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0027] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0028] The terms "first" and "second" in the specification and claims herein are used to distinguish different objects rather than to describe a specific order of the objects. For example, a first response message and a second response message are used to distinguish different response messages rather than to describe a specific order of the response messages.

[0029] In the embodiments of the present application, words such as "exemplary" or "for example" are used to indicate examples, illustrations or descriptions. Any embodiment or design described as "exemplary" or "for example" in the embodiments of the present application should not be interpreted as being more preferred or more advantageous than other embodiments or designs. Specifically, the use of words such as "exemplary" or "for example" is intended to present related concepts in a specific way.

[0030] In the description of the embodiments of the present application, unless otherwise specified, "multiple" means two or more than two. For example, multiple processing units refer to two or more processing units, etc.; multiple elements refer to two or more elements, etc.

[0031] The multiple parameters that this application method needs to receive are as follows:

[0032] Code: To generate PDF-style front-end language code (including HTML code, EJS code, React code, Vue code, Svelte code, PreactJS code or SolidJS code), this application will render this code into the corresponding HTML through server-side rendering;

[0033] Code Type (codeType): including html, ejs, react, vue, svelte, preactjs and solidjs. This parameter indicates the code type of the code.

[0034] Dynamic data: The code in the code may include dynamic data. At this time, this part of data can be passed in through dynamic data;

[0035] Code dependencies (extraResources): Contains code scripts provided in the code (code), such as styles and third-party SDKs. Code dependencies (extraResources) provide these dependencies.

[0036] like Figure 1 As shown, a method for generating a PDF based on a front-end language in an embodiment of the present application is implemented by the following method:

[0037] First, write the code, code type, dynamic data, and code dependencies of the front-end language to be processed into the server;

[0038] Then generate rendering files and hydration files according to the code type;

[0039] Then, the rendering file is called to render the code and dynamic data into HTML code through server-side rendering technology;

[0040] Then insert the code dependencies and HTML code into the corresponding positions in the HTML template to form an HTML page;

[0041] Then call the hydration file to hydrate the HTML page;

[0042] Finally, the html page is accessed and a PDF file corresponding to the front-end language to be processed is generated.

[0043] The specific steps include:

[0044] S1. The front-end language code (code), code type (codeType), dynamic data (data) and code dependencies (extraResources) are preferably used as parameters for generating PDF;

[0045] S2. Create a temporary directory temp in the directory $ROOT specified by the server. All the work of this application will be completed in this directory; create a src directory under the temp directory.

[0046] Copy the index.html, package.json, server.js, and vite.config.js files to the temp directory.

[0047] Among them, the index.html file is an HTML template file used to describe the structure and content of the web page.

[0048] The package.json file is a project dependency and an important file in NodeJs. It is used to define various properties and configurations of the project, including the project name, dependencies, scripts, etc. The npm tool can be used to easily manage project dependencies and run scripts.

[0049] The server.js file is a startup service file. It is a JavaScript file running in NodeJs. It is used to start and run the server. It usually contains the required code to create and configure the server, as well as process client requests and corresponding logic.

[0050] The vite.config.js file is a configuration file for the project, which is used to define the build and development settings of the project.

[0051] S3. Write the code dependencies (extraResources) into the renderHead.js file and copy it into the src directory.

[0052] S4. Write the code into the App file and copy it into the src directory.

[0053] If the code type (codeType) is html, the html code is written to the temporary file in character form.

[0054] If the code type (codeType) is ejs, the ejs code is rendered into html code using the ejs template engine and then written into a temporary file in character form.

[0055] If the code type (codeType) is react, preact, solid, vue or svelte, the corresponding code is directly written to a temporary file, and the plug-in of the code is introduced into the configuration file vite.config.js.

[0056] S5. Generate the server-side rendering file entry-server.js and the client-side hydration file entry-client.js and copy them into the src directory.

[0057] Among them, entry-client.js mainly hydrates the static pages generated by server-side rendering to make the codes in the pages interactive.

[0058] entry-server.js is mainly used for server-side rendering. Different code types (codeType) will call different server-side framework methods to render the code (code) and dynamic data (data) passed in by the user into HTML code.

[0059] S6. Execute npminstall first, then execute node server.js. The service will start on port 5173.

[0060] Among them, npminstall is a command line command for NodeJs. When running npminstall, npm reads the required dependencies from the package.json file and downloads these dependencies from the Internet to the temp directory.

[0061] node server.js means executing server.js. When executing server.js, a service is started, and the server-side rendering file entry-server.js is called to render the code (code) and dynamic data (data) to generate HTML code, and the code dependencies (extraResources) and HTML code are inserted into the corresponding positions of the HTML template index.html and then returned to the browser;

[0062] Call the client hydration file entry-client.js to hydrate the browser HTML page;

[0063] S7. Use puppeteer to access the HTML page on port 5173, and use puppeteer's API to export a high-fidelity PDF file of the HTML page.

[0064] Among them, puppeteer is a Node library that provides an API to control the browser through the DevTools protocol.

[0065] S8. Close the service and delete the temp directory.

[0066] Based on the method in the above embodiment, the embodiment of the present application provides an electronic device, such as Figure 2As shown, the electronic device may include: a processor 810, a communication interface 820, a memory 830 and a communication bus 840, wherein the processor 810, the communication interface 820 and the memory 830 communicate with each other through the communication bus 840. The processor 810 may call the logic instructions in the memory 830 to execute the method in the above embodiment.

[0067] In addition, the logic instructions in the above-mentioned memory 830 can be implemented in the form of a software functional unit and can be stored in a computer-readable storage medium when it is sold or used as an independent product. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product, which is stored in a storage medium and includes a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present application.

[0068] Based on the method in the above embodiment, an embodiment of the present application provides a computer-readable storage medium, which stores a computer program. When the computer program runs on a processor, the processor executes the method in the above embodiment.

[0069] Based on the method in the above embodiment, an embodiment of the present application provides a computer program product. When the computer program product runs on a processor, the processor executes the method in the above embodiment.

[0070] It is understood that the processor in the embodiments of the present application may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application specific integrated circuits (ASIC), field programmable gate arrays (FPGA) or other programmable logic devices, transistor logic devices, hardware components or any combination thereof. The general-purpose processor may be a microprocessor or any conventional processor.

[0071] The method steps in the embodiments of the present application can be implemented by hardware or by a processor executing software instructions. The software instructions can be composed of corresponding software modules, and the software modules can be stored in random access memory (RAM), flash memory, read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), registers, hard disks, mobile hard disks, CD-ROMs, or any other form of storage medium known in the art. An exemplary storage medium is coupled to the processor so that the processor can read information from the storage medium and write information to the storage medium. Of course, the storage medium can also be a component of the processor. The processor and the storage medium can be located in an ASIC.

[0072] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions may be stored in a storage medium or transmitted through the storage medium. The computer instructions may be transmitted from a website site, a computer, a server or a data center to another website site, a computer, a server or a data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The storage medium may be any available medium that a computer can access or a data storage device such as a server or a data center that includes one or more available media integrated. The available medium may be a magnetic medium (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid state disk (SSD)), etc.

[0073] It should be understood that the various numerical numbers involved in the embodiments of the present application are only used for the convenience of description and are not used to limit the scope of the embodiments of the present application.

[0074] The above content is easily understood by those skilled in the art. The above description is only a preferred embodiment of the present application and is not intended to limit the present application. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present application should be included in the protection scope of the present application.

Claims

1. A method for generating PDF based on a front-end language, characterized in that: include: Write the code, dynamic data and code dependencies of the front-end language to be processed into the server according to the code type; Rendering the code and dynamic data into HTML code through server-side rendering technology; Insert the code dependencies and HTML code into corresponding positions in the HTML template to form an HTML page; Hydrate the HTML page; Access the html page and generate a PDF file corresponding to the front-end language to be processed.

2. The method according to claim 1, characterized in that Generate a rendering file and a hydration file according to the code type; call the rendering file to render the code and dynamic data into HTML code through server-side rendering technology; call the hydration file to hydrate the HTML page.

3. The method according to claim 1, characterized in that Write the front-end language code to the server according to the code type, specifically: If the code type of the front-end language is HTML, the HTML code is written to the server in character form; If the code type of the front-end language is ejs, the ejs template engine is used to render the ejs code into html and then write it to the server in character form; If the code type of the front-end language is react, preact, solid, vue, or svelte, write the corresponding code directly to the server.

4. The method according to claim 3, characterized in that If the code type of the front-end language is react, preact, solid, vue, or svelte, write the corresponding code directly to the server and introduce the plug-in of the corresponding code into the configuration file.

5. The method according to claim 1, characterized in that Before rendering the code and dynamic data into HTML code, write the configuration file, startup service file, project dependencies and HTML template to the server.

6. The method according to claim 1, characterized in that Before rendering the code and dynamic data into HTML code, execute the startup service file to start the service.

7. The method according to claim 1, characterized in that Before rendering the code and dynamic data into HTML code, install the project dependencies.

8. The method according to claim 1, characterized in that Access the HTML page through the browser and generate a PDF file.

9. An electronic device, characterized in that: include: Memory, used to store programs; A processor, configured to execute the program stored in the memory; when the program stored in the memory is executed, the processor is configured to execute any one of the methods described in claims 1-8.

10. A storage medium storing a computer program, characterized in that: When the computer program is executed on a processor, the processor is caused to execute the method according to any one of claims 1 to 8.

Images