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


188

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.

Respuestas:


336

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;
    }
}

77
Pero como todas las cosas buenas en CSS, esto no siempre funciona de manera consistente en todos los ámbitos, así que prueba la luz del día para que no te enojes y los usuarios se pregunten por qué tu sitio imprime montones de páginas en blanco adicionales.
Zoe el

13
Según MDN, page-break-after"se aplica a los elementos de bloque que generan un cuadro", por lo que usar un <span>elemento vacío no funcionará. Es una mejor idea aplicarlo a una parte de su contenido. Ver developer.mozilla.org/en-US/docs/Web/CSS/page-break-after
nulabilidad el

1
@nullability: Buena captura. Lo había usado principalmente en mi antiguo trabajo en un control WebBrowser en WinForms que usaba IE, el estándar de oro de los siguientes estándares.
Chris Doggett

1
Esto no funcionó para mí en Chrome ... Estoy tratando de hacer un salto de página dentro de un <tr> dentro de una <table>, ¿funcionará en este caso?
Delphirules

3
Por alguna razón, al usar este truco en Chrome, 1 fila de píxeles de la página siguiente se filtraba a la anterior (notable cuando se usa color de fondo). Lo arreglé usando.pagebreak { min-height: 1px; page-break-before: always; }
pzmarzly

44

Prueba este enlace

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

Creo que esta es una mejor respuesta, ya que no implica destrozar el HTML para lograr un efecto visual.
FinnNk

De hecho, me gusta más el otro, ya que me da más control. Siempre puedo asignar la clase "salto de página" solo a los H1 que deberían hacer que la página salte. Pero sigue siendo una buena solución. +1 para @media, aunque la pantalla debería ignorar el salto de página anterior, supongo. ¡Gracias!
Daniel Magliola

El h1 es un ejemplo de lo que puede usar como etiqueta para el corte de impresión. Puede sustituir y etiquetar el nombre que desee. también puedes usar page-break-after: always
jfarrell el

1
h1no es un buen ejemplo, ya que significa un encabezado de primer nivel, y una página normalmente debería tener solo uno de esos encabezados.
Jukka K. Korpela

66
Si desea omitir el primer encabezado en la primera página, intenteh1:not(:first-child) { page-break-before:always; }
Jeff Atwood

10

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 .


Cabe señalar que esta propiedad solo es compatible con los navegadores Microsoft IE y Edge. caniuse.com/…
Benjamin

7

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 }

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>

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)

1

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:


0
  • 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.


0

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.


0

CSS

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

HTML

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

-7

@ 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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.