wkhtmltopdf / tables / acrobat-reader 的 PDF 显示错误答案

【问题标题】：PDF Display Errors with wkhtmltopdf / tables / acrobat-readerwkhtmltopdf / tables / acrobat-reader 的 PDF 显示错误
【发布时间】：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。但它不会改变任何东西。

标签： pdf-generation acrobat wkhtmltopdf foxit

【解决方案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。

【讨论】：