Dieser Artikel wurde - im Gegensatz zu den meisten Artikeln meines Blogs - in Englisch verfasst.
Einer der Gründe dafür könnte sein, dass es sich um einen technischen Artikel handelt, der in englischer Sprache einem breiteren Publikum helfen kann.
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.

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:

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)

Veröffentlicht von

Christian Hänsel

Web-Entwickler, SEO-Experte. Ich liebe technisches SEO, die Entwicklung von neuen Ideen und alles rund um das Internet... ja, ich habe mein Hobby zum Beruf gemacht und gehe auch Montags gerne zur Arbeit.

Verfasse einen Kommentar