Salto de página al imprimir en HTML

Para comenzar una página nueva en un punto determinado al imprimir, aplica una regla CSS de salto de página al elemento anterior o posterior a ese punto y, luego, abre la vista previa de impresión del navegador. Usa page-break-after: always para insertar el salto después de un elemento, page-break-before: always para hacerlo antes o break-after: page como alternativa. La paginación puede variar según el navegador, el tamaño del papel y la configuración de impresión, así que comprueba la vista previa real.

Un botón Print puede llamar a window.print() para abrir el flujo de impresión del navegador. Los ejemplos muestran el código fuente de una página web para que lo adaptes; usa la vista previa para comprobar el resultado con tu página y configuración.

El siguiente código JavaScript imprime una regla CSS que puedes copiar en una hoja de estilos. Usa el mismo selector y la misma declaración que el primer ejemplo de página.

const rule = "@media print {\n  .break-page {\n    page-break-after: always;\n  }\n}";
console.log(rule);

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

Usa page-break-after: always para insertar un salto de página al imprimir

Usa @media print para aplicar el estilo de salto de página solo al imprimir el documento. Asigna la clase break-page al contenido cuya página debe terminar. La declaración page-break-after: always coloca el salto después de ese elemento, de modo que el siguiente encabezado empieza en una página impresa nueva.

Esta página completa tiene dos encabezados y un botón de impresión. Guárdala como archivo HTML o pégala en un editor del navegador y abre la vista previa de impresión. El primer encabezado tiene la clase, así que el salto aparece después de este y antes del segundo encabezado. Ajusta el contenido y revisa la vista previa, porque el tamaño de página y la configuración de impresión afectan la paginación.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page break after an element</title>
  <style>
    @media print {
      .break-page {
        page-break-after: always;
      }
    }
  </style>
</head>
<body>
  <h1 class="break-page">Before page break</h1>
  <h1>After page break</h1>
  <button type="button" onclick="window.print()">Print</button>
</body>
</html>

Demo

Usa page-break-before: always para insertar un salto de página al imprimir

El segundo método usa el mismo contenedor exclusivo para impresión, pero asigna break-page al contenido que debe empezar en una página nueva. La declaración page-break-before: always inserta el salto antes de ese elemento. En este ejemplo, el primer encabezado queda antes del salto y el segundo empieza en la siguiente página impresa. Elige esta ubicación cuando el elemento que inicia la página nueva sea el lugar más claro para aplicar la regla.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page break before an element</title>
  <style>
    @media print {
      .break-page {
        page-break-before: always;
      }
    }
  </style>
</head>
<body>
  <h1>Before page break</h1>
  <h1 class="break-page">After page break</h1>
  <button type="button" onclick="window.print()">Print</button>
</body>
</html>

Usa break-after: page para insertar un salto de página al imprimir

La declaración break-after: page es otra forma de colocar un salto de página después del elemento al que se aplica la regla. Este ejemplo la aplica a un div situado entre los dos encabezados, por lo que el segundo aparece después del separador, en la siguiente página impresa. Al igual que en el método original, la regla CSS no está dentro de @media print; añade ese contenedor si quieres que el estilo solo se aplique al imprimir. El marcado del botón llama a window.print() y abre el flujo de impresión del navegador.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page break after a divider</title>
  <style>
    .break-page {
      break-after: page;
    }
  </style>
</head>
<body>
  <h1>Before page break</h1>
  <div class="break-page"></div>
  <h1>After page break</h1>
  <button type="button" onclick="window.print()">Print</button>
</body>
</html>

Las reglas CSS indican dónde debe ir el salto de página, pero no garantizan la misma paginación en todos los navegadores ni con cualquier configuración de impresión. Después de aplicar una regla, abre la vista previa de impresión del navegador y comprueba que el contenido empiece donde quieres. Si una página empieza demasiado pronto o demasiado tarde, mueve la clase al elemento que deba quedar después o antes del salto y vuelve a revisar la vista previa.