5

I generate pdf file from a HTML-page via jspdf plugin addHTML. It works but the rendered text / font is really blurry, the original HTML page is not. Rendered images are fine, only text is the problem (see attached images).

original_image: http://111900.test-my-website.de/stackoverflow/orig.jpg

blurry_image: http://111900.test-my-website.de/stackoverflow/blurry.jpg

I read all google results the last three days - maybe I am the only person in the world I have exact this problem?!?! :/

I added the following scripts in my code:

  • spdf.js
  • jspdf.plugin.from_html.js
  • jspdf.plugin.split_text_to_size.js
  • jspdf.plugin.standard_fonts_metrics.js

pdf generation code: pdf.addHTML(document.getElementById("container"),10,15,function() { var string = pdf.save(filename); });

Is there a quality option in jspdf I missed? How can I render the font?

Thanks for reply, Thomas

  • hmm, nobody knows about jsPDF and addHTML() details? –  Aug 27 '14 at 21:31
  • 2
    addHTML uses html2canvas, hence the problem is on that library, not jsPDF. That said, check https://github.com/MrRio/jsPDF/issues/339 – diegocr Sep 18 '14 at 09:56

2 Answers2

-1

I found that when creating a PDF and the text was blurred when using addHtml this was because of the width of the web page. Try using it with the browser not maximised as a test.

My solution was to add some styles to adjust the width before calling addHTML with a width parameter that matches the styles I added. I then remove the additional styles in the function that runs after addHTML.

prashant yadav
  • 192
  • 2
  • 15
-1

I had the same problem and I resolved it. Actually, the main issue here is to specify the 'dpi' to avoid having a blurred image. In addition to that, try to avoid any 'smoothening' features beacuse it may make it worse. I have taken a look around the API and other discussion about it and I came back with the following solution:

1- update your version of html2canvas : many blurring issues have been fixed after the 1.0.0-alpha release.

2- use the following properties :

const context = canvas.getContext('2d');
context.scale(2, 2);
context['dpi'] = 144;
context['imageSmoothingEnabled'] = false;
context['mozImageSmoothingEnabled'] = false;
context['oImageSmoothingEnabled'] = false;
context['webkitImageSmoothingEnabled'] = false;
context['msImageSmoothingEnabled'] = false;
debbeca
  • 11
  • 2
  • 2
    While what you have written may answer the question, however it does seem a little lacking in explanation and may illicit confusion to other users. Can you please expand upon your answer so that it is clearer and more accessible? This will make for better answers and help future users understand how the problem was solved. – Andrew Mar 15 '19 at 11:53