jspdf和addHTML /模糊字体

时间:2014-08-25 20:21:21

标签: text fonts jspdf blurry

我通过jspdf插件addHTML从HTML页面生成pdf文件。 它工作但渲染的文本/字体非常模糊,原始的HTML页面不是。渲染图像很好,只有文本是问题(参见附图)。

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

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

我在过去三天阅读了所有谷歌搜索结果 - 也许我是世界上唯一一个确切存在这个问题的人?!?! :/

我在代码中添加了以下脚本:

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

pdf生成代码:     pdf.addHTML(document.getElementById("container"),10,15,function() { var string = pdf.save(filename); });

我错过了jspdf的质量选项吗? 我该如何渲染字体?

感谢您的回复, 托马斯

2 个答案:

答案 0 :(得分:0)

我发现在创建PDF时,使用addHtml时文本模糊,这是因为网页的宽度。尝试使用浏览器未最大化作为测试。

我的解决方案是在调用addHTML之前添加一些样式来调整宽度,其宽度参数与我添加的样式相匹配。然后我删除addHTML之后运行的函数中的其他样式。

答案 1 :(得分:0)

我遇到了同样的问题,我解决了。

1-更新您的htlm2canvas版本

2-使用以下属性:

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;