Sauts de page d'impression Google Chrome
J'essaie d'obtenir Google Chrome pour faire des sauts de page.
On m'a dit via un tas de sites Web que page-break-after: always; est valide en chrome mais je n'arrive pas à le faire fonctionner même avec un exemple très simple. y a-t-il un moyen de forcer un saut de page lors de l'impression en chrome?
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 à la réponse sélectionnée comme acceptée (de Phil Ross) ....
cela NE FONCTIONNE PAS dans Chrome, et la solution est vraiment stupide !!
Le parent et l'élément sur lequel vous voulez contrôler la rupture de page doivent être déclarés comme:
position: relative
découvrez ce violon: http://jsfiddle.net/petersphilo/QCvA5/5/show/
Ceci est vrai pour:
page-break-before
page-break-after
page-break-inside
Toutefois, le contrôle du saut de page à l'intérieur de Safari ne fonctionne pas (au moins en 5.1.7).
j'espère que ça 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; tour. 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 ...
J'espère que cela t'aides!
Je voulais simplement noter ici que Chrome ignore également les paramètres page-break- * css dans les div qui ont été flottants.
Je pense qu’il ya une bonne justification à cela quelque part dans les spécifications CSS, mais j’ai pensé que cela pourrait aider un jour ;-)
Autre remarque: IE7 ne peut pas reconnaître les paramètres de saut de page sans une hauteur explicite sur l'élément de bloc précédent:
Je rencontre moi-même ce problème (mes sauts de page fonctionnent dans tous les navigateurs sauf Chrome) et j'ai réussi à l'isoler jusqu'à l'élément après coupure de page situé dans une cellule de tableau. (Anciens modèles hérités du CMS.)
Apparemment, Chrome ne respecte pas les propriétés de saut de page ou de saut de page à l'intérieur des cellules de tableau. Cette version modifiée de l'exemple de Phil place ainsi les deuxième et troisième titres 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>
L'implémentation de Chrome est (douteusement) 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=fr
J'ai eu un problème similaire à celui-ci mais j'ai finalement trouvé la solution. J'avais overflow-x: hidden; appliqué à la balise <html> afin que peu importe ce que j'ai fait ci-dessous dans le DOM, il ne permettra jamais les sauts de page. En revenant sur overflow-x: visible; ça a bien fonctionné.
Espérons que cela aide quelqu'un là-bas.
Attention au CSS: display:inline-block lors de l'impression.
Aucune propriété de CCS pour aller à la page suivante ne fonctionnerait pour moi dans Chrome et Firefox si ma table était dans une 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 les travaux suivants:
<div>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>
J'ai déjà rencontré ce problème sous chrome auparavant et la cause en est qu'il y avait une div dont min-height était définie sur une valeur . La solution consistait à réinitialiser min-height en imprimant comme suit:
@media print {
.wizard-content{
min-height: 0;
}
}
Mise à jour 2016:
Eh bien, j'ai eu ce problème, quand j'ai eu
overflow:hidden
sur mon div.
Après j'ai fait
@media print {
div {
overflow:initial !important
}
}
tout est devenu parfait et parfait
Si vous utilisez Chrome avec Bootstrap Css, les classes qui contrôlent la disposition de la grille, par exemple col-xs-12, etc. utilisent "float: left" qui, comme d'autres l'ont souligné, détruisent les sauts de page. Supprimez-les de votre page pour les imprimer. Cela a fonctionné pour moi. (Sur la version de Chrome = 49.0.2623.87)
Cela fonctionnait pour moi quand j'ai utilisé un rembourrage comme:
<div style="padding-top :200px;page-break-inside:avoid;">
<div>My content</div>
</div>
Autant que je sache, le seul moyen d'obtenir les sauts de page corrects dans les tableaux avec Google Chrome est de lui attribuer l'élément <tr> la propriété display: inline-table (ou display: inline-block mais cela convient mieux à d'autres les cas qui ne sont pas des tables). Il convient également d'utiliser les propriétés "page-break-after: always; page-break-inside: Avoid;" comme écrit par @Phil Ross
<table>
<tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
<td></td>
<td></td>
...
</tr>
</table>
Avoir ce problème. Le temps passe si longtemps ...... Sans les champs latéraux de la page, la pause est normale, mais lorsque les champs apparaissent, la page et "l'espace de saut de page" seront redimensionnés. Donc, avec un champ normal, dans un document, il s’avérait incorrect. Je le fixe avec set
width:100%
et utilise
div.page
{
page-break-before: always;
page-break-inside: avoid;
}
Utilisez-le en première ligne.