2009-11-02 14 views
76

Estoy haciendo un informe HTML que se podrá imprimir, y tiene "secciones" que deberían comenzar en una página nueva.¿Puedo forzar un salto de página en la impresión HTML?

¿Hay alguna manera de poner algo en el HTML/CSS que indique al navegador que necesita saltar a 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.

Gracias
Daniel

Respuesta

163

Añadir una clase CSS llamado "salto de página" (o "pb"), así:

.pagebreak { page-break-before: always; } /* page-break-after works, as well */ 

A continuación, añadir una etiqueta DIV vacío (or any block element that generates a box) donde desea que el salto de página.

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

No aparecerá en la página, pero dividirá la página al imprimir.

+2

Pero como todas las cosas buenas de la CSS, esto no siempre funciona de forma consistente en todos los ámbitos, por lo que probar las luces del día de vida fuera de él, para que no tiene usuarios enojados preguntándose por qué su sitio imprime montones de páginas adicionales en blanco! – Zoe

+10

De acuerdo con MDN, 'page-break-after'" se aplica a los elementos de bloque que generan un cuadro, "por lo que no funcionará el uso de un elemento' 'vacío. Es una mejor idea aplicarlo a una parte de su contenido. Consulte https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after – nullability

+1

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

26

probar este link

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

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

+0

Realmente me gusta el otro mejor, ya que me da más control. Siempre puedo asignar la clase "salto de página" solo a las 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 antes, supongo. ¡Gracias! –

+0

h1 es un ejemplo de lo que puede usar como etiqueta para el salto de impresión. Puede sustituir y etiquetar el nombre allí que desee.también puede usar page-break-after: siempre – jfarrell

3

Puede utilizar la propiedad CSS page-break-before (o page-break-after). Simplemente configure page-break-before: always en los elementos de nivel de bloque (por ejemplo, encabezado, div, p o table elementos) que deberían comenzar en una nueva línea.

Por ejemplo, para provocar un salto de línea antes de cualquier segundo nivel de partida y antes de cualquier elemento en la clase newpage (por ejemplo, <div class=newpage> ...), se usaría

h2, .newpage { page-break-before: always } 
-1

@Chris Doggett tiene mucho sentido. Aunque, encontré un truco divertido en lvsys.com, y realmente funciona en Firefox y Chrome. Simplemente coloque este comentario en cualquier lugar donde desee insertar el salto de página. También puede reemplazar la etiqueta <p> con cualquier elemento de bloque.

<p><!-- pagebreak --></p> 
+2

Esto no funciona –

Cuestiones relacionadas