使用wkhtmltopdf制作PDF时出现显示错误 / 表格 / Acrobat Reader

Question

使用wkhtmltopdf制作PDF时出现显示错误 / 表格 / Acrobat Reader

4

我使用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

- duedl0r

@yms：它应该可以工作，你必须点击“下载此文件”。 - duedl0r

现在它可以运行了...算了...顺便问一下，你尝试过修改参数--dpi吗？ - yms

@yms：谢谢，好建议。我尝试了不同的dpi（10-10000），但都没有成功 :(正好趁此机会，我也测试了--disable-smart-shrinking，也没有成功。 - duedl0r

你尝试过使用较低的分辨率吗？如果你在HTML中定义的线条是以像素为单位的，那么在PDF中它们的宽度会随着渲染分辨率的增加而降低。 - yms

@yms：最低可能的值是--dpi 96。但它并没有改变任何东西。 - duedl0r

3个回答

4

我曾经遇到过表格边框的类似问题。我解决的方法是在CSS中使用pt而不是px。请参考W3C的这篇文章：

但通常您会在屏幕显示和纸张打印时使用不同的单位。

- Ytus

这对我的情况没有帮助。它没有帮助@duedl0r的示例代码。在我的情况下，3px/3pt是最小边框厚度，可以正确显示。 - lng

你能否发布一个完整的答案和可重现的代码片段？ - VH-NZZ

在我的情况下，1px而不是0.3mm可以工作，1pt也可以。但是0.5pt会消失，所以@Alasdair原则上是正确的。 - bpj

1

我假设您想要细线，否则您不会将宽度设置为1像素。

在使用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是否满意，但如果你必须要知道，请参考CSS中的内联SVG。

- VH-NZZ

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alasdair · Accepted Answer

你的线条并没有丢失，只是太小了，无法在屏幕上显示。

这是因为PDF文件是根据其页面大小进行呈现的，而不是根据页面上特征的大小进行呈现的。页面上的一切都会被放大或缩小以适应PDF页面，因此您的线条正在被缩小，从而消失：1/ 3 = 0.333 = 没有线条。

要解决此问题，您有以下选项：

在wkhtml2pdf上缩小页面大小，使用：--page-size A4
精确缩小页面的宽度和高度，使用：--page-width 9in --page-height 6in
使您的线条更厚。

在这种情况下，第三个选项可能更好。这不是非常优雅的解决方案，但您没有太多可以使用的选项。如果您在低级别上编写PDF，则可能会做些事情，但由于您正在使用wkhtml2pdf，因此受限于它允许您设置的内容。