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

188

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.

Daniel Magliola
źródło

Odpowiedzi:

336

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;
    }
}
Chris Doggett
źródło
7
Ale podobnie jak wszystkie dobre rzeczy w CSS, nie zawsze działa to konsekwentnie na całej planszy, więc wypróbuj z niego światło dzienne, aby nie rozgniewać się użytkownicy zastanawiający się, dlaczego Twoja witryna drukuje stosy dodatkowych pustych stron!
Zoe
13
Według MDN page-break-after„dotyczy elementów blokowych generujących pole”, więc użycie pustego <span>elementu nie zadziała. Lepiej jest zastosować go do fragmentu treści. Zobacz developer.mozilla.org/en-US/docs/Web/CSS/page-break-after
nullability
1
@nullability: Good catch. Użyłem tego głównie w mojej starej pracy w kontrolce WebBrowser w WinForms, która używała IE, złotego standardu następujących standardów.
Chris Doggett
1
To nie działało dla mnie w Chrome ... Próbuję zrobić podział strony po <tr> wewnątrz <table>, czy to zadziała w tym przypadku?
delphirules,
3
Z jakiegoś powodu podczas korzystania z tej sztuczki w Chrome 1 wiersz pikseli na następnej stronie przeciekał do poprzedniej (zauważalny przy użyciu koloru tła). Naprawiłem to za pomocą.pagebreak { min-height: 1px; page-break-before: always; }
pzmarzly
44

Wypróbuj ten link

<style>
@media print
{
h1 {page-break-before:always}
}
</style>
jfarrell
źródło
Myślę, że jest to lepsza odpowiedź, ponieważ nie wymaga zniekształcania kodu HTML w celu uzyskania efektu wizualnego.
FinnNk,
Właściwie bardziej podoba mi się ten drugi, ponieważ daje mi to większą kontrolę. Zawsze mogę przypisać klasę „łamanie strony” tylko do H1, które powinny powodować przeskakiwanie strony. Ale to wciąż dobre rozwiązanie. +1 dla @media, chociaż chyba ekran powinien ignorować podział strony. Dzięki!
Daniel Magliola,
h1 jest przykładem tego, co możesz wykorzystać jako znacznik przerwy drukowania. Możesz zastąpić i oznaczyć tam swoją nazwę. możesz także użyć podziału strony: zawsze
jfarrell,
1
h1nie jest dobrym przykładem, ponieważ oznacza nagłówek pierwszego poziomu, a strona zwykle powinna mieć tylko jeden taki nagłówek.
Jukka K. Korpela
6
Jeśli chcesz pominąć pierwszy nagłówek na pierwszej stronie, spróbujh1:not(:first-child) { page-break-before:always; }
Jeff Atwood
10

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 .

shazyriver
źródło
Należy zauważyć, że ta właściwość jest obsługiwana tylko przez przeglądarki Microsoft IE i Edge. caniuse.com/…
Benjamin
7

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 }
Jukka K. Korpela
źródło
5

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)
Giovanni G. PY
źródło
1

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:

Basj
źródło
0
  • 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.

Chinmay
źródło
0

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ę.

Dinesh Sharma
źródło
0

CSS

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

HTML

<div class="pagebreak"></div>
Vlad Hnatovskyi
źródło
-7

@ 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>
Oniya Daniel
źródło