Les Sauts De Page Google Chrome Printing
j'essaie d'obtenir google chrome pour faire des sauts de page.
j'ai été informé via un tas de sites Web que page-break-after: always;
est valide dans chrome, mais je ne semble pas pouvoir le faire fonctionner, même avec un exemple très simple. est-il possible de forcer un saut de page lors de l'impression dans chrome?
13 réponses
j'ai utilisé l'approche suivante avec succès dans tous les principaux navigateurs, y compris Chrome:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is Page 3</h1>
</div>
</body>
</html>
ceci est un exemple simplifié. Dans le code réel, chaque page div contient beaucoup plus d'éléments.
en fait, il manque un détail dans la réponse choisie comme acceptée (de Phil Ross)....
il NE le travail en Chrome, et la solution est vraiment ridicule !!
le parent et l'élément sur lequel vous voulez contrôler le bris de page doivent être déclarés comme:
position: relative
regardez ce violon: http://jsfiddle.net/petersphilo/QCvA5/5/show/
c'est vrai pour:
page-break-before
page-break-after
page-break-inside
cependant, le contrôle de page-break-in en Safari ne fonctionne pas (au 5.1.7, au moins)
j'espère que cela aide!!!
PS: la question ci-dessous a soulevé le fait que les versions récentes de Chrome ne respectent plus cela, même avec la position: relative; trick. Cependant, ils semblent respecter:
-webkit-region-break-inside: avoid;
voir ce violon: http://jsfiddle.net/petersphilo/QCvA5/23/show
donc je suppose que nous devons ajouter que maintenant...
Espérons que cette aide!
je voulais juste noter ici que Chrome ignore aussi les paramètres de page-break-* css dans les divs qui ont été flottés.
je soupçonne qu'il y a une bonne justification pour cela quelque part dans la spécification css, mais j'ai pensé que le fait de noter cela pourrait aider quelqu'un un jour; -)
juste une autre note: IE7 ne peut pas reconnaître les paramètres de rupture de page sans une hauteur explicite sur l'élément de bloc précédent:
j'ai moi - même ce problème - ma page casse fonctionne dans tous les navigateurs sauf Chrome-et j'ai pu l'isoler jusqu'à l'élément page-break-after se trouvant à l'intérieur d'une cellule de table. (Anciens modèles hérités dans le SGC.)
apparemment Chrome N'honore pas les propriétés page-break-before ou page-break-after À l'intérieur des cellules de la table, donc cette version modifiée de L'exemple de Phil met le deuxième et le troisième titre sur la même page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<table>
<tr>
<td>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is, sadly, still Page 2</h1>
</div>
</td>
</tr>
</table>
</body>
</html>
La mise en œuvre de Chrome est (sans doute) autorisée compte tenu de la spécification CSS - vous pouvez en voir plus ici: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en
j'avais un problème similaire à celui-ci mais j'ai finalement trouvé la solution. J'ai eu overflow-x: hidden; appliqué à la balise donc peu importe ce que j'ai fait ci-dessous dans le DOM, il ne permettrait jamais les sauts de page. En revenant à overflow-x: visible; il a fonctionné très bien.
J'espère que ça aidera quelqu'un là-bas.
méfiez-vous de CSS : display:inline-block
lors de l'impression.
aucune des propriétés CCS pour aller à la page suivante ne fonctionnerait pour moi dans Chrome et Firefox si ma table était à l'intérieur d'un div avec le style display:inline-block
par exemple, ce qui suit ne fonctionne pas :
<div style='display:inline-block'>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>
mais le travail suivant:
<div>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>
j'ai fait face à ce problème sur chrome avant et la cause pour cela est qu'il y avait un div A min-Hauteur fixé à une valeur. La solution était de réinitialiser min-height en imprimant comme suit:
@media print {
.wizard-content{
min-height: 0;
}
}
2016 mise à jour:
Eh bien, j'ai eu ce problème, quand j'ai eu
overflow:hidden
sur mon div.
après que j'ai fait
@media print {
div {
overflow:initial !important
}
}
tout s'est très bien et parfait
il semble que cela ait été discuté relativement récemment (février 2014) (sur une vieille fiche de bogue de 2005) sur le tracker webkit
si vous utilisez Chrome avec Bootstrap Css les classes qui contrôlent la mise en page de grille par exemple col-xs-12 etc utilisez" float: left " qui, comme d'autres l'ont souligné, casse les ruptures de page. Retirez - les de votre page pour impression. Il a travaillé pour moi. (Sur la version Chrome = 49.0.2623.87)
ont ce problème. Aussi longtemps que le temps passe... Sans les champs latéraux de la page c'est break normal, mais quand les champs apparaissent, la page et "page break space" vont se mettre à l'échelle. Donc, avec un champ normal, dans un document, c'était incorrect. Je le fixe avec set
width:100%
et utilisation
div.page
{
page-break-before: always;
page-break-inside: avoid;
}
utilisez-le en première ligne.
pour autant que je sache, la seule façon d'obtenir les bonnes sauts de page dans les tableaux avec Google Chrome est de le donner à l'élément <tr>
la propriété affichage: inline-table (ou affichage: inline-bloc, mais il s'adapte mieux dans d'autres cas qui ne sont pas des tableaux). Devrait également être utilisées les "propriétés de la page-break-after: toujours; page-break-inside: éviter;" comme l'écrit @Phil Ross
<table>
<tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
<td></td>
<td></td>
...
</tr>
</table>
ça marchait pour moi quand j'ai utilisé du rembourrage comme:
<div style="padding-top :200px;page-break-inside:avoid;">
<div>My content</div>
</div>