Problem with blurry text on PDF output when using html2canvas within html2PDF

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.


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:

Blurry text on PDF output when using html2canvas within html2PDF
Blurry text on PDF output when using html2canvas within html2PDF

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

sharp text on PDF output when using html2canvas within html2PDF
Sharp text on PDF output when using html2canvas within html2PDF

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 :)

Problem with blurry text on PDF output when using html2canvas within html2PDF
Comparison of the text on PDF output when using html2canvas within html2PDF (bluury vs. sharp output)
Solved: html2pdf blurry text in PDF
Wie bewertests Du diesen Beitrag? Rate this postplease.

Kommentar verfassen