Html2canvas jsPDF official website

Implementation one: jsPDF
Implementation two: jsPDF + html2Canvas

Scheme 1: jsPDF implementation:

  • Import jsPDF files:
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
Copy the code

Using npm:

npm install jspdf --save
Copy the code
  • Code (pdf.text()):
  let pdf = new jsPDF()
  pdf.text('Hello world! '.10.10)
  pdf.save(PDF ' 'export.)
Copy the code
  • Code implementation (pdf.fromhtml ()):
let pdf = new jsPDF()
pdf.fromHTML(document.getElementById('box'), 10.10)
Copy the code

Problem: Chinese garbled characters

In the process of exporting files containing Chinese characters, it is found that Chinese characters are displayed in garble. According to the document, jsPDF does not support Chinese characters. Next, we will talk about the second implementation method: HTML2Canvas to CANva. According to the project JSPDF-Customfonts-support, Chinese fonts are introduced to solve the problem of garble displayed in Chinese fonts after partial export of PDF. There is no CDN in this plug-in. Download the source code of the project locally. Related scripts are stored in the dist folder and font files are stored in the FONT folder.

Test code:

Introducing font libraries

  let pdf = new jsPDF();

  pdf.addFont('NotoSansCJKjp-Regular.ttf'.'NotoSansCJKjp'.'normal');

  // PDF title Settings
  pdf.setFont('NotoSansCJKjp');

  pdf.text('I have finally reached the age I dreamed of when I was a child. Do you still remember my childhood fantasy?'.10.10)
  pdf.save(PDF ' 'export.)
Copy the code

BUT when tested, 30-40% of the words were still not displayed properly. In view of the actual business logic in China, this scheme is not feasible if Chinese cannot be displayed normally. I can only find one method of HTML () on the official website, which is also realized by combining html2Canvas.

The AND pdF.fromhtml () method is no less troublesome than the jsPDF + html2Canvas implementation

Scheme 2: jsPDF + HTML2Canvas implementation

The jsPDF plugin is not friendly enough for Chinese support, causing garbled characters. At present, a better solution is to replace the Chinese part with pictures. Another way to do this is to make a text pack. Doing so requires a deep understanding of the source code. Feel so troublesome, you can add all the content to Canvas, use html2Canvas plug-in to convert the content in Canvas into pictures, and then display the pictures in JSPDF

Once wrote a concrete implementation please refer to

Disadvantages:

  • Paging needs to be calculated manually;
  • DOM cannot be detected in pages and will be directly cut off when a table is encountered.
  • Add header/tail complex;
  • The generated files are large in size.

Solution 3: PDfKit + SVG-to-PDfKit + voilab-PDF-table

Much the same without testing.

Conclusion: After several hours of trying and looking up information, (the current project is back-end implementation), about PDF generation, we should choose the implementation according to our own business logic. Window.print () is a pretty cool way to do browser printing if you’re just doing page printing.

I will study later and make a summary by myself. Reference documentation