Внедрение разрывов страниц при печати с помощью CSS

У меня есть страница, на которой в основном отображаются все рабочие задания на данный день. Я попытался создать 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;
}

EDIT В попытке взлома я поиграл с установкой минимальной высоты класса WOPrint. Изменение его на 9 дюймов, кажется, дает мне достаточно места для печати из всех Safari, Firefox и Chrome, когда я установил стандартный размер бумаги для США. Это, конечно, не то, как я хотел бы это исправить, но я также не хочу рендерить в PDF.

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

css printing page-break xhtml printing-web-page
person ashurexm    schedule 30.11.2010    source источник

Ответы (3)


arrow_upward
3
arrow_downward

короткий ответ. Вы не можете, это не всегда поддерживается во всех браузерах. хотя есть немного лучшая поддержка разрыва страницы перед разрывом страницы, чем после разрыва страницы...

см. page-break-before совместимость и page-break-after совместимость

вы также можете попробовать вставить Ctrl-L на страницу в этих точках, я уверен, многие драйверы принтеров проигнорируют это.

person FatherStorm    schedule 30.11.2010
comment
Так что я серьезно должен смотреть на рендеринг этого как многостраничный PDF только потому, что я не могу получить разрыв страницы между div? - person ashurexm; 01.12.2010
comment
Если вы хотите гарантировать кроссбраузерность, то, к сожалению, да. думал, что я собираюсь проверить бит Ctrl-L в нескольких браузерах из любопытства - person FatherStorm; 01.12.2010
comment
annnnd, нет.. если бы вы печатали только на принтер, локальный для сервера... docs.php.net/manual/en/function.printer-open.php - person FatherStorm; 01.12.2010
comment
Если вы посмотрите на редактирование, которое я внес в свой пример кода, я придумал хакерский обходной путь. Установив минимальную высоту страницы на 9 дюймов, я могу, по крайней мере, заставить ее правильно разрывать страницу. Однако недостатком этого было бы, если бы кто-то захотел напечатать альбомную ориентацию или другой размер бумаги. Для моего конкретного случая это может оказаться ответом KISS. - person ashurexm; 01.12.2010

arrow_upward
1
arrow_downward

Установив min-height в классе CSS WOPrint, я могу сымитировать приблизительный разрыв страницы для страницы стандартной высоты:

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

arrow_upward
1
arrow_downward

Все что тебе нужно это

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

Однако вы также можете добавить «overflow:visible» к тегу body, потому что без него Firefox будет печатать только первую страницу.

Вы также можете получить более последовательные результаты, если установите margin:0 для основного текста при печати, например так:

@media print{body{margin:0}}
person Vincent    schedule 11.07.2017