Czy mogę wymusić podział strony podczas drukowania HTML?

Tworzę raport HTML, który będzie można wydrukować i ma „sekcje”, które powinny zacząć się na nowej stronie.

Czy jest jakiś sposób na umieszczenie w HTML / CSS czegoś, co zasygnalizuje przeglądarce, że musi wymusić podział strony (rozpoczęcie nowej strony) w tym momencie?

Nie muszę tego działać w każdej przeglądarce, myślę, że mogę powiedzieć ludziom, aby korzystali z określonego zestawu przeglądarek w celu wydrukowania tego.

Dodaj klasę CSS o nazwie „łamanie strony” (lub „pb”), na przykład:

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

Następnie dodaj pusty znacznik DIV ( lub dowolny element bloku, który generuje pole ) w miejscu, w którym chcesz podzielić stronę.

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

Nie pojawi się na stronie, ale spowoduje uszkodzenie strony podczas drukowania.

PS Być może dotyczy to tylko podczas używania -after(a także tego, co możesz robić z innymi <div>s na stronie), ale odkryłem, że musiałem ulepszyć klasę CSS w następujący sposób:

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

Wypróbuj ten link

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

Chciałem po prostu zaktualizować. page-break-afterjest już starszą własnością.

Oficjalna strona stwierdza

Ta właściwość została zastąpiona właściwością break-after .

Możesz użyć właściwości CSS page-break-before(lub page-break-after). Wystarczy ustawić page-break-before: alwaysna tych elementów blokowych (np pozycją div, plub tableelementy), które powinny rozpocząć się w nowym wierszu.

Na przykład, aby spowodować przerwanie linii przed nagłówkiem drugiego poziomu i przed jakimkolwiek elementem w klasie newpage(np. <div class=newpage>...), należy użyć

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

First page (scroll down to see the second page)
<div style="break-after:page"></div>
Second page
<br>
<br>
<button onclick="window.print();return false;" />Print (to see the result) </button>

Po prostu dodaj to, gdzie potrzebujesz strony, aby przejść do następnej (tekst „strona 1” będzie na stronie 1, a tekst „strona 2” będzie na drugiej stronie).

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

To też działa:

First page (there is a break after this)
<div style="break-after:page"></div>
Second page (This will be printed in the second page)

Załóżmy, że masz bloga z artykułami takimi jak ten:

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

Właśnie dodanie tego do CSS działało dla mnie:

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

(przetestowany i działa na Chrome 69 i Firefox 62).

Odniesienie:

• https://www.w3schools.com/cssref/pr_print_pageba.asp

• https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ; ważna uwaga: tutaj jest powiedziane, This property has been replaced by the break-after property.ale nie działało dla mnie break-after. Również dokument MDN o break-afternie wydaje się być specyficzny dla podziałów stron, więc wolę zachować (działający) page-break-after: always;.

• Możemy dodać tag podziału strony ze stylem „ podział strony: zawsze ” w punkcie, w którym chcemy wprowadzić podział strony na stronie HTML.
  
• " Page-break-before " Również prac

Przykład:

HTML_BLOCK_1
<p style="page-break-after: always"></p>
HTML_BLOCK_2
<p style="page-break-after: always"></p>
HTML_BLOCK_3

Podczas drukowania pliku HTML z powyższym kodem podgląd wydruku pokaże trzy strony (po jednej dla każdego bloku HTML „ HTML_BLOCK_n ”), gdzie podobnie jak w przeglądarce wszystkie trzy bloki pojawiają się kolejno jeden po drugim.

Potrzebowałem podziału strony po każdym 3 wierszu, gdy używamy polecenia drukowania w przeglądarce.

Dodałem <div style = 'page-break-before: always;'> </div>

po każdym 3 rzędzie i mój div div mają display: flex; więc usunąłem display: flex; i działało tak, jak chcę.

CSS

@media print {
  .pagebreak { 
     page-break-before: always; 
  }
}

HTML

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

@ Chris Doggett ma doskonały sens. Chociaż znalazłem jedną śmieszną sztuczkę na lvsys.com , i faktycznie działa ona na Firefox i Chrome. Wystarczy umieścić ten komentarz w dowolnym miejscu, w którym chcesz wstawić podział strony. Możesz także zastąpić <p>znacznik dowolnym elementem blokowym.

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