Posso forzare un'interruzione di pagina nella stampa HTML?

Sto realizzando un rapporto HTML che sarà stampabile e ha "sezioni" che dovrebbero iniziare in una nuova pagina.

C'è un modo per inserire qualcosa nel codice HTML / CSS che segnalerà al browser che è necessario forzare un'interruzione di pagina (avviare una nuova pagina) a quel punto?

Non ho bisogno di questo per funzionare su tutti i browser là fuori, penso di poter dire alle persone di utilizzare un set specifico di browser per stampare questo.

Aggiungi una classe CSS chiamata "pagebreak" (o "pb"), in questo modo:

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

Quindi aggiungere un tag DIV vuoto ( o qualsiasi elemento di blocco che genera una casella ) in cui si desidera l'interruzione di pagina.

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

Non verrà visualizzato sulla pagina, ma si romperà la pagina durante la stampa.

PS Forse questo vale solo quando si utilizza -after(e anche cos'altro si potrebbe fare con altri messaggi <div>nella pagina), ma ho scoperto che dovevo aumentare la classe CSS come segue:

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

Prova questo link

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

Volevo solo mettere un aggiornamento. page-break-afterè una proprietà legacy ora.

Stati della pagina ufficiale

Questa proprietà è stata sostituita dalla proprietà break-after .

È possibile utilizzare la proprietà CSS page-break-before(o page-break-after). Basta impostare page-break-before: alwayssu quegli elementi block-level (per esempio, rotta div, po tableelementi) che dovrebbero iniziare su una nuova linea.

Ad esempio, per causare un'interruzione di riga prima di qualsiasi intestazione di 2 ° livello e prima di qualsiasi elemento della classe newpage(ad es., <div class=newpage>...), dovrai utilizzare

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>

Basta aggiungere questo dove è necessario che la pagina passi alla successiva (il testo "pagina 1" sarà sulla pagina 1 e il testo "pagina 2" sarà sulla seconda pagina).

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

Funziona anche questo:

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

Diciamo che hai un blog con articoli come questo:

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

L'aggiunta di questo al CSS ha funzionato per me:

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

(testato e funzionante su Chrome 69 e Firefox 62).

Riferimento:

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

• https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ; nota importante: qui si dice This property has been replaced by the break-after property.ma non ha funzionato con mebreak-after . Anche il documento MDN su break-afternon sembra essere specifico per le interruzioni di pagina, quindi preferisco mantenere (funzionante) page-break-after: always;.

• Possiamo aggiungere un tag di interruzione di pagina con lo stile " interruzione di pagina: sempre " nel punto in cui vogliamo introdurre l'interruzione di pagina nella pagina html.
  
• " page-break-before " funziona anche

Esempio:

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

Durante la stampa del file html con il codice sopra, l'anteprima di stampa mostrerà tre pagine (una per ogni blocco html " HTML_BLOCK_n ") dove come nel browser tutti e tre i blocchi appaiono in sequenza uno dopo l'altro.

Avevo bisogno di un'interruzione di pagina dopo ogni terza riga mentre usiamo il comando di stampa sul browser.

Ho aggiunto <div style = 'page-break-before: always;'> </div>

dopo ogni 3a fila e il mio genitore div ha display: flex; così ho rimosso display: flex; e funzionava come volevo.

CSS

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

HTML

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

@ Chris Doggett ha perfettamente senso. Tuttavia , ho trovato un trucco divertente su lvsys.com , e in realtà funziona su Firefox e Chrome. Inserisci questo commento ovunque desideri inserire l'interruzione di pagina. Puoi anche sostituire il <p>tag con qualsiasi elemento di blocco.

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