Which JavaScript Library Should I Use for Client-side HTML-to-PDF Conversion?

First of all, let me give you the list of the libraries that I have tried: jsPDF, html2pdf.js, pdfmake, and pdf.js. They are all open-source projects that you can find on GitHub.

I presented here several aspects of the web page rending using these Javascript libraries.

First, the fidelity of CSS style — jsPDF preserves style the best, while html2pdf.js is also good, but the PDF it generated is a big image, and text is not selectable. pdfmake, on the other hand, cannot keep the CSS style very well. Note that the font-weight and font-type are both lost.

Second, the page break — jsPDF currently cannot render a page break. Instead, it creates a continuing page. And the hyperlink is not clickable. The good? Again, it preserves the style well. Html2pdf.js does have a page break with a clickable hyperlink, but the line of the text is split into separate pages. Pdfmake is the winners on this count.

Third, background-image — both jsPDF and pdfmake have trouble rendering an element with the background-image property. html2pdf.js is the only one I tested that works.

Pdf.js is usually used for rendering actual PDF files. But the new release of jsPDF leveraged pdf.js to convert HTML page to PDF and allows user-defined file name for download.

As you can tell, there is no one-size-fits-all solution. The purpose of this article is to brief the pros and cons of these libraries so you can choose the right one for your project. These are my personal experience and preference. I prefer jsPDF for most of the use cases. If you have a different opinion, you are more than welcome to leave a comment. Happy coding!