Sauts de page d'impression Google Chrome
https://stackoverflow.com/questions/1630819
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'essaie d'utiliser Google Chrome pour effectuer des sauts de page.
On m'a dit via un ensemble 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?
La solution
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.
Autres conseils
En fait, il manque un détail à la réponse sélectionnée comme acceptée (de Phil Ross) ....
Cela NE FONCTIONNE que 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 suit:
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 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; 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 ça aide!
Je voulais simplement noter ici que Chrome ignore également les paramètres page-break- * css des div qui ont été flottants.
Je pense qu’il existe une justification valable à cela quelque part dans les spécifications CSS, mais j’ai pensé que cela pourrait aider un jour; -)
Juste une autre remarque: IE7 ne peut pas accuser réception des paramètres de saut de page sans une hauteur explicite sur l'élément de bloc précédent:
J'avais un problème similaire à celui-ci mais j'ai finalement trouvé la solution. overflow-x: hidden; a été appliqué au & Lt; html & Gt; balise donc peu importe ce que j'ai fait ci-dessous dans le DOM, il ne permettrait jamais de sauts de page. En revenant sur overflow-x: visible; , cela a bien fonctionné.
J'espère que cela aidera quelqu'un.
Je rencontre moi-même ce problème (mes sauts de page fonctionnent dans tous les navigateurs sauf Chrome) et je l'ai isolé de manière à ce que l'élément coupure de page se trouve 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 avant 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 autorisée (avec des doutes) en raison de la spécification CSS. Vous pouvez en voir plus ici: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789 & amp; hl = fr
Faites attention aux CSS: display:inline-block lors de l'impression.
Aucune propriété de CCS à accéder à la page suivante ne fonctionnerait pour moi dans Chrome et Firefox si ma table était dans une div avec le style <=>
Par exemple, les éléments suivants ne fonctionnent 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’avais 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'avais
overflow:hidden
sur ma div.
Après avoir 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. utilisez & "float: left &"; qui, comme d'autres l'ont souligné, détruit les sauts de page. Supprimez-les de votre page pour l'impression. Cela a fonctionné pour moi. (Sur la version de Chrome = 49.0.2623.87)
Vous avez ce problème. Tant de temps passe ... Sans les champs latéraux de la page, la pause est normale, mais lorsque des champs apparaissent, page et & "; Espace de coupure de page &"; sera mise à l'échelle. Donc, avec un champ normal, dans un document, cela s’avérait incorrect. Je le répare avec set
width:100%
et utiliser
div.page
{
page-break-before: always;
page-break-inside: avoid;
}
Utilisez-le sur la première ligne.
Autant que je sache, le seul moyen d'obtenir les sauts de page corrects dans les tableaux avec Google Chrome consiste à lui attribuer l'élément <tr> la propriété display: inline-table (ou display: inline -block mais cela convient mieux dans les autres cas qui ne sont pas des tables). Il faut également utiliser les propriétés & Quot; page-break-after: always; page-break-inside: evitez; " 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>
Cela fonctionnait pour moi lorsque j'ai utilisé un rembourrage du type:
<div style="padding-top :200px;page-break-inside:avoid;">
<div>My content</div>
</div>
