¿Puedo forzar un salto de página en la impresión HTML?

Estoy haciendo un informe HTML que será imprimible, y tiene "secciones" que deberían comenzar en una nueva página.

¿Hay alguna forma de poner algo en el HTML / CSS que indique al navegador que necesita forzar un salto de página (comenzar una nueva página) en ese punto?

No necesito que esto funcione en todos los navegadores, creo que puedo decirle a la gente que use un conjunto específico de navegadores para imprimir esto.

Agregue una clase CSS llamada "salto de página" (o "pb"), así:

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

Luego agregue una etiqueta DIV vacía ( o cualquier elemento de bloque que genere un cuadro ) donde desee el salto de página.

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

No aparecerá en la página, pero la dividirá al imprimir.

PD: Tal vez esto solo se aplica al usar -after(y también qué más podría estar haciendo con otros <div>s en la página), pero descubrí que tenía que aumentar la clase CSS de la siguiente manera:

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

Prueba este enlace

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

Solo quería poner una actualización. page-break-afterEs una propiedad heredada ahora.

Oficiales de páginas estados

Esta propiedad ha sido reemplazada por la propiedad break-after .

Puede usar la propiedad CSS page-break-before(o page-break-after). Sólo hay que establecer page-break-before: alwaysen los elementos a nivel de bloque (por ejemplo, el rumbo div, po tableelementos) que debe comenzar en una nueva línea.

Por ejemplo, para provocar un salto de línea antes de cualquier encabezado de segundo nivel y antes de cualquier elemento de la clase newpage(por ejemplo, <div class=newpage>...), usaría

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>

Simplemente agregue esto donde necesite que la página pase a la siguiente (el texto "página 1" estará en la página 1 y el texto "página 2" estará en la segunda página).

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

Esto también funciona:

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

Digamos que tienes un blog con artículos como este:

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

Solo agregar esto al CSS funcionó para mí:

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

(probado y trabajando en Chrome 69 y Firefox 62).

Referencia:

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

• https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ; nota importante: aquí se dice This property has been replaced by the break-after property.pero no funcionó para mí break-after. Además, el documento de MDN sobre break-afterno parece ser específico para los saltos de página, por lo que prefiero mantener el (funcionando) page-break-after: always;.

• Podemos agregar una etiqueta de salto de página con el estilo " page-break-after: always " en el punto donde queremos introducir el salto de página en la página html.
  
• " salto de página antes " también funciona

Ejemplo:

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

Mientras imprime el archivo html con el código anterior, la vista previa de impresión mostrará tres páginas (una para cada bloque html " HTML_BLOCK_n ") donde, como en el navegador, los tres bloques aparecen secuencialmente uno tras otro.

Necesitaba un salto de página después de cada tercera fila mientras usamos el comando de impresión en el navegador.

Agregué <div style = 'page-break-before: always;'> </div>

después de cada 3ra fila y mi div principal tiene display: flex; así que quité la pantalla: flex; y estaba funcionando como quiero.

CSS

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

HTML

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

@ Chris Doggett tiene mucho sentido. Sin embargo , encontré un truco divertido en lvsys.com , y en realidad funciona en Firefox y Chrome. Simplemente coloque este comentario en cualquier lugar donde desee que se inserte el salto de página. También puede reemplazar la <p>etiqueta con cualquier elemento de bloque.

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