jspdf和addHTML/模糊字体



我通过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中的质量选项吗?如何呈现字体?

感谢回复,Thomas

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

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

我遇到了同样的问题,我解决了它。实际上,这里的主要问题是指定"dpi"以避免图像模糊。除此之外,尽量避免任何"平滑"功能,因为这可能会使情况变得更糟。我浏览了API和其他关于它的讨论,然后我得到了以下解决方案:

1-更新您的html2canvas版本:在1.0.0-alpha版本之后,许多模糊问题已经得到修复。

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;

最新更新