使用CSS强制分页打印

Question

我有一个页面，基本上显示了给定日期的所有工作订单。 我试图创建HTML，以便我可以使用page-break-after：always来创建逻辑打印页面并继续。 但是，当用户打印页面时，通常会出现重叠，同一页上有多个工作订单等问题。 我只想强制执行硬页断点，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
    }

- ashurexm

Answer 1

短答案是，你无法做到这一点，因为不是所有浏览器都支持它。虽然 page-break-after 的支持要略好一些，但 page-break-before 的支持也有一定程度的支持...

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

你也可以尝试在页面中嵌入 Ctrl-L，但我非常确定许多打印机驱动程序将忽略它。

- FatherStorm

---

我是说，我真的必须将其呈现为多页 PDF，只因为我无法在 div 之间获得分页吗？ - ashurexm

如果你想保证跨浏览器的兼容性，那么不幸的是，是的。虽然我很好奇，但我将要在几个浏览器中测试Ctrl-L位。 - FatherStorm

annnnd，不是啊..如果你只是打印到服务器本地的打印机就好了...http://docs.php.net/manual/en/function.printer-open.php - FatherStorm

如果您查看我对代码示例所做的编辑，您会发现我想出了一个hackish解决方法。通过将最小页面高度设置为9英寸，我至少可以使其正确地强制分页。不过，这样做的缺点是，如果有人想要打印横向或其他纸张尺寸，则无法实现。对于我的特定情况，这可能只是最简单有效的解决方案。 - ashurexm

Answer 2

你所需要的就是

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

然而，您还需要在body标签中添加“overflow:visible”，因为没有它，Firefox只会打印第一页。

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

@media print{body{margin:0}}

- Vincent

Answer 3

通过在 WOPrint CSS类中设置min-height，我可以为标准高度页面模拟一个近似的分页。

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

- ashurexm