jspdf and addHTML / blurry font

user3972828 picture user3972828 · Aug 25, 2014 · Viewed 7.7k times · Source

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

Answer

prashant yadav picture prashant yadav · Oct 24, 2017

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.