6

基本的に、特定の日のすべての作業指示書を表示するページがあります。page-break-after: always を使用して論理的な印刷改ページを作成し、続行できるように、HTML を作成しようとしました。ただし、ユーザーがページを印刷すると、重複したり、同じページに複数の作業指示が表示されたりすることがよくあります。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;
}

EDIT ハックな試みで、WOPrintクラスの最小高さを設定して遊んでみました。これを 9 インチに変更すると、標準の米国用紙サイズに設定した場合、すべての Safari、Firefox、および Chrome から印刷するのに十分な余白が得られるようです。これは確かに私が修正したい方法ではありませんが、PDF にレンダリングする必要もありません。

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

3 に答える 3

3

簡潔な答え。すべてのブラウザーで一貫してサポートされているわけではありません。ただし、page-break-after より page-break-before の方がわずかに優れたサポートがあります...

page-break-before の互換性とpage-break-after の互換性を参照してください。

これらの時点でページにCtrl-Lを埋め込むこともできますが、多くのプリンタードライバーがそれを無視すると確信しています。

于 2010-11-30T22:04:12.530 に答える
1

min-heightCSS クラスでを設定することによりWOPrint、標準の高さのページに対しておおよその改ページを偽造することができます。

.WOPrint
    {
        max-width: 100%;
        padding-bottom: 3em;
        min-height: 9in;
    }
于 2010-11-30T23:59:51.560 に答える