Question

我使用html页面中的wkhtmltopdf生成了一个PDF文件。 html页面使用具有1个像素边框的表格。如果我用Acrobat或Foxit打开PDF，他们会随机错过绘制垂直边框，但如果我放大则会出现。所以我猜它是某种舍入误差，因为线条太薄了？

如果我打印PDF，它看起来不错。

我刚刚意识到，只有设置背景颜色才会发生。

我该如何解决这个问题？

这是一个示例PDF。分隔角色的边界＆＃34; a＆＃34;和＆＃34; b＆＃34;根据缩放系数消失。我生成了这样的文件：

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

Answer 1

你的线不会丢失，它太小而无法在屏幕上渲染。

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

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

使用：--page-size A4
减小宽度＆amp;页面高度正好使用：--page-width 9in --page-height 6in
让你的线更粗。

在这种情况下，选项3可能更可取。这不是一个非常优雅的修复，但你没有很多选择。如果您在低级别编写PDF，那么事情就可以完成，但由于您使用的是wkhtml2pdf，因此您只能使用它设置的内容。

Answer 2

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

请参阅W3C：

但一般情况下，你会在屏幕上使用一组不同的单位，而不是在纸上打印。

Answer 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。

PDF使用wkhtmltopdf / tables / acrobat-reader显示错误

3 个答案: