jspdf 和 addHTML / 模糊字体

Question

我通过 jspdf 插件 addHTML 从 HTML 页面生成 pdf 文件。 它可以工作，但渲染的文本/字体真的很模糊，原始的 HTML 页面不是。渲染的图像很好，只有文字是问题（见附图）。

原始图像：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 中的质量选项吗？ 如何渲染字体？

感谢您的回复， 托马斯

Answer 1

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

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

Answer 2

我遇到了同样的问题，我解决了。 实际上，这里的主要问题是指定“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;