¿Cómo evitar páginas en blanco adicionales al final mientras se imprime?

Estoy usando una propiedad CSS,

Si uso page-break-after: always; => Imprime una página en blanco adicional antes

Si uso page-break-before: always; => Imprime una página en blanco adicional después. ¿Cómo evitar esto?

     Insert title here  .print{ page-break-after: always; }   window.print();    
fd
fdfd

Tal vez podrías agregar

 .print:last-child { page-break-after: auto; } 

por lo que el último elemento de print no obtendrá el salto de página adicional.

Tenga en cuenta que el selector de último hijo no es compatible con IE8, si tiene como objective ese miserable navegador.

¿Has probado esto?

 @media print { html, body { height: 99%; } } 

La solución descrita aquí me ayudó ( enlace webarchive ).

En primer lugar, puede agregar bordes a todos los elementos para ver qué hace que se anexe una nueva página (tal vez algunos márgenes, rellenos, etc.).

 div { border: 1px solid black;} 

Y la solución en sí era agregar los siguientes estilos:

 html, body { height: auto; } 

Esto funciona para mí

 .print+.print { page-break-before: always; } 

si ninguno de esos funciona, intente esto

 @media print { html, body { height:100vh; margin: 0 !important; padding: 0 !important; overflow: hidden; } } 

asegúrese de que sea 100vh

Si solo quieres utilizar CSS y quieres evitar el salto de página, utiliza

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

Eche un vistazo a los medios paginados

Puede utilizar equivalentes de scripting para pageBreakBefore y pageBreakAfter, asigne dinámicamente sus valores. Por ejemplo, en lugar de forzar saltos de página personalizados para sus visitantes, puede crear una secuencia de comandos para que esto sea opcional. Aquí crearé una checkbox que alterna entre dividir la página en los encabezados (h2) y según la discreción de la propia impresora (predeterminada):

 

Haga clic aquí para ver un ejemplo que usa esto. Puede sustituir H2 dentro del script con otra etiqueta como P o DIV.

http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

establecer display:none para todos los demás elementos que no son para impresiones. configuración de visibility:hidden los mantendrá ocultos, pero todos siguen allí y han tomado espacio para ellos. la página vacía es para esos elementos ocultos.

No sé (por ahora) por qué, pero esta ayudó:

  @media print { html, body { border: 1px solid white; height: 99%; page-break-after: avoid; page-break-before: avoid; } } 

Espero que alguien salve su cabello mientras lucha con el problema …;)

Después de luchar con varios ajustes y alturas de salto de página y un millón de varias reglas de CSS en la etiqueta del cuerpo, finalmente lo resolví un año después.

Tengo un div que se supone que es el único en la página que se imprime, pero recibí varias páginas en blanco después de él. La etiqueta de mi cuerpo está configurada para visibility:hidden; pero eso no fue suficiente. Los elementos de página verticalmente altos aún ocupan “espacio”. Así que agregué esto en mis reglas de impresión de CSS:

 #header, #menu, #sidebar{ height:1px; display:none;} 

para segmentar divs específicos por sus ids que contienen elementos altos de diseño de página. Reduje la altura y luego los quité del diseño. No más páginas en blanco Años después, estoy feliz de decirle a mi cliente que lo rompí. Espero que esto ayude a alguien.

Parece que hay muchas causas posibles, y el tema probable es que la etiqueta corporal termine con una altura que se considera demasiado grande por razones de peso.

Mi causa: min-height: 100% en una hoja de estilo base.

Mi solución: min-height: auto en una directiva @media print .

Tenga en cuenta, auto no parece ser un valor correcto, de acuerdo con PhpStorm. Sin embargo, es correcto según la documentación de Mozilla sobre la altura mínima :

auto
El tamaño mínimo predeterminado para elementos flexibles, que proporciona un valor predeterminado más razonable que 0 para otros diseños.

En mi caso, configurar el ancho de todos los divs ayudó:

 .page-content div { width: auto !important; max-width: 99%; } 

Cambié la visualización CSS y el ancho de la propiedad del área de impresión

 #printArea{ display:table; width:100%; } 

Agregue este css a la misma página para extender el archivo css.

  

Probé todas las soluciones, esto funciona para mí:

  

Chrome parece tener un error donde, en determinadas situaciones, ocultar elementos después de la carga con pantalla: ninguno, deja mucho espacio extra. Supongo que están calculando la altura del documento antes de que el documento termine de renderizarse. Chrome también activa 2 eventos de cambio de medios, y no admite onbeforeprint, etc. Básicamente son el formato de impresión. Aquí está mi solución:

 @media print { body { display: none; } } body.printing { display: block; } 

Le das a body class = “printing” en el doc ready, y eso habilita los estilos de impresión. Este sistema permite la modularización de estilos de impresión y la vista previa de impresión en el navegador.

Acabo de encontrar un caso donde cambiar de

      

a

      

corrigió este problema

tratar:

 @media print { page-break-after : auto; } 

Ninguna de las respuestas funcionó conmigo, pero después de leer todas ellas, descubrí cuál era el problema en mi caso. Tengo 1 página HTML que quiero imprimir, pero estaba imprimiendo con una página en blanco adicional. Estoy usando AdminLTE un tema bootstrap 3 para la página del informe para imprimir y en él la etiqueta del pie de página quería colocar este texto en la parte inferior derecha de la página:

Impreso por el Sr. Alguien

Utilicé jquery para poner ese texto en lugar del pie de página anterior “Derechos de Copia” con

 $("footer").html("Printed by Mr. Someone"); 

y por defecto en el tema, el pie de página de la etiqueta usa la clase .main-footer que tiene los atributos

 padding: 15px; border-top: 1px solid 

eso causó un espacio en blanco adicional, así que después de conocer el problema, tenía diferentes opciones, y la mejor opción era usar

 $( "footer" ).removeClass( "main-footer" ); 

Solo en esa página específica