Sauts de page d'impression Google Chrome

110

J'essaye de demander à Google Chrome de faire des sauts de page.

On m'a dit via un tas de sites Web page-break-after: always;valides dans Chrome, mais je n'arrive pas à le faire fonctionner même avec un exemple très simple. existe-t-il un moyen de forcer un saut de page lors de l'impression dans Chrome?

css printing google-chrome Mike Valstar
la source
Il semble que cela ait été discuté relativement récemment (février 2014) (sur un ancien ticket de bogue de 2005) sur le bugs.webkit.org/show_bug.cgi?id=5097
Alex KeySmith

Réponses:

134

J'ai utilisé avec succès l'approche suivante 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.

Phil Ross
la source
4
Ah je vois mon problème je pense. J'essayais de l'utiliser avec une balise <br/>
Mike Valstar
@Mike Merci d'avoir répondu au problème pour moi. Je ne sais pas pourquoi un br ne fonctionne pas et un div, mais néanmoins un changement facile.
Jeff Davis
cela fonctionne lorsque vous essayez d'utiliser avec la page parent, mais ne fonctionne pas lorsque vous imprimez à partir d'iframe (dans Chrome, bien sûr).
VJ
Lisez également la réponse de @ peter ci-dessous; il avait également un bon point sur position: relative.
doub1ejack
6
Selon les spécifications break-afteret break-befores'applique uniquement à block-level elements, table row groups, table rows (but see prose): drafts.csswg.org/css-break-3/#break-between - cela signifie pas de flotteurs ou de trucs de positionnement sophistiqués.
Mikko Rantalainen
34

En fait, un détail manque dans la réponse qui est choisie comme acceptée (de Phil Ross) ...

il DOES travail dans Chrome, et la solution est vraiment stupide !!

Le parent et l'élément sur lequel vous souhaitez contrôler le saut 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

