Html 在 Webkit 中打印时控制 CSS 分页符

Controlling CSS page breaks when printing in Webkit

提问by Parand

I'm attempting to improve the appearance of html documents printed using Webkit, in this case by exerting some control over where page breaks occur.

我正在尝试改进使用 Webkit 打印的 html 文档的外观，在这种情况下，通过对发生分页符的位置施加一些控制。

I'm able to insert page breaks where I need using:

我可以在需要使用的地方插入分页符：

page-break-after: always; 

However, I can't find a way to avoid page breaks being inserted in the middle of items. For example, I have html tables that should not be split in the middle across multiple pages. I had the impression that

但是，我找不到避免在项目中间插入分页符的方法。例如，我有 html 表，不应在多个页面的中间拆分。我的印象是

page-break-inside: avoid;

would prevent a page break from being inserted inside the element, but it doesn't seem to be doing anything. My code looks like:

会阻止在元素内插入分页符，但它似乎没有做任何事情。我的代码看起来像：

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

Despite the page-break-inside: avoid directive I still get the table split between the first and second row into separate pages.

尽管有 page-break-inside: avoid 指令，我仍然将第一行和第二行之间的表格拆分为单独的页面。

Any ideas?

有任何想法吗？

采纳答案by Cliffordlife

Downloaded a recent binary of wkhtmltopdf http://code.google.com/p/wkhtmltopdf/, and the following seems to work.

下载了 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>

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

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

Prudent to put margin, and padding to zero on the td, and place any on the div, otherwise you'll get "edges" making it over the folds

谨慎地在 td 上放置边距和填充为零，并将任何放置在 div 上，否则你会得到“边缘”使其越过折叠

回答by Travis J

As cliffordlife states,

正如悬崖生活所说，

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

will work. But not for firefox. In firefox, what you are going to have to do is check for the height and then add page-break-after: always;when it is relevant.

将工作。但不适用于火狐。在 Firefox 中，您要做的是检查高度，然后page-break-after: always;在相关时添加。

On average, the margin will be 1 inch on top and bottom. So, to measure how many pixels a 10 inch page would consume, I used this:

平均而言，顶部和底部的边距为 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);
})();

I had a lot of divs each with a lot of paragraphs in them. So what I did was I iterated through them, and then compared the current height of the them on the current page to the pageOfPixels value.

我有很多 div，每个 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;
    }
});

This worked for me in firefox.

这在 Firefox 中对我有用。

回答by Parand

Nevermind: looks like this is a webkit issue:

没关系：看起来这是一个 webkit 问题：

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

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