Demand background
- Service system needs to preview the report (e.g., weekly products, medical reports, etc.) and generates a pdf format for download, or periodically sent to specified users
- Report format is relatively fixed, by the text, images and graphics composition, remained consistent with the front page
solution
Demand in two steps: a preview report and report generation.
- Report preview display in the front end, the front end of techniques may be used, such as React / Vue stack its reduction techniques, data acquired from the server.
- The first step required to generate reports generated HTML converts PDF generation, HTML2PDF way is divided into two types:
- canvas generation scheme based client
- Nodejs + generation scheme based on the service side of the puppeteer
A full case
Below the case of a medical report explained that the two schemes: the medical report shows the following form, the format is relatively fixed, divided into four pages: the personal information page, recommend page, principle page, personal page with suggestions from page data server.
canvas generation scheme based client
is new in HTML5 standard canvas element can be used to draw graphics by using the JS script. canvas provides toDataURL / toBlob method for converting the contents of the canvas as a picture, API documentation, as follows (from MDN):
Because HTML document and then the browser is in the form of a DOM tree, so we can be done through a three-step HTML to PDF conversion:
- The DOM tree into a canvas object may be used to complete html2canvas
- Convert canvas as a picture, you can use canvas.toDataURL complete
- Convert images to PDF, can be used to complete jsPDF
Achieve complete code: github.com/simonwoo/di...
Screenshot below, click on the download button to make pdf production:
The program is fully client-based ways which do not need server support. In the process of using this program, we found some problems:
- Production of PDF is vague, the quality is not high
- If the HTML has pictures of foreign chains, unable to generate
- The first step is due to go through the DOM generated canvas, so for particularly long report, DOM has not finished loading then click to download, report generation can cause problems
- Because it is a client program, it is necessary to trigger the generation of active users, but for some regular reports sent to the user, the program can not be used
Nodejs + generation scheme based on the service side of the puppeteer
puppeteer is google launched headless browser, the browser that is not a graphical interface, but can achieve common browser HTML / JS / CSS rendering, as well as other basic browser functionality. You can be understood as a no Chrome browser interface. There are the following usage scenarios:
- Screenshot generated pages and PDF
- SPA crawl content and generate pre-rendered (ie "SSR")
- Reptiles, you need to grab content from a website
- Automated testing, automatic form submissions, UI testing, keyboard input, etc.
- Create a new automated test environment. Using the latest JavaScript and browser capabilities, run directly by understanding puppeteer test functions, we can open an instance to render HTML report in the latest version of Chrome, and then use PDF conversion functionality provided by its PDF generation.
Two important API:
- page.goto (url, [options]) - opens the url of the file can be local file (file: //) or a network file (http: //)
- page.pdf ([options]) - convert pages into PDF files
puppeteer using a small example, to convert the Baidu page as pdf:
The complete code is as follows:
- The front part: github.com/simonwoo/di...
- The back-end part: github.com/simonwoo/di...
Project Initiation process is as follows:
- Into the webapp directory, use npm install and npm run start start the front-end server, the address is: localhost: 3000
- Into the server directory, use npm install and start npm run dev server node, the address is: localhost: 7001
The entire service architecture is as follows:
By increasing the server node routing controller a pdf generated by the controller to load the starting puppeteer example localhost: 3000 page and generates pdf. Directly in the browser by 7001 / pdf: http: // localhost to access the pdf generated.
In a real environment, can be deployed on the front page nginx server or directly on the Node server, puppeteer also supports the use of the cookie operation, to avoid some of the issues that need authentication.
Compared client generates manner using the generated pdf puppeteer relatively high quality to meet the production requirements.
Two scenarios mentioned herein are omitted ajax rear end portion of the requested data, the reader may need to increase their own.
Reference
- Html2chanvs - Html2chanvskhertsenkcom/dochumenttikkk
- jsPDF - github.com/MrRio/jsPDF
- puppeteer - zhaoqize.github.io/puppeteer-a…
- Eggs - eggjs.org/zh-cn/
Reproduced in: https: //juejin.im/post/5d036a78f265da1bce3dcd40