Cependant, contrôler le saut de page dans Safari ne fonctionne pas (au moins dans la version 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 cela maintenant ...

J'espère que cela t'aides!

Peter
la source
Cela dépend de la version de WebKit utilisée si cela fonctionne ou non dans Chrome. Vous avez vous-même dit que cela ne fonctionnait pas dans Safari 5.1.7, donc je ne pense pas que ce soit ridicule du tout. La version de WK dans ce qu'ils ont testé peut être différente de ce que vous avez testé.
Joel Peltonen
Cette page ne fonctionne pas dans Chrome 26.0.1410.65, j'obtiens 3 pages et la dernière n'a qu'un seul mot). J'ai également essayé de m'assurer que l'élément auquel je veux appliquer la règle et son parent ont la position: relative sur ma propre page, mais cela n'ajoutera toujours pas le saut de page lors de l'impression. Alors, est-ce une fonctionnalité qui va et vient dans Chrome?
Joe Dyndale
Vous avez raison ... cela ne semble pas fonctionner dans les versions récentes de chrome; cependant, vous pouvez le remplacer par: -webkit-region-break-inside: avoid; (voir celui-ci: jsfiddle.net/QCvA5/22/show )
Peter
@Peter Des mises à jour ici? J'ai posté une question SO avec bounty en essayant de résoudre une situation que j'utilise page-break-inside. De l'aide?
Zach Saucier
1
Cela a fonctionné pour moi avec une bizarrerie - cela ne fonctionne que si je mets le style en ligne, et non dans le fichier css séparé. Je l'utilise sur un élément h7. La version Chrome est 38.0.2125.111 m. <h7 class="page-breaker" style="display: block;position: relative;page-break-before:always">Grade <?php echo $grade;?></h7>
Gavin Simpson
16

Je voulais juste noter ici que Chrome ignore également les paramètres de page-break- * css dans les div qui ont été flottants.

Je soupçonne qu'il y a une bonne justification à cela quelque part dans la spécification css, mais j'ai pensé que cela pourrait aider quelqu'un un jour ;-)

Juste une autre note: 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:

http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/

fordareh
la source
2
Probablement parce que le fait de faire flotter un élément le sort du flot de documents de la même manière que son positionnement absolu. Les éléments avec position: absolue ne fonctionneront pas avec page-break- *.
Joe Dyndale
1
Aussi: il ne doit pas y avoir d'éléments flottants ou positionnés absolus parmi tous les parents de l'élément avec le style de saut de page. J'avais le parent bootstrap "col-xs-12", quand j'ai mis explicitement "float: none" dessus, le saut de page a commencé à fonctionner!
Stalinko
12

J'ai eu un problème similaire à celui-ci, mais j'ai finalement trouvé la solution. J'avais overflow-x: caché; appliqué à la balise <html> donc peu importe ce que j'ai fait ci-dessous dans le DOM, il n'autoriserait jamais les sauts de page. En revenant à overflow-x: visible; cela a bien fonctionné.

Espérons que cela aide quelqu'un là-bas.

Davidbehan
la source
Notez que tout élément parent avec certaines propriétés de dépassement de capacité peut provoquer ce problème. Je viens d'ajouter la règle * { overflow-x: visible }.
Garrett
10

J'ai moi-même ce problème - mes sauts de page fonctionnent dans tous les navigateurs sauf Chrome - et j'ai pu l'isoler jusqu'à ce que l'élément de saut de page après 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 après dans les cellules du tableau, 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 (douteusement) autorisée compte tenu de la spécification CSS - vous pouvez en savoir plus ici: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=fr

Nate Cook
la source
C'était mon problème - obligé d'utiliser des cellules de tableau pour la mise en page par SharePoint 2007, donc Chrome obéissait à toutes les déclarations de mise en page de feuille de style d'impression :(
Dexter
8

Attention aux CSS: display:inline-blocklors 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>
Gudradain
la source
1
Et "flotter" aussi. Il ne devrait pas y avoir de propriétés "float" dans les éléments parents.
Jimba Tamang
2
Idem avecdisplay: flex
Michael Schmid
4

J'ai déjà rencontré ce problème sur Chrome et la cause en est qu'il y avait un div a min-height réglé sur une valeur. La solution consistait à réinitialiser la hauteur minimale lors de l'impression comme suit:

@media print {
    .wizard-content{
        min-height: 0;
    }
}
Hamdy Ahmed
la source
3

Mise à jour 2016:

Eh bien, j'ai eu ce problème, quand j'avais 

overflow:hidden

sur mon div.

Après avoir fait

@media print {
   div {
      overflow:initial !important
   }
}

tout est devenu très bien et parfait

x0 z1
la source
1
Cela a résolu le problème alors que rien d'autre ne l'a fait. Merci!
bstory
1

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étruit les sauts de page. Retirez-les de votre page pour l'impression. Cela a fonctionné pour moi. (Sur la version Chrome = 49.0.2623.87)

Ours astra
la source
0

J'ai ce problème. Tant de temps passe ... Sans les champs latéraux de la page, c'est normal, mais lorsque les champs apparaissent, la page et "l'espace de saut de page" seront mis à l'échelle. Donc, avec un champ normal, dans un document, il était affiché incorrect. Je le répare avec l'ensemble

    width:100%

et utilise 

div.page
  {
    page-break-before: always;
    page-break-inside: avoid;
  }

Utilisez-le en première ligne.

Intey
la source
0

Pour autant que je sache, le seul moyen d'obtenir les sauts de page corrects dans les tableaux avec Google Chrome est de lui donner à l'élément <tr>la propriété display: inline-table (ou display: inline-block mais cela convient mieux dans d'autres cas qui ne sont pas des tableaux ). Il faut également 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>
Codekraft
la source
1
Avez-vous des conseils pour que cela ne casse pas la marge / le remplissage à l'intérieur du tds?
joeforker
@joeforker vous devriez utiliser le <tr> avec "padding: 0; margin: 0;" et donnez les propriétés de marge aux éléments contenus dans.
Codekraft
-2

Cela fonctionnait pour moi quand j'utilisais un rembourrage comme:

<div style="padding-top :200px;page-break-inside:avoid;">
   <div>My content</div>
</div>
Tuvia Khusid
la source
Cela n'a fonctionné qu'à cause du rembourrage et non à cause du saut de page
Car