wkhtmltopdf offset高度差答案

【问题标题】：wkhtmltopdf offsetHeight differencewkhtmltopdf offset高度差
【发布时间】：2014-11-24 05:26:53
【问题描述】：

我正在使用 wkhtmltopdf 0.9.9。我需要知道动态生成的 HTML 元素的offsetHeight；这是在 wkhtmltopdf 转换为 PDF 文件之前通过 Javascript 完成的。但是，当我在 HTML 和 PDF 结果中对其进行测试时，我注意到了价值差异。

这是独立的测试用例：

<html>
  <head>
    <style>
      #test {
        height: 100px;
        background-color: aqua;
      }

      p {
        padding: 10px 0;
      }
    </style>
  </head>
  <body>
    <div id="test">Test</div>
    <h1>Hello</h1>
    <p>Test<br>Test<br>Test<br>Test<br>Test<br></p>
  </body>

  <script>
    var el = document.getElementById('test');
    var p = document.getElementsByTagName('p')[0];
    el.innerHTML = p.offsetHeight;
  </script>
</html>

在 HTMl（通过浏览器）中，#test 元素包含值 110。但是，在生成的 PDF 中，#test 元素包含的值为 343。

这是怎么发生的？解决这种不一致的方法是什么？

【问题讨论】：

标签： javascript html pdf wkhtmltopdf wicked-pdf

【解决方案1】：

我将正文元素的宽度设置为 PDF 的宽度。

body {
  width: 210mm;
}

总之，当我使用 e.x. 测量内容的高度时。 $('#content').height() 大小似乎是正确的。

【讨论】：

我知道这是一个旧答案，但设置身体的高度和宽度是唯一对我有用的方法。也就是说，高度仍然很奇怪，但它们至少是一致的，并且可以用来做出布局决策。为什么改变字体大小会导致新的高度结果而不是可预测的大小仍然令人难以置信。

【解决方案2】：

我也遇到了同样的问题，但使用的是 wkhtmltopdf 0.11。

我发现这些 pre 0.12 版本不支持 --viewport-size 参数，应用程序将没有适当的“窗口”宽度。

还要注意，您的 HTML 元素都没有明确设置宽度值。这将导致应用程序在其中呈现您的 HTML 的非常薄的“虚拟窗口”。这将导致内部文本分成多行，节点具有非常高的高度值。

解决这个问题我可以做的是明确设置其中一个 html 元素的所需宽度。（最宽的，因此 wkhtmltopdf 可以将其用作“窗口”宽度）

【讨论】：