Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

The previous article introduced some of the front-end ways to implement PDF export, such as browsers, VUe-print-NB, HTML2Canvas, and JSPDF. This article describes the way to realize PDF export by combining the front and back ends, such as WkHTMLTopdf and iText. The front end is mainly responsible for the completion of export template, and the back end is for data filling and export

wkhtmltopdf

Wkhtmltopdf uses webKit rendering engine development, directly HTML pages into PDF, but needs to be installed on the server.

Official website: wkhtmltopdf.org/

Official Issues: github.com/wkhtmltopdf…

Configuration parameters: wkhtmltopdf.org/usage/wkhtm…

The configuration parameters of Chinese reference: segmentfault.com/a/119000001…

Install: Download the installation package from the official website // 2. Check the version: wkHTMLTopdf 0.12.6 (with patched Qt) $wkHTMLTopdf -v // 3. Testing: Enter the test instruction in CMD, $wkhtmltopdf https://www.baidu.com/ ~/Desktop/baidu. PDF // 网 页 $wkhtmltopdf --javascript-delay 3000 Report-html test. PDF // Local HTML pageCopy the code

Baidu page test instructions, you can view the processing progress:

Baidu page export effect display:

The front end needs to write statichtmlThe template page is rendered and exported by the server.

Template page practice stomp:

  1. usingwebkitRendering engine development, yeahCSSStyle overall support friendly, but rightCSS3The new feature is not well supported and some page styles will fail.Wkhtmltopdf uses Qt to render HTML. The current version of Wkhtmltopdf uses Qt 4.8.5 Which uses version 2.2.4 of WebKit, As you can see I tried using the -webkit-prefixesWkhtmltopdf uses Qt to render HTML. The current version of WkHTMLTopdf uses Qt 4.8.5, which uses WebKit version 2.2.4. The -webkit- prefix is recommended.)
  2. usingflexLayout, need to use compatibility style, specific can be viewedissue
  3. usingflexLayout, exportedpdfWill be truncated, so insteadtablelayout
  4. The default font is Song Typeface. If it is not available on the machine, Chinese cannot be displayed. To use a different font, you must install the corresponding font, see Issue
  5. vertical-alignProperties don’t work
  6. Static template writeCSSThe style is a little bit troublesome, so I can write it directlySCSSAnd then synchronously convert toCSS, the implementation is as follows:
Sass --watch test.scss:test.cssCopy the code

iText

IText: Used in Java background to convert HTML files to PDF files. Based on Java to do HTML CSS style parsing processing, only for simpler pages and style support.

Usage process: the front end is responsible for completing the static template page, the back end fills the data based on the template page, and then exports the PDF file, and the front end downloads it.

Template page practice stomp:

  1. rightCSSPoor style support,CSS3Properties are not supported
  2. Can’t useflexLayout, basically only for usetableimplementation
  3. Where you want to change pages, addpage-break-after: always;, indicating that the next element will be page-fedpdf 时 itextWill automatically recognize
  4. In positioning, percentage is not supportedcssattributetop(css property top in percents is not supported)
  5. Absolute positioning may be wrong (Occupied area has not been initialized. Absolute positioning might be applied incorrectly)