¿Cómo evitar una página en blanco adicional al final durante la impresión?

88

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?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
    page-break-after: always;

}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>
css printing Angelin Nadar
fuente
¿Cuál es la altura de la clase de impresión?
juankysmith
1
Como se trata de facturas, la altura será dinámica según el número de artículos.
Angelin Nadar
4
Así es como lo hicimos en la guerra fría:<div>This page intentionally left blank.</div>
Bob Stein

Respuestas:

72

Tal vez podrías agregar

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

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

Tenga en cuenta que el selector: last-child no es compatible con IE8, si está apuntando a ese miserable navegador.

AKX
fuente
88
Está bien, ya que "No compatible con IE" es la función predeterminada de IE
Angelin Nadar
Para otros lectores, esto no funcionó para mí, pero la respuesta a continuación de establecer la altura automática en los elementos HTML y del cuerpo funcionó a la perfección.
Cody
101

¿Has probado esto?

@media print {
    html, body {
        height: 99%;    
    }
}
giannis.epp
fuente
2
Para mí funcionó: @media print {html {altura: 99%; }}, con el cuerpo el documento creado era más grande
Gustavo
10
En mi caso, Zurb Foundation estaba configurando html y body en height: 100%. Pude anular esto conheight: auto
zacharydl
4
Confirmando que el comentario de @zacharydl funciona para mí, y también que height: auto;es más elegante queheight: 99%;
jontsai
Tuve este problema porque estaba configurando la altura de html al 101% para forzar que una barra de desplazamiento se mostrara siempre. (Elimina el salto entre páginas), así que sí, ¡el 100% de altura en el estilo de impresión es una solución sabrosa! - salud.
rob_james
@rob_james para evitar usar 101%, puede configurar overflow-y: scroll; para tener siempre la barra de desplazamiento visible
user161592
46

La solución descrita aquí me ayudó ( enlace de archivo web ).

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

div { border: 1px solid black;}

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

html, body { height: auto; }
Michael Radionov
fuente
9
¡Guau, este era mi antiguo blog! Acabo de tener el mismo problema y estaba pensando que ya lo arreglé una vez ^^ mundo pequeño
Miguel Stevens
3
más 1 para agregar un borde div.
Iftikhar Ali Ansari
¡Agregar el borde fue una gran idea! Me ayudó a darme cuenta de que había una altura mínima establecida en mi envoltorio de página que estaba causando que apareciera una página adicional. Estuve golpeándome la cabeza contra esto por un tiempo. Muchas gracias!
erichunt
33

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

Bryan Chan
fuente
4
establecer la altura en 100vh resolvió mi problema. Gracias
user2398069
1
"@media print {* {overflow: hidden! important;}}" es muy importante para mí.
Shinriyo
1
¡Finalmente una respuesta a un oscuro problema! Safari en OSX mostraba una página completamente en blanco, mientras que Chrome, FF y Edge estaban bien con la vista previa. ¡Muchas gracias!
pop
Tener la altura establecida en 100vh parece evitar que cargue más de una página, de modo que si el documento tiene más de una página, solo se carga la primera página en la vista previa
Filipe
8

Esto funciona para mi 

.print+.print {
    page-break-before: always;
}
Justicia
fuente
¡Esto funcionó para mí mejor que el resto! Más información aquí: blog.jonesed.net/2012/10/…
RemarkLima
5

Si solo desea usar CSS y desea evitar el salto de página, use 

.print{
    page-break-after: avoid;

}

Eche un vistazo a los medios paginados

Puede utilizar equivalentes de secuencias de comandos para pageBreakBefore y pageBreakAfter, asignar dinámicamente sus valores. Por ejemplo, en lugar de forzar saltos de página personalizados a sus visitantes, puede crear un script para que esto sea opcional. Aquí crearé una casilla de verificación que alterna entre cortar la página en los encabezados (h2) y según el criterio de la impresora (predeterminado):

<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>

<script type="text/javascript">
 function breakeveryheader(){
 var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
 for (i=0; i<document.getElementsByTagName("H2").length; i++)
 document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
 }

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

bilash.saha
fuente
4

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

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

Espero que alguien le salve el pelo mientras lucha con el problema ...;)

Adam G.
fuente
4

