Comment éviter une page blanche supplémentaire à la fin de l'impression?

Avez-vous essayé?

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

Solution décrite ici m'a aidé (webarchive lien).

Tout d'abord, vous pouvez ajouter une bordure à tous les éléments pour voir ce qui provoque l'ajout d'une nouvelle page (peut-être des marges, des rembourrages, etc.).

div { border: 1px solid black;}

Et la solution elle-même était d'ajouter les styles suivants:

html, body { height: auto; }

Cela fonctionne pour moi

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

Si aucun de ces travaux, essayez ceci

@media print {

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

}

Assurez-vous qu'il est 100vh

Si vous voulez juste utiliser CSS et que vous voulez éviter le saut de page, Utilisez

.print{
    page-break-after: avoid;

}

Jetez un oeil à médias paginés

Vous pouvez utiliser des équivalents de script pour pageBreakBefore et pageBreakAfter, attribuer dynamiquement leurs valeurs. Par exemple, au lieu de forcer les sauts de page personnalisés sur vos visiteurs, vous pouvez créer un script pour rendre cette option facultative. Ici, je vais créer une case à cocher qui bascule entre le découpage de la page dans les en-têtes (h2) et à la discrétion de l'imprimante (par défaut):

<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
 }

Sur ici pour un exemple qui utilise cette. Vous pouvez remplacer H2 à l'intérieur du script par une autre balise telle que P ou DIV.

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

Définissez display:none pour tous les autres éléments qui ne sont pas destinés aux impressions. définir visibility:hidden les gardera cachés, mais ils sont tous toujours là et ont pris de la place pour eux. la page vide est pour ces éléments cachés.

Je ne sais pas (pour l'instant) pourquoi, mais celui-ci a aidé:

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

J'espère que quelqu'un sauvera ses cheveux tout en luttant contre le problème... ;)

Après avoir lutté avec divers paramètres et hauteurs de saut de page et un million de règles CSS différentes sur la balise body, Je l'ai finalement résolu plus d'un an plus tard.

J'ai un div qui est censé être la seule chose sur la page qui s'imprime, mais je recevais plusieurs pages blanches après. Ma balise body est définie sur visibility:hidden; mais ce n'était pas suffisant. Les éléments de page verticalement élevés occupent toujours de l'espace. J'ai donc ajouté ceci dans mes règles CSS d'impression:

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

Pour cibler des divs spécifiques par leurs ID qui contiennent des éléments de mise en page haute. J'ai rétréci la hauteur, puis les ai retirés de la mise en page. Pas plus de pages vierges. Des années plus tard, je suis heureux de dire à mon client que je l'ai craqué. Espérons que cela aide quelqu'un.

Semble qu'il y a beaucoup de causes possibles, avec le thème probable étant que la balise body se termine avec une hauteur qui est considérée comme trop grande pour w/E raison.

Ma cause: min-height: 100% dans une feuille de style de base.

Ma solution: min-height: auto dans une directive @media print.

Remarque, auto ne semble pas être une valeur correcte, selon PhpStorm. Cependant, il est correct selon la documentation de Mozilla sur min-height :

Auto
La taille minimale par défaut pour flex éléments, fournissant une valeur par défaut plus raisonnable que 0 pour les autres mises en page.

Dans mon cas, définir la largeur de tous les divs a aidé:

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

J'ai changé la propriété CSS display et width de la zone d'impression

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

Ajoutez ce css à la même page pour étendre le fichier css.

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

J'ai essayé toutes les solutions, cela fonctionne pour moi:

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

Chrome semble avoir un bug où, dans certaines situations, cacher des éléments post-chargement avec display: none, laisse beaucoup d'espace supplémentaire derrière. Je suppose qu'ils calculent la hauteur du document avant que le document ne soit rendu. Chrome déclenche également 2 événements de changement de média, et ne prend pas en charge onbeforeprint, etc. Ils sont essentiellement l'ie de l'impression. Voici ma solution de contournement:

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

body.printing {
    display: block;
}

Vous donnez body class = "printing" sur doc ready, et cela active les styles d'impression. Ce système permet la modularisation des styles d'impression et l'aperçu avant impression dans le navigateur.

Je viens de rencontrer un cas où le changement de

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

À

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

Correction de ce problème.

Essayez:

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

Aucune des réponses n'a fonctionné avec moi, mais après les avoir toutes lues, j'ai compris quel était le problème dans mon cas J'ai 1 page Html que je veux imprimer mais il imprimait avec une page blanche supplémentaire. J'utilise AdminLTE un thème bootstrap 3 pour la page du rapport à imprimer et dans celui-ci la balise de pied de page que je voulais placer ce texte en bas à droite de la page:

Imprimé par M. Quelqu'un

J'ai utilisé jquery pour mettre ce texte au lieu de "Copier Droits " pied de page avec

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

Et par défaut dans le thème, le pied de page de la balise utilise la classe .main-pied qui a les attributs

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

Cela a causé un espace blanc supplémentaire, donc après avoir connu le problème, j'avais différentes options, et la meilleure option était d'utiliser

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

Juste dans cette page spécifique