Question

我正在使用wkhtmltopdf 0.9.9。我需要知道动态生成的HTML元素的offsetHeight;这是通过Javascript完成的，之后wkhtmltopdf转换为PDF文件。但是，当我在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。

这是如何发生的，以及这种不一致的解决方案可能是什么？

Answer 1

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

body {
  width: 210mm;
}

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

Answer 2

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

我发现这些0.12之前的版本不支持--viewport-size参数，应用程序没有正确的＆＃34;窗口＆＃34;宽度。

另请注意，您的HTML元素都没有明确的宽度值设置。这将导致一个非常薄的虚拟窗口＆＃34;应用程序呈现HTML的位置。这将导致内部文本分成多行，节点具有非常高的高度值。

我能解决这个问题的方法是明确设置其中一个html元素的所需宽度。（最宽的一个，所以wkhtmltopdf可以使用它作为＆＃34;窗口＆＃34;宽度）

wkhtmltopdf offsetHeight差异

2 个答案: