Comment éviter les pages vierges à la fin de l'impression?
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>
Vous pourriez peut-être ajouter
.print:last-child {
page-break-after: auto;
}
le dernier élément print n'aura donc 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 vilain navigateur.
Avez-vous essayé cela?
@media print {
html, body {
height: 99%;
}
}
La solution décrite ici m'a aidé ( lien web) ).
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 marges, etc.).
div { border: 1px solid black;}
Et la solution elle-même consistait à ajouter les styles suivants:
html, body { height: auto; }
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
Ça marche pour moi
.print+.print {
page-break-before: always;
}
Je ne sais pas (comme 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 avec le problème ...;)
J'ai changé l'affichage css et la propriété width de la zone d'impression
#printArea{
display:table;
width:100%;
}ensemble display:none pour tous les autres éléments qui ne sont pas destinés aux impressions. réglage visibility:hidden les gardera cachés, mais ils sont toujours là et ont pris de la place pour eux. page vide est pour ces éléments cachés.
Si vous voulez juste utiliser CSS et que vous voulez éviter les sauts de page, utilisez
.print{
page-break-after: avoid;
}
Jetez un oeil à support paginé
Vous pouvez utiliser des équivalents de script pour pageBreakBefore et pageBreakAfter, attribuer dynamiquement leurs valeurs. Par exemple, au lieu d'imposer des sauts de page personnalisés à vos visiteurs, vous pouvez créer un script pour le rendre facultatif. Ici, je vais créer une case à cocher qui bascule entre le découpage de la page au niveau des 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 utilise cela. Vous pouvez remplacer H2 dans le script par une autre balise telle que P ou DIV.
Dans mon cas, le réglage de la largeur à toutes les divisions a aidé:
.page-content div {
width: auto !important;
max-width: 99%;
}
Après avoir lutté avec différents paramètres de saut de page et de hauteurs 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 qui imprime sur la page, mais j'ai eu plusieurs pages vierges après. Ma balise body est définie sur visibility:hidden; mais ça ne suffisait pas. Les éléments de page verticaux 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 divs spécifiques par leurs identifiants contenant des éléments de mise en page de grande taille. Je réduisis la hauteur puis les retirai 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é. J'espère que ça aide quelqu'un.
Il semble y avoir beaucoup de causes possibles, le thème probable étant que la balise body se termine avec une hauteur jugée trop grande pour la raison.
Ma cause: min-height: 100% dans une feuille de style de base.
Ma solution: min-height: auto dans un @media print directive.
Notez que auto ne semble pas être une valeur correcte, selon PhpStorm. Cependant, il est correct selon la documentation de min-height :
auto
La taille minimale par défaut pour les éléments flexibles, fournissant une valeur par défaut plus raisonnable que 0 pour les autres présentations.
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.
Chrome semble présenter un bogue qui, dans certaines situations, cache des éléments post-chargés avec affichage: aucun, laisse beaucoup d’espace supplémentaire derrière. Je suppose qu'ils calculent la hauteur du document avant que le rendu du document ne soit terminé. Chrome déclenche également 2 événements de changement de support, mais ne prend pas en charge onbeforeprint, etc.
@media print {
body {
display: none;
}
}
body.printing {
display: block;
}
Vous donnez body class = "printing" sur doc ready, ce qui active les styles d'impression. Ce système permet la modularisation des styles d'impression et l'aperçu avant impression dans le navigateur.
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>
.print:last-child{
page-break-after: avoid;
page-break-inside: avoid;
margin-bottom: 0px;
}
Cela a fonctionné pour moi.
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'avais un problème similaire, mais la cause en était parce que j'avais 40 px de marge au bas de la page. La dernière ligne était donc toujours bouclée, même s'il y avait de la place pour la dernière page. Pas à cause de tout type de page-break-* commande css. J'ai fixé 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!
Aucune des réponses ne fonctionnait avec moi, mais après les avoir toutes lues, j'ai compris quel était le problème, dans mon cas, j'ai une page HTML à imprimer, mais elle imprimait avec elle une page vierge très blanche. J'utilise AdminLTE a bootstrap 3 thème pour la page du rapport à imprimer et la balise de bas de page dans laquelle je voulais placer ce texte en bas à droite de la page:
Imprimé par M. Quelqu'un
J'ai utilisé jquery pour mettre ce texte à la place 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 balise utilise la classe .main-footer qui a les attributs
padding: 15px;
border-top: 1px solid
cela a provoqué un espace 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
Étrangement, la définition d’une bordure transparente a résolu le problème pour moi:
@media print {
div {
border: 1px solid rgba(0,0,0,0)
}
}
Peut-être suffira-t-il de définir la bordure sur l'élément conteneur. <- Untestet.