Могу ли я вызвать разрыв страницы при печати HTML?

Я делаю отчет в формате HTML, который будет пригоден для печати, и в нем есть "разделы", которые должны начинаться на новой странице.

Есть ли способ поместить что-то в HTML/CSS, который будет сигнализировать браузеру, что он должен вызвать разрыв страницы (начать новую страницу) в этот момент?

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

Ответы

Ответ 1

Добавьте CSS-класс с именем "pagebreak" (или "pb"), например так:

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}

Затем добавьте пустой тег DIV (или любой элемент блока, который генерирует блок), где вы хотите разрыв страницы.

<div class="pagebreak"> </div>

Он не будет отображаться на странице, но будет разбивать страницу при печати.

PS Возможно, это применимо только при использовании -after (а также о том, что еще вы можете делать с другими <div> на странице), но я обнаружил, что мне пришлось расширить класс CSS следующим образом:

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

Ответ 2

Попробуйте ссылку

<style>
@media print
{
h1 {page-break-before:always}
}
</style>

Ответ 3

Вы можете использовать свойство CSS page-break-before (или page-break-after). Просто установите page-break-before: always для тех элементов уровня блока (например, заголовок, div, p или table), которые должны начинаться с новой строки.

Например, чтобы вызвать разрыв строки перед любым заголовком 2-го уровня и перед любым элементом в классе newpage (например, <div class=newpage>...), вы должны использовать

h2, .newpage { page-break-before: always }

Ответ 4

Просто хотел поставить обновление. page-break-after теперь является устаревшим свойством.

Официальная страница государства

Это свойство было заменено свойством break-after.

Ответ 5

Это не работает на моем сайте. Я помещаю тэг div с классом разрыва страницы после того, как количество x дивов было выведено, чтобы напечатанная страница "ломалась" чисто. И да - я проверил и перепроверил свой код и просмотрел исходную страницу в своем браузере.

Ответ 6

Допустим, у вас есть блог с такими статьями:

<div class="article"> ... </div>

Просто добавив это в CSS, у меня получилось:

@media print {
  .article { page-break-after: always; }
}

(протестировано и работает на Chrome 69 и Firefox 62).

Ссылка:

https://www.w3schools.com/cssref/pr_print_pageba.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ; Важное замечание: здесь сказано This property has been replaced by the break-after property., но у меня не получилось с break-after. Также документ MDN о break-after, похоже, не относится к разрывам страниц, поэтому я предпочитаю сохранять (работающий) page-break-after: always;.

Ответ 7

Просто добавьте это, если вам нужно, чтобы страница переходила к следующей (текст "страница 1" будет на странице 1, а текст "страница 2" будет на второй странице).

Page 1
<div style='page-break-after:always'></div>
Page 2

Ответ 8

@Крис Доггетт имеет смысл. Хотя, я нашел один забавный трюк на lvsys.com, и он действительно работает на firefox и chrome. Просто разместите этот комментарий в любом месте, где вы хотите, чтобы разрыв страницы был вставлен. Вы также можете заменить тег <p> на любой элемент блока.

<p><!-- pagebreak --></p>