Saltos de página al imprimir con CSS

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>

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