Solved: html2pdf blurry text in PDF

I’m using html2pdf to create a PDF document from a HTML source with JavaScript. One problem I have encountered is very blurry text in the output PDF document.

I have tried fiddling with the DPI settings of html2canvas, but to no avail.

tl;dr – Blurry text on html2pdf / html2canvas PDF output

Here’s the very short version on how to solve this problem

How to solve blurry text in html2pdf PDF file

• Open your code file and navigate to the html2pdf()-Function
• Remove the „dpi“ parameter of html2canvas
• Add the „scale“ parameter to the html2canvas object

Longer version on how to solve the blurry text problem

Finally, I have found somewhere on Github (sorry, forgot where it was) that I could use the scale option of html2canvas.

Here is the original code:

This shows really ugly text, which appears blurred like this:

Using the scale option of html2canvas, I finally came to this result:

I achieved this by removing the dpi option and adding the scale option to my html2canvas object within html2pdf:

Here is a direct comparison between the two results. Click to open the image in an overlay to see the difference :)