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:

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