HTML/CSS 转 PDF，在所有页面上添加背景图片

Question

我正在从用户提交的HTML/CSS生成PDF。客户要求PDF具有背景图像以添加品牌标识。 PDF库是wkhtmltopdf11RC1。

我可以使用PDF转换库将图像打印在后台，但真正的问题是，主体高度不保证是纸张高度的倍数，因此最后一页通常会被切断，并且不显示背景图像。

PDF库确实支持javascript，但element.offsetHeight似乎不准确，因此我无法检查需要在主体上填充多少来制作完整页面。

是否有类似的经验或者有任何聪明的想法？

- Josh

---

哦，这个有点难。你能发布一张图片或PDF本身吗？ - Pavlo

这不是一个真正的解决方案，但你可以尝试后处理PDF（使用类似PDFtk的工具或直接修改PDF格式），在那里添加背景。如果你成功了，我会非常感激如果你能分享你的发现！ - Joel Peltonen

我确实想过类似的事情。本来想尝试将一个PDF叠加到另一个PDF上。我会调查一下并告诉你的。 - Josh

我和 @Nenotlep 想的一样，Imagemagick、convert 和 pdftk 在这里可能会有帮助。我很好奇。 - noel

Answer 1

不幸的是，正如原帖中提到的那样，var currentBodyHeight = $('body').height(); 无法准确地指示身体的高度。我已经按照Nenotlep的建议使用了PDFtk。

这并不太棘手，只需要确保文件被正确保存和擦除，并始终保留对临时文件的引用即可。

- Josh

---

$(document).height(); 也会给出不准确的测量结果。 - Josh

html，body {height:100％; margin:0} - 它仍然返回不准确的body高度？ - Jonathan Tonge

是的，请相信我，我已经花了很长时间尝试所有这些“显而易见”的事情。我正在寻找已知的解决wkhtmltopdf问题的方法或来自Nenotlep等人的开箱即用的建议。感谢您的帮助。 - Josh

Answer 2

如果插件依赖于正文的高度来做打印决策，那么也许这个方法可以奏效。它所做的是将正文的高度设置为页面高度的倍数。您需要弄清楚纸张的高度 - 标准是每英寸72像素。因此，11.5英寸大约是841像素，但您可能需要调整边距。

var paperHeight = 841;

var currentDocHeight = $(document).height();

var pages = Math.ceil(currentDocHeight / paperHeight);

var newBodyHeight = pages * paperHeight;

$('body').css('height', newBodyHeight);

我使用了jQuery来压缩答案，但这也可以在没有jQuery的情况下使用纯JavaScript完成。

CSS：

body {
  margin:0
}

- Jonathan Tonge

---

在wkhtmltopdf中计算页面高度非常棘手；请参阅http://code.google.com/p/wkhtmltopdf/issues/detail?id=168的讨论部分。 - Joel Peltonen