I am using wkhtmltopdf 0.9.9. I need to know the offsetHeight of a dynamically generated HTML element; this is done via Javascript, before wkhtmltopdf converts to PDF file. However, I am noticing value difference when I tested it out in HTML and in PDF result.
Here is the standalone test case:
<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>
In HTMl (via browser), the #test element contains value of 110. However, in the generated PDF, the #test element contains value of 343.
How is this happening, and what could be the solution for this inconsistency?
I also encountered the same issue but with wkhtmltopdf 0.11.
I found out that these pre 0.12 versions does not support the --viewport-size parameter, the application will not have a proper "window" width.
Also notice that none of your HTML elements have an explicit width value set. This will result in a very thin "virtual window" where the application renders your HTML. And this will result in having the inner text split in multiple lines, with the node having very high height value.
What i could do to fix this issue is to explicitly set the desired width of one of the html elements. (the widest one so the wkhtmltopdf could use that as "window" width)