在Webkit中打印時控制CSS分頁符

我試圖改進使用Webkit打印的html文檔的外觀，在這種情況下通過對分頁符發生的位置施加一些控制。在Webkit中打印時控制CSS分頁符

我能夠插入分頁符，我需要使用：

page-break-after: always;

但是，我無法找到一個方法來避免被插入在項目的中間分頁符。例如，我有不應該在多個頁面中間拆分的html表格。我的印象是，

page-break-inside: avoid;

將防止在元素內插入分頁符，但它似乎沒有做任何事情。我的代碼如下所示：

.dontsplit { border: 2px solid black; page-break-inside: avoid; } 

<table class="dontsplit"> 
    <tr><td>Some title</td></tr> 
    <tr><td><img src="something.jpg"></td></tr> 
</table>

儘管分頁-內：避免指令我仍然獲得了第一排和第二排之間的表拆分成單獨的頁面。

任何想法？

來源

2009-10-08 Parand

下載最近wkhtmltopdf http://code.google.com/p/wkhtmltopdf/的二進制文件，下面似乎工作。

.dontsplit { border: 2px solid black; page-break-inside: avoid; } 

<table> 
    <tr><td><div class="dontsplit">Some title</div></td></tr> 
    <tr><td><div class="dontsplit"><img src="something.jpg"></div></td></tr> 
</table>

參考：http://code.google.com/p/wkhtmltopdf/issues/detail?id=9#c21

謹慎投入保證金，並填充到零上TD，並將所有的DIV，否則你會得到「邊緣」使超過褶皺

來源

2011-05-11 10:17:23 Cliffordlife

聰明！我幾乎要放棄了。可悲的是，如果你在一個tr中有多個td，即使你讓它們全部屬於這個類，它似乎也不工作。 – Myforwik 2012-11-02 00:23:42

@Myforwik - 如果這些TD的高度不同，分割似乎默認爲最短的div（或者是行中第一個聲明的div--還沒有完成實驗）。對我來說，解決方案是 - 在事實之後 - 用javascript對每個div進行探測，並通過jquery設置高度到最高的div。這種方法很好。然後.11rc1 – herringtown 2013-05-29 14:43:53

.dontsplit {page-break-inside：avoid; }添加到DIV在Firefox v54.x中工作 – MarcoZen 2017-12-18 08:54:17

沒關係：看起來這是一個WebKit的問題：

https://bugs.webkit.org/show_bug.cgi?id=5097

來源

2009-10-08 19:36:16 Parand

由於cliffordlife國家，

.dontsplit { border: 2px solid black; page-break-inside: avoid; }

將工作。但不適用於Firefox。在Firefox中，你需要做的是檢查高度，然後在相關時添加page-break-after: always;。

平均而言，頂部和底部的邊距將爲1英寸。所以，衡量一個10英寸的頁面需要多少像素的消費，我用這個：

var pageOfPixels; 
(function(){ 
    var d = document.createElement("div"); 
    d.setAttribute("style", "height:9in;position:absolute;left:0px;top:0px;z-index:-5;"); 
    document.body.appendChild(d); 
    pageOfPixels = $(d).height(); 
    d.parentNode.removeChild(d); 
})();

我有很多各的div有很多在他們的段落。所以我所做的是我遍歷它們，然後將它們在當前頁面上的當前高度與pageOfPixels值進行比較。

var currentPosition = 0; 
$('.printDiv').each(function (index, element) { 
    var h = $(this).height(); 
    if (currentPosition + h > pageOfPixels) { 
     //add page break 
     $('.printDiv').eq(index - 1).css("page-break-after", "always"); 
     currentPosition = h; 
    } else { 
     currentPosition += h; 
    } 
});

這在firefox中適用於我。

來源

2013-01-15 23:36:23

在Webkit中打印時控制CSS分頁符

回答

相關問題