wkhtmltopdf offsetHeight difference

wkhtmltopdf offsetHeight difference

本文关键字：difference offsetHeight wkhtmltopdf      更新时间：2023-09-26

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

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

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

body {
  width: 210mm;
}

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

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

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

另请注意，您的任何 HTML 元素都没有设置明确的宽度值。这将导致一个非常薄的"虚拟窗口"，应用程序在其中呈现您的 HTML。这将导致内部文本拆分为多行，节点具有非常高的高度值。

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

相关文章：