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:
var element = document.getElementById('element-to-print'); html2pdf(element, { margin: 1, filename: 'myfile.pdf', image: {type: 'jpeg', quality: 1}, html2canvas: {dpi: 96, logging: true}, jsPDF: {unit: 'in', format: 'a4', orientation: 'l'} });
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:
var element = document.getElementById('element-to-print'); html2pdf(element, { margin: 1, filename: 'myfile.pdf', image: {type: 'jpeg', quality: 1}, html2canvas: {scale: 2, logging: true}, jsPDF: {unit: 'in', format: 'a4', orientation: 'l'} });
Here is a direct comparison between the two results. Click to open the image in an overlay to see the difference :)

Thank you.
This really helped me.