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?

86
demandé sur Mike Valstar 2009-10-27 16:32:40

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.

113
répondu Phil Ross 2009-10-29 22:55:00

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!

30
répondu Peter 2013-05-13 13:33:56

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:

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

13
répondu fordareh 2011-07-20 01:47:37

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

10
répondu Nate Cook 2010-05-14 09:01:25

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.

9
répondu davidbehan 2012-03-12 16:17:02

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>
5
répondu Gudradain 2014-06-03 13:48:49

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;
    }
}
4
répondu Hamdy Ahmed 2018-05-13 13:35:39

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

3
répondu Stanislav Talanov 2016-06-06 12:51:13

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

https://bugs.webkit.org/show_bug.cgi?id=5097

1
répondu Alex KeySmith 2014-04-21 10:20:38

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)

1
répondu Astra Bear 2016-08-29 07:28:18

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.

0
répondu Intey 2014-05-15 14:34:22

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>
0
répondu Codekraft 2016-04-27 09:17:22

ç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>
0
répondu Tuvia Khusid 2017-11-08 01:23:32