Saltos de página al imprimir con CSS

  • Por
Código CSS que nos servirá para realizar saltos de página al imprimir una página web desde el navegador.
Como quizás sepamos ya, cuando realizamos el CSS para una página web podemos indicar tanto el CSS que se utilizará al visualizar la página, como el CSS que se aplicará al imprimirla. Esto es algo que ya vimos en el artículo CSS para imprimir páginas web del Taller de CSS. En esta ocasión vamos a mostrar un truquillo, apoyados por esta utilidad de creación de un CSS específico para imprimir páginas web, que nos permitirá agregar saltos de página (o quiebras de página, como queráis llamarle) que se vean sólo cuando se imprime el documento.

Hay ocasiones que se realizan aplicaciones web que hacen salida de documentos preparados específicamente para impresión y en los que una vez imprimidos experimentamos que se realiza en varias páginas y que éstas no se rompen exactamente por donde desearíamos. Por poner un ejemplo, hoy estaba mejorando una aplicación de facturación y quería mostrar todas las facturas de un cliente y que al imprimirlas se imprimiese una factura por página. Esta necesidad, que puede ser bastante habitual en ciertas aplicaciones es muy sencilla de implementar por medio de CSS y lo vamos a mostrar a continuación.

Como paso previo, antes de ponernos manos a la obra, tenemos que saber cómo funciona la regla @media, que nos permite definir estilos distintos en una misma declaración CSS. Una vez sabemos ese detalle, podemos ver estos estilos CSS que funcionarían de manera distinta para cada medio (visualización de la página en el navegador e impresión en papel).

@media all {
   div.saltopagina{
      display: none;
   }
}
   
@media print{
   div.saltopagina{
      display:block;
      page-break-before:always;
   }
}

Con esto hemos definido que en cualquier tipo de medio no se muestre ningún DIV con la clase "saltopagina". A continuación, definimos con otra regla @media un estilo específico para la impresión en papel. En este caso sobreescribimos el estilo div.saltopagina, para que en la impresora sí se tenga en cuenta.

Vemos que con la regla de estilo page-break-before estamos indicando un salto de página que se aplica antes del elemento DIV con clase "saltopagina".

Ahora podemos utilizar esta clase CSS sobre las etiquetas DIV, para generar un salto de página que sólo se verá a la hora de imprimir con la impresora:

<div class="saltopagina"></div>

Simplemente tendremos que escribir ese DIV cada vez que queramos hacer un salto de página. Por ejemplo, podríamos hacer esa quiebra de página entre cada una de las facturas de mi aplicación de facturación:

<div id="factura">
   ..... todo el HTML de la factura 1
</div>
<div class="saltopagina"></div>
<div id="factura">
   ..... todo el HTML de la factura 2
</div>
<div class="saltopagina"></div>
<div id="factura">
   ..... todo el HTML de la factura 3
</div>

Nota: Si quieres ver este efecto pero sin tener que desperdiciar papel imprimiendo en la impresora, simplemente tienes que mostrar la vista previa para impresión, que podemos conseguir con el menú "Archivo / Vista preliminar" en Firefox o "Archivo / Vista previa de impresión" en Explorer.

Este ejemplo de saltos de página en la impresión lo podemos ver en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Dani

19/10/2010
Excelente truco!
Gracias, me viene que ni pintado, hace tiempo que buscaba algo así!

Dante

19/10/2010
¿Salto de página sin cortar contenido?
Saludos ¿Existe alguna forma de que al imprimir en la impresora no se corten ciertos elementos del contenido? Por ejemplo: Tablas, párrafos,etcétera ...Todo esto sin saber de antemano a qué altura de la página podrían imprimirse. De antemano, muchas gracias. Saludos desde Chile.

paul

14/11/2012
simplemente Excelente
Es algo que buscaba hace mucho muy buen aporte al saber tecnologico!!

Mario

21/2/2013
Buena referencia
Me ha servido bastante el tutorial, me encuentro desarrollando un xhtml para convertir a pdf que estaba un tanto reacio. Apliqué el page-break-before: always; pero no se reflejó hasta que añadí width:100%; float:left; a mi clase.

Me ahorraron aplicar javascript. Saludos!

Elisur

05/7/2015
Excelente artículo
Muy buen artículo, corto, conciso, fácil y funciona genial. Muchas gracias.

Claudia

24/7/2015
Impresión por separado
Tendrás algún ejemplo que mande esas impresiones a distintas máquinas, te lo agradecería mucho.
Saludos

Anthony Reyes

06/9/2016
Muchas gracias!!
Me sirvio bastante tu articulo, estaba tratando de hacer el salto de pagina para un sistema de reporte de analisis de laboratorio, en el cual se imprime los resultados de cada paciente en una pagina direfente, pero no podia lograrlo.
Trate con poner un tamaño estanda al div, pero el navegador me movia los div, osea en la primera pagina todo vien, pero en las demas pagina era un desastre.
Hasta que busque en internet y luego de visitar varias paginas, por suerte entre a esta y taraaaann, encontre la solucion.

Gracias por salvarme :)

Juan

03/12/2016
Utilicé éste estilo
Excelente herramienta, gracias!

Gaston

13/3/2017
Salto de página al llegar al fondo
Hola, quisiera saber si existe alguna manera de aplicar el salto de página teniendo una tabla html que desborda la página, ya que si lo dejo hacer solo se superpone con el pie de página. Entonces quiero saber donde se cortaría la tabla. Gracias.

Hector

16/8/2017
Excelente
Buenas tardes,

Gracias por tu aportacion, fue de gran ayuda para imprimir etiquetas,

Feliz dia

cesar

28/9/2017
Salto de página
Hola buen dia, no me funciona, lo hice tal y como viene ahi, pero sigue sin saltarme las paginas