我正在使用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。
这是如何发生的,以及这种不一致的解决方案可能是什么?
答案 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;宽度)