Question

我有一个页面，基本上显示给定日期的所有工单。我试图创建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
    }

Answer 1

简短的回答。你不能在所有浏览器中不受支持。除了页面突破之后，页面突破之前的支持稍微好一些......

请参阅page-break-before兼容性和page-break-after兼容性

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

Answer 2

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

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

Answer 3

你需要的只是

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

但是，您还要添加＆＃34; 溢出：可见＆＃34;因为没有它，Firefox只会打印第一页。

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

@media print{body{margin:0}}

使用CSS强制打印分页符

3 个答案: