wkhtmltopdf offsetHeight差異

我正在使用wkhtmltopdf 0.9.9。我需要知道動態生成的HTML元素的offsetHeight;這是通過Javascript完成的，然後將wkhtmltopdf轉換爲PDF文件。但是，當我用HTML和PDF結果進行測試時，我注意到價值差異。wkhtmltopdf offsetHeight差異

這裏是獨立的測試案例：

<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值

這是怎麼發生的，以及這種不一致的解決方案是什麼？

來源

2014-11-24 dvdchr

我也遇到了同樣的問題，但用wkhtmltopdf 0.11。

我發現這些預0.12版本不支持--viewport-size參數，應用程序將沒有適當的「窗口」寬度。

另請注意，您的任何HTML元素都沒有設置明確的寬度值。這將導致應用程序呈現HTML的非常薄的「虛擬窗口」。這將導致內部文本分成多行，節點的高度值非常高。

我能做些什麼來解決這個問題是明確設置一個html元素的期望寬度。（最寬的一個，所以wkhtmltopdf可以使用它作爲「窗口」寬度）

來源

2015-03-10 09:04:10 ths

我將body元素的寬度設置爲PDF的寬度。

body { 
    width: 210mm; 
}

總之，當我測量使用e.x的內容的高度。 $('#content').height()大小似乎是正確的。

來源

2015-05-11 08:35:34

我知道這是一個古老的答案，但設置身體的高度和寬度是唯一對我有用的東西。也就是說，高度仍然是BIZARRE，但它們至少是一致的，可用於制定佈局決策。爲什麼改變字體大小會導致新的高度新結果而不是可預測的大小，這仍然令人難以置信。 – Radio 2017-06-01 15:22:24

wkhtmltopdf offsetHeight差異

回答

相關問題