Salto de página al imprimir en HTML

1. Establezca la propiedad page-break-after en siempre Dentro de @media print en Salto de página en HTML
2. Establezca la propiedad page-break-before en siempre Dentro de @media print en Salto de página en HTML
3. Establezca la propiedad break-after en page para Salto de página en HTML

Este artículo explicará algunos métodos para forzar un salto de página al imprimir contenido HTML.

Establezca la propiedad page-break-after en siempre Dentro de @media print en Salto de página en HTML

La regla @media print de CSS nos permite aplicar las reglas mientras imprimimos el contenido HTML. Podemos cambiar los estilos con esta regla.

Podemos usar JavaScript para crear un evento onclick() que imprima los contenidos HTML especificados. El método window.print() imprime la ventana actual.

Podemos usar el evento onclick() para invocar este método.

En CSS, utilizando @media print, podemos establecer la propiedad page-break-after en siempre para que un elemento HTML salte de página desde ese punto.

Por ejemplo, cree dos encabezados usando la etiqueta h1. Nombra el primer encabezado como Antes del salto de página y el otro como Después del salto de página.

Asigne al primer encabezado un nombre de clase de break-page. Luego cree un botón, Imprimir y agregue un oyente onclick para el botón y llame al método window.print().

Selecciona la clase break-page dentro de la regla @media print en la sección CSS. A continuación, establezca su propiedad page-break-after en siempre.

El siguiente ejemplo muestra que después de hacer clic en el botón Imprimir, el encabezado Antes del salto de página aparece en la primera página, mientras que el segundo encabezado y el botón aparecen en la segunda página durante la impresión. Podemos usar la propiedad page-break-after para hacer un salto de página mientras imprimimos HTML.

Código de ejemplo:

<h1 class="break-page">Before page break </h1>
<h1>After page break</h1>
<button onclick="window.print()">Print</button>

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

Manifestación

Establezca la propiedad page-break-before en siempre Dentro de @media print en Salto de página en HTML

Este método es bastante similar al anterior. La diferencia es que estamos usando la propiedad page-break-before.

Se usa de manera similar en la regla @media print. Este método hace que la página salte antes que el contenido HTML, donde hemos usado la propiedad page-break-before.

Por ejemplo, cree dos encabezados como en el primer método. Esta vez, asigne al segundo encabezado el nombre de clase break-page.

A continuación, cree un botón con un oyente onclick que invoque el método window.print(). En la sección CSS, dentro de @media print, seleccione la clase break-page y establezca su propiedad page-break-before en siempre.

El salto de página aparecerá antes del segundo encabezado, Después del salto de página al hacer clic en el botón Imprimir.

Código de ejemplo:

<h1>Before page break </h1>
<h1 class="break-page">After page break</h1>
<button onclick="window.print()">Print</button>

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

Establezca la propiedad break-after en page para Salto de página en HTML

Podemos establecer la propiedad break-after de un elemento en page para dividir la página en HTML. Romperá la página después del elemento donde se usa la propiedad.

Luego, podemos imprimir las páginas HTML usando window.print() como en los métodos anteriores. Este método difiere de los métodos anteriores porque no utiliza la regla @media print.

Por ejemplo, cree dos encabezados como de costumbre. Entre los encabezados, cree un div vacío y asígnele un nombre de clase de break-page.

A continuación, cree un botón en el que se pueda hacer clic con el oyente onclick que llama al método window.print().

Seleccione la clase break-page y establezca su propiedad break-after en page en el CSS.

La página se salta después del primer encabezado durante la impresión. De esta forma, podemos usar la propiedad break-after para dividir la página en HTML.

Código de ejemplo:

<h1>
Before page break
</h1>
<div class="break-page"></div>
<h1>
After page break
</h1>
<button onclick="window.print();" />Print</button>

.break-page {
    break-after: page;
}