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
4

3 回答 3

6

您的行没有丢失，它太小而无法在屏幕上呈现。

这是因为 PDF 是根据其页面大小呈现的，而不是根据页面上功能的大小。页面上的所有内容都被放大或缩小以使其适合 PDF 页面，因此您的行被缩小并因此消失：1 / 3 = 0.333 = 没有行。

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

  1. 使用以下方法减小 wkhtml2pdf 上的页面大小：--page-size A4
  2. 完全使用以下方法减小页面的宽度和高度：--page-width 9in --page-height 6in
  3. 让你的线条更粗。

在这种情况下，选项 3 可能更可取。这不是一个非常优雅的解决方案，但是您没有太多选择可以玩。如果您在低级别编写 PDF，则可以完成工作，但是由于您使用的是 wkhtml2pdf，因此您仅限于它允许您设置的内容。

于 2011-12-08T09:54:24.350 回答
4

我对表格的边框也有类似的问题。帮助我的是在我的css中使用pt而不是。px

参见W3C：

但一般来说，您将使用一组不同的单位在屏幕上显示而不是在纸上打印。

于 2012-07-06T09:27:07.670 回答
1

我假设您想要细线，否则您不会将宽度设置为 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 是否高兴，但如果必须的话，可以在 CSS 中查看 Inline SVG 。

于 2015-11-10T23:58:10.687 回答