wkhtmltopdf/tables/acrobat-reader 的 PDF 显示错误
我使用 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
I generated a PDF file using wkhtmltopdf from a html page. The html page uses tables which have 1 pixel borders. If I open the PDF with Acrobat or Foxit they randomly miss to draw vertical borders, but they appear if I zoom in. So I guess it's some kind of rounding error, because the lines are too thin?
If I print the PDF it looks good.
And I just realized, it only happens if I set a background-color.
How can I fix this?
Here's a sample PDF. The border separating the characters "a" and "b" disappears depending on the zoom factor. I generated this file like this:
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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您的线条没有丢失，只是太小而无法在屏幕上渲染。
这是因为 PDF 是根据页面大小呈现的，而不是根据页面上的功能有多大。页面上的所有内容都会放大或缩小以适合 PDF 页面，因此您的线条也会缩小并消失：1 / 3 = 0.333 = 无线条。
要解决此问题，您有以下选择：
--page-size A4--page-width 9in --page-height 6in在这种情况下，选项 3 可能更可取。这不是一个非常优雅的修复，但是您没有太多选择可以使用。如果您在低级别上编写 PDF，那么事情可以完成，但由于您使用的是 wkhtml2pdf，那么您将受到它允许您设置的限制。
Your line is not missing, it is just too small to render on the screen.
This is because PDFs are rendered according to their page size, not according to how large the features on the page are. Everything on the page is scaled up or down to make it fit into the PDF page, and so your line is being scaled down and thus disappearing: 1 / 3 = 0.333 = no line.
To fix this you have the following options:
--page-size A4--page-width 9in --page-height 6inOption 3 is probably preferable in this case. It's not a very elegant fix, but you don't have many options to play with. If you were writing the PDF on low-level then things could be done, but since you're using wkhtml2pdf then you are limited to what it allows you to set.
我对表格边框也有类似的问题。对我有帮助的是在我的CSS中使用
pt而不是px。请参阅 W3C：
I had similar problem with borders of a table. What helped me was use of
ptinstead ofpxin my css.See W3C:
我假设您想要细线，否则您不会将宽度设置为 1px。
在使用 wkhtmltopdf 制作的 PDF 中显示细细的细线边框的关键是使用 SVG 背景，如下所示：
对于细线分隔符（想想
并且我像这样使用它们：
并且它在 Firefox 和 Safari/Chrome 中正确渲染，并且 wkhtmltopdf 至少保持线宽不变。
有一些讨论认为，SVG 的 base64 转换将保证 IE 上具有更高的兼容性。坦率地说，我不在乎 IE 是否满意，但如果你必须的话，请参阅 CSS 中的内联 SVG。
I'm assuming that you want thin line, or else you wouldn't have set the width to 1px.
The key to having thin, hairline borders displayed in PDFs made with wkhtmltopdf is to use SVG backgrounds like so:
For a hairline separator (think
<hr>), I use:and I use them like so:
And it's rendered correctly in Firefox and Safari/Chrome, and wkhtmltopdf at least keeps the line width as it is.
There's been some discussion that a base64 transform of the SVG would warrant greater compatibility on IE. Frankly, I couldn't care less if IE is happy or not but see Inline SVG in CSS, if you must.