wkhtmltopdf offsetHeight差异

时间:2014-11-24 05:26:53

标签: javascript html pdf wkhtmltopdf wicked-pdf

我正在使用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。

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

2 个答案:

答案 0 :(得分:2)

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

body {
  width: 210mm;
}

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

答案 1 :(得分:0)

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

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

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

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