Parece que hay muchas causas posibles, y el tema probable es que la etiqueta del cuerpo termine con una altura que se considera demasiado grande por una razón.

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

Mi solución: min-height: autoen una @media printdirectiva.

Tenga en cuenta autoque no parece ser un valor correcto, según PhpStorm. Sin embargo, es correcto según la documentación de Mozilla sobre min-height :

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

George Marian
fuente
Solo puse 'altura mínima: inicial! Importante;' Y funcionó para mí.
Siby Thomas
@SibyThomas Evito la declaración! Importante si es posible. Hace las cosas más difíciles para las propiedades primarias. Ni siquiera lo consideré initialya que asumí que sería problemático para elementos de tamaño dinámico. Tenga en cuenta que el valor inicial es 0, por lo que todavía asumo que en autogeneral es más útil.
George Marian
3

establecido display:nonepara todos los demás elementos que no son para impresiones. El entorno visibility:hiddenlos mantendrá ocultos, pero todavía están allí y han ocupado espacio para ellos. la página vacía es para esos elementos ocultos.

Janaka R Rajapaksha
fuente
3

En mi caso, la configuración del ancho para todos los divs ayudó: 

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

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

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

Afshin Razaghi
fuente
3

Tuve un problema similar, pero la causa fue porque tenía 40 píxeles de margen en la parte inferior de la página, por lo que la última fila siempre se ajustaba incluso si hubiera espacio para ella en la última página. No por ningún tipo de page-break-*comando css. Lo arreglé eliminando el margen de la impresión y funcionó bien. ¡Solo quería agregar mi solución en caso de que alguien más tenga algo similar!

AlexMorley-Finch
fuente
2

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

Tengo un div que se supone que es lo único en la página que se imprime, pero estaba obteniendo varias páginas en blanco después. Mi etiqueta corporal está configurada en visibility:hidden;pero eso no fue suficiente. Los elementos de página verticalmente altos todavía ocupan "espacio". Así que agregué esto en mis reglas de CSS de impresión:

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

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

Sherri
fuente
Sí, si lo usa visibility: hidden;todavía ocupará espacio. Si utiliza display: none;el espacio se eliminará. En ese punto, no necesitará establecer específicamente la altura, solo para su información.
chapeljuice
2

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

@media print {
    body {
        display: none;
    }
}

body.printing {
    display: block;
}

Le da cuerpo class = "impresión" en documento listo, y eso habilita los estilos de impresión. Este sistema permite la modularización de los estilos de impresión y la vista previa de impresión en el navegador.

Dirigible
fuente
1

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

<style type="text/css">
   <!--
   html, body {
    height: 95%; 
    margin: 0 0 0 0;
     }
   -->
</style>
Alnassre
fuente
1

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

<style>
    @page {
        size: A4;
        margin: 1cm;
    }

    .print {
        display: none;
    }

    @media print {
        div.fix-break-print-page {
            page-break-inside: avoid;
        }

        .print {
            display: block;
        }
    }

    .print:last-child {
        page-break-after: auto;
    }
</style>
Paulo Weverton
fuente
1

Acabo de encontrar un caso en el que cambiar de

    </div>
    <script src="addressofjavascriptfile.js"></script>
</body>
</html>

a

        <script src="addressofjavascriptfile.js"></script>
    </div>
</body>
</html>

solucionó este problema.

Terry Horner
fuente
1 
.print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

Esto funcionó para mí.

invitado
fuente
1

Extrañamente, establecer un borde transparente resolvió esto para mí:

@media print {
  div {
    border: 1px solid rgba(0,0,0,0)
  }
}

Tal vez sea suficiente establecer el borde en el elemento contenedor. <- Untestet.

alexloehr
fuente
0

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

Impreso por Mr. Someone

Usé 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

que 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

Yousef Al-Hadhrami
fuente
0

Coloque las cosas que necesita en una página en un div y use page-break-inside: evite en ese div. Su div permanecerá en una página e irá a una segunda o tercera página si es necesario, pero el siguiente div, en caso de que tenga que hacer un salto de página, debería comenzar en la página siguiente.

Rick Turner
fuente
0

Compruebe si hay algún espacio en blanco después de la etiqueta html en la parte inferior. Eliminar cualquier espacio en blanco a continuación me ayudó

Wahsei
fuente