wkhtmltopdf / tables / acrobat-reader 的 PDF 显示错误
Posted
技术标签:
【中文标题】wkhtmltopdf / tables / acrobat-reader 的 PDF 显示错误【英文标题】：PDF Display Errors with wkhtmltopdf / tables / acrobat-reader 【发布时间】：2012-01-08 19:47:03 【问题描述】：我使用 wkhtmltopdf 从 html 页面生成了一个 PDF 文件。 html 页面使用具有 1 像素边框的表格。如果我用 Acrobat 或 Foxit 打开 PDF，它们会随机错过绘制垂直边框，但如果我放大它们就会出现。所以我猜这是某种舍入错误，因为线条太细了？
如果我打印 PDF，它看起来不错。
我刚刚意识到，只有在我设置背景颜色时才会发生这种情况。
我该如何解决这个问题？
这是一个示例PDF。根据缩放系数，分隔字符“a”和“b”的边框会消失。我像这样生成了这个文件：
echo "
<html><body>
<span style="border: 1px solid black; background-color:red;">a</span>
<span style="background-color:red">b</span>
</body></html>"
| wkhtmltopdf.exe - test.pdf
【问题讨论】：
@yms：它应该可以工作，你必须点击“下载这个文件”。 它现在可以工作了...没关系...顺便说一句，您是否尝试过修改参数--dpi？ @yms：谢谢，好点子。我用不同的 dpi (10-10000) 进行了测试，但没有成功 :( 当我这样做时，我还测试了 --disable-smart-shrinking，也没有成功。 您是否尝试过降低分辨率？如果您在 html 中的线条以像素为单位定义，那么它们在 pdf 中的宽度会随着渲染分辨率的增加而降低。 @yms：可能的最低值是 --dpi 96。但它不会改变任何东西。 【参考方案1】：您的行没有丢失，只是太小而无法在屏幕上呈现。
这是因为 PDF 是根据其页面大小呈现的，而不是根据页面上的功能有多大。页面上的所有内容都被放大或缩小以使其适合 PDF 页面，因此您的线被缩小并因此消失：1 / 3 = 0.333 = 没有线。
要解决此问题，您有以下选择：
-
使用以下命令减小 wkhtml2pdf 的页面大小：
--page-size A4
完全使用以下方法减小页面的宽度和高度：--page-width 9in --page-height 6in
让线条更粗。
在这种情况下，选项 3 可能更可取。这不是一个非常优雅的解决方案，但是您没有太多选择可以玩。如果您是在低级别编写 PDF，则可以完成工作，但由于您使用的是 wkhtml2pdf，因此您仅限于它允许您设置的内容。
【讨论】：
赏金在 OP 手动奖励给您之前已过期。不幸的是，您没有获得 2 个或更多的赞成票，这至少会自动奖励您一半的赏金。欲了解更多信息：meta.stackexchange.com/a/16067/149052【参考方案2】：我对表格的边框也有类似的问题。帮助我的是在我的css中使用pt而不是px。
见W3C：
但一般来说，您会使用一组不同的单位在屏幕上显示而不是在纸上打印。
【讨论】：
这对我没有帮助。 @duedl0r 示例代码没有帮助。在我的例子中，3px/3pt 是正确显示的最小边框厚度。 你能用可重现的代码 sn-p 发布完整的答案吗？ 在我的情况下 1px 而不是 0.3mm 有效，1pt 也有效。然而 0.5pt 消失了，所以@Alasdair 原则上似乎是正确的。【参考方案3】：我假设您想要细线，否则您不会将宽度设置为 1px。
在使用 wkhtmltopdf 制作的 PDF 中显示细的细线边框的关键是使用 SVG 背景，如下所示：
.hairline-border
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><rect x='0' y='0' width='100%' height='100%' stroke='black' fill='white' stroke-opacity='1' /></svg>");
对于细线分隔符（想想<hr>），我使用：
.hairline
height: 0.5mm;
width: 100%;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0mm' y1='0mm' x2='300mm' y2='0mm' style='stroke:black; stroke-width:0.25mm;' /></svg>");
我是这样使用它们的：
<div class="hairline-border"></div>
并且它在 Firefox 和 Safari/Chrome 中可以正确呈现，并且 wkhtmltopdf 至少保持线宽不变。 有一些讨论认为 SVG 的 base64 转换将保证在 IE 上具有更大的兼容性。坦率地说，我不在乎 IE 是否高兴，但如果必须的话，请参阅 Inline SVG in CSS。
【讨论】：
以上是关于wkhtmltopdf / tables / acrobat-reader 的 PDF 显示错误的主要内容，如果未能解决你的问题，请参考以下文章
《html转pdf-----wkhtmltopdf踩坑总结》