HTML/CSS到PDF，所有頁面上的背景圖像

我從用戶提交的HTML/CSS生成PDF。客戶要求PDF文件有背景圖片以添加一些品牌。 PDF庫是wkhtmltopdf11RC1。HTML/CSS到PDF，所有頁面上的背景圖像

我可以使用PDF轉換庫在背景中打印圖像，但真正的問題是身體的高度不能保證是紙張高度的倍數，所以最後一頁通常會被截斷並且沒有顯示背景圖像。

PDF庫確實有javascript支持，但element.offsetHeight看起來並不準確，所以我無法檢查打印整個頁面的效果。

有沒有人有類似的經歷或者沒有人有一個好主意？

來源

2012-09-14 Josh

哦，這是一個艱難的。你能發佈圖片或PDF本身嗎？ – Pavlo

這不是一個真正的解決方案，但你也許可以考慮後處理PDF（使用類似PDFtk的東西，甚至咬入PDF格式）並在其中添加背景。如果您想要走這條路線，我會非常感激您是否冷靜地發佈您的發現！ – Nenotlep

我確實想知道這樣的事情。打算嘗試，也許一層PDF到另一個。我會研究它並讓你知道。 – Josh

不幸的是var currentBodyHeight = $('body').height();不給身體的高度，出於某種原因的準確指示，如在原來的文章中提到。按照Nenotlep的建議，我使用了PDFtk。

這不是太棘手，只是要確保文件正確保存和刪除，並且我始終保持對臨時文件的引用。

來源

2012-10-08 08:45:47 Josh

上的討論部分以下更新的答案 - 嘗試$（document）.height（）; –

'$（document）.height（）;'也給出了一個不準確的度量。 – Josh

html，body {height：100％;保證金：0} - 它仍然返回一個不準確的身高？ –

如果插件依靠身體的高度來做出打印決定，那麼也許這會起作用。它所做的是將身體的高度設置爲頁面高度的倍數。你將不得不弄清楚什麼是紙張高度 - 標準是每英寸72像素。因此，11.5英寸像841像素，但您可能需要調整邊距。

var paperHeight = 841; 

var currentDocHeight = $(document).height(); 

var pages = Math.ceil(currentDocHeight/paperHeight); 

var newBodyHeight = pages * paperHeight; 

$('body').css('height', newBodyHeight);

我用jQuery來凝結的答案，但是這都可以在jQuery的少的JavaScript進行爲好。

CSS：

body { 
    margin:0 
}

來源

2012-10-06 17:37:34

wkhtmltopdf中頁面高度的計算非常棘手;請參閱http://code.google.com/p/wkhtmltopdf/issues/detail?id=168 – Nenotlep

HTML/CSS到PDF，所有頁面上的背景圖像

回答

相關問題