使用 CSS 强制打印分页符答案

【问题标题】：Enforce Print Page Breaks with CSS使用 CSS 强制打印分页符
【发布时间】：2010-11-30 17:59:43
【问题描述】：

我有一个页面，基本上显示给定日期的所有工作订单。我尝试创建 HTML，以便可以使用 page-break-after: 始终创建逻辑打印分页符并继续。但是，当用户打印页面时，经常会出现重叠、同一页面上的多个工单等问题。我只是想强制执行 Firefox、Safari 和 Chrome 会监听的硬分页符。

我的 HTML 看起来像这样

<div class="WOPrint">
    <div class="WOHeader">
        <h1>Header stuff</h1>
    </div>
    <!-- content -->
</div>
<div class="WOPageBreak"></div>
<div class="WOPrint">
    <div class="WOHeader">
        <h1>Header stuff</h1>
    </div>
    <!-- content -->
</div>
<div class="WOPageBreak"></div>
<!-- repeat N times -->
<div class="WOPrint">
    <div class="WOHeader">
        <h1>Header stuff</h1>
    </div>
    <!-- content -->
</div>
<div class="WOPageBreak"></div>

而我的 CSS 基本上是这样的：

.WOPrint
{
    max-width: 100%;
    padding-bottom: 3em;
}

.WOHeader
{
    display: block;
    page-break-inside: avoid;
}

.WOPageBreak
{
    height: 1px;
    width: 100%;
    float: left;
    page-break-after: always;
    display: block;
}

编辑在一次骇人听闻的尝试中，我尝试设置 WOPrint 类的最小高度。当我将其设置为标准的美国纸张尺寸时，将其更改为 9 英寸似乎给了我足够的余量空间来从所有 Safari、Firefox 和 Chrome 进行打印。这当然不是我想要修复的方式，但我也不想渲染为 PDF。

.WOPrint
    {
        max-width: 100%;
        padding-bottom: 3em;
        min-heihgt: 9in
    }

【问题讨论】：

标签： css xhtml printing printing-web-page page-break

【解决方案1】：

简短的回答。您不能在所有浏览器中都始终支持它。虽然对 page-break-before 的支持比 page-break-after 稍好...

参见page-break-before 兼容性和page-break-after 兼容性

您也可以尝试在页面中嵌入Ctrl-L，因为我很确定很多打印机驱动程序都会忽略这一点。

【讨论】：

那么我是否真的必须考虑将其渲染为多页 PDF 只是因为我无法在 div 之间获得分页符？
如果你想保证跨浏览器，那么不幸的是，是的。出于好奇，我以为我要在几个浏览器中测试 Ctrl-L 位
annnnd，不.. 如果您打印到服务器本地的打印机... docs.php.net/manual/en/function.printer-open.php
如果您查看我对代码示例所做的编辑，我想出了一个 hackish 解决方法。通过将最小页面高度设置为 9 英寸，我至少可以让它正确地强制分页。这样做的缺点是如果有人想打印横向或其他纸张尺寸。对于我的特殊情况，这可能最终成为 KISS 答案。

【解决方案2】：

通过在WOPrint CSS 类中设置min-height，我可以伪造一个标准高度页面的近似分页符：

.WOPrint
    {
        max-width: 100%;
        padding-bottom: 3em;
        min-height: 9in;
    }

【讨论】：

【解决方案3】：

你只需要

.WOPageBreak
{
    page-break-before: always;
}

但是，您还需要将“overflow:visible”添加到正文标记，因为没有它，Firefox 只会打印第一页。

如果您在打印时在 body 上设置 margin:0，您也可以获得更一致的结果，如下所示：

@media print{body{margin:0}}

【讨论】：