comment éviter une page vierge supplémentaire à la fin lors de l'impression?

88

J'utilise une propriété CSS,

Si j'utilise page-break-after: always;=> Il imprime une page vierge supplémentaire avant

Si j'utilise page-break-before: always;=> Il imprime une page vierge supplémentaire après. Comment éviter cela?

<!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
la source
quelle est la hauteur de la classe d'impression?
juankysmith
1
Comme c'est pour les factures, la hauteur sera dynamique selon le nombre d'articles.
Angelin Nadar
4
Voici comment nous l'avons fait pendant la guerre froide:<div>This page intentionally left blank.</div>
Bob Stein

Réponses:

72

Vous pourriez peut-être ajouter

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

donc le dernier printélément n'obtiendra pas le saut de page supplémentaire.

Notez que le sélecteur: last-child n'est pas pris en charge dans IE8, si vous ciblez ce misérable navigateur.

AKX
la source
88
Son ok comme "Non pris en charge dans IE" est la fonction dafault d'IE
Angelin Nadar
Pour les autres lecteurs, cela n'a pas fonctionné pour moi, mais la réponse ci-dessous consistant à définir la hauteur automatique sur les éléments HTML et corps a fonctionné à merveille.
Cody
101

Avez-vous essayé cela?

@media print {
    html, body {
        height: 99%;    
    }
}
giannis.epp
la source
2
Pour moi a travaillé: @media print {html {hauteur: 99%; }}, avec le corps le document créé était plus grand
Gustavo
10
Dans mon cas, la Fondation Zurb définissait html et body sur height: 100%. J'ai pu remplacer cela avecheight: auto
zacharydl
4
Confirmer que le commentaire de @ zacharydl fonctionne pour moi, et c'est aussi height: auto;plus élégant queheight: 99%;
jontsai
J'ai eu ce problème, car je définissais la hauteur html à 101% pour forcer une barre de défilement à toujours s'afficher. (Élimine le saut entre les pages) - donc oui, une hauteur de 100% dans le style d'impression est une solution savoureuse! - à votre santé.
rob_james
@rob_james pour éviter d'utiliser 101%, vous pouvez définir overflow-y: scroll; pour toujours avoir la barre de défilement visible
user161592
46

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

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; }
Michael Radionov
la source
9
Wow c'était mon ancien blog! J'ai juste eu le même problème et je pensais que j'avais déjà résolu ce petit monde une fois ^^
Miguel Stevens
3
plus 1 pour ajouter une bordure div.
Iftikhar Ali Ansari
L'ajout de la bordure était une excellente idée !! Cela m'a aidé à réaliser qu'il y avait une hauteur minimale définie sur mon wrapper de page qui provoquait l'apparition d'une page supplémentaire. Je me cognais la tête contre ça pendant un moment. Merci beaucoup!
erichunt
33

si Aucun de ces travaux, essayez ceci

@media print {

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

}

assurez-vous que c'est 100vh

Bryan Chan
la source
4
régler la hauteur à 100vh a résolu mon problème. Merci
user2398069
1
"@media print {* {overflow: hidden! important;}}" est très important pour moi.
shinriyo
1
Enfin une réponse à un problème obscur! Safari sur OSX montrait une page complètement vierge tandis que Chrome, FF et Edge étaient tous bons avec l'aperçu. Merci beaucoup!
pop
Avoir la hauteur réglée à 100vh semble l'empêcher de charger plus d'une page, de sorte que si le document a plus d'une page, seule la première page se charge sur l'aperçu
Filipe
8

Cela fonctionne pour moi 

.print+.print {
    page-break-before: always;
}
Lam
la source
Cela a fonctionné pour moi mieux que les autres! Quelques informations supplémentaires ici: blog.jonesed.net/2012/10/…
RemarkLima
5

Si vous voulez juste utiliser CSS et que vous voulez éviter les sauts de page, utilisez 

.print{
    page-break-after: avoid;

}

Jetez un œil aux médias paginés

Vous pouvez utiliser des équivalents de script pour pageBreakBefore et pageBreakAfter, affecter dynamiquement leurs valeurs. Par exemple, au lieu de forcer des sauts de page personnalisés à vos visiteurs, vous pouvez créer un script pour rendre cela facultatif. 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
 }

Cliquez ici pour un exemple qui l'utilise. Vous pouvez remplacer H2 dans le script par une autre balise telle qu'un P ou DIV.

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

bilash.saha
la source
4

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 ...;)

Adam G.
la source
4

Il semble qu'il y ait beaucoup de causes possibles, le thème probable étant que la balise body se retrouve avec une hauteur considérée comme trop grande pour une raison quelconque.

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

Ma solution: min-height: autodans une @media printdirective.

Remarque, autone 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 des éléments flexibles, fournissant une valeur par défaut plus raisonnable que 0 pour les autres mises en page.

George Marian
la source
Je viens de mettre 'min-height: initial! Important;' et cela a fonctionné pour moi.
Siby Thomas
@SibyThomas J'évite la! Déclaration importante si possible. Cela rend les choses plus difficiles pour les propriétés prioritaires. Je n'ai même pas pensé initialcar je supposais que ce serait problématique pour les éléments de taille dynamique. Notez que la valeur initiale est 0, donc je suppose toujours que autoc'est généralement plus utile.
George Marian
3

défini display:nonepour tous les autres éléments qui ne sont pas destinés aux impressions. le réglage visibility:hiddenles 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.

Janaka R Rajapaksha
la source
3

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

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

J'ai changé l'affichage css et la propriété width de la zone d'impression

#printArea{
    display:table;
    width:100%;
}
Développer l'extrait

Afshin Razaghi
la source
3

J'ai eu un problème similaire, mais la cause était parce que j'avais 40px de marge en bas de la page, donc la toute dernière ligne serait toujours enveloppée même s'il y avait de la place pour cela sur la dernière page. Pas à cause de toute sorte de page-break-*commande css. J'ai corrigé en supprimant la marge sur l'impression et cela a bien fonctionné. Je voulais juste ajouter ma solution au cas où quelqu'un d'autre aurait quelque chose de similaire!

AlexMorley-Finch
la source
2

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 j'obtenais plusieurs pages vierges après. Ma balise corporelle est définie sur visibility:hidden;mais ce n'était pas suffisant. Les éléments de page verticalement hauts prennent toujours de la «place». J'ai donc ajouté ceci dans mes règles CSS d'impression:

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

pour cibler des div spécifiques par leurs identifiants qui contiennent de grands éléments de mise en page. J'ai réduit la hauteur, puis je les ai supprimées de la mise en page. Plus de pages blanches. Des années plus tard, je suis heureux de dire à mon client que je l'ai craqué. J'espère que cela aide quelqu'un.

Sherri
la source
Oui, si vous l'utilisez, visibility: hidden;cela prendra encore de la place. Si vous utilisez display: none;l'espace sera supprimé. À ce stade, vous n'aurez pas besoin de définir spécifiquement la hauteur, juste pour info.
chapeljuice
2

Chrome semble avoir un bogue où, dans certaines situations, masquer des éléments après le chargement avec l'affichage: aucun, 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 le 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.

Dirigeable
la source
1

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>
Alnassre
la source
1

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>
Paulo Weverton
la source
1

Je viens de rencontrer un cas où changer de

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

à

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

résolu ce problème.

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

Cela a fonctionné pour moi.

client
la source
1

Étrangement, définir une bordure transparente a résolu ceci pour moi:

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

Il suffira peut-être de définir la bordure sur l'élément conteneur. <- Untestet.

Alexloehr
la source
0

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 j'imprimais avec elle 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. Someone

J'ai utilisé jquery pour mettre ce texte au lieu du précédent pied de page "Droits de copie" 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-footer 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

Yousef Al-Hadhrami
la source
0

Mettez les éléments dont vous avez besoin sur une page dans un div et utilisez le saut de page à l'intérieur: évitez ce div. Votre div restera sur une page et passera sur une deuxième ou troisième page si nécessaire, mais le div suivant, s'il doit faire un saut de page, devrait commencer à la page suivante.

Rick Turner
la source
0

Vérifiez s'il y a un espace blanc après la balise html en bas. Supprimer tous les espaces ci-dessous m'a aidé

Wahsei
la source