Seitenumbrüche beim Drucken von Google Chrome

110

Ich versuche, Google Chrome dazu zu bringen, Seitenumbrüche durchzuführen.

Mir wurde über eine Reihe von Websites mitgeteilt, dass diese page-break-after: always;in Chrome gültig sind, aber ich kann nicht scheinen, sie selbst mit einem sehr einfachen Beispiel zum Laufen zu bringen. Gibt es eine Möglichkeit, einen Seitenumbruch beim Drucken in Chrom zu erzwingen?

css printing google-chrome Mike Valstar
quelle

Es scheint, dass dies vor relativ kurzer Zeit (Februar 2014) (auf einem alten Bug-Ticket für 2005) im Webkit-Bug-Tracker bugs.webkit.org/show_bug.cgi?id=5097

Alex KeySmith am

134

Ich habe den folgenden Ansatz in allen gängigen Browsern einschließlich Chrome erfolgreich angewendet:

<!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>

Dies ist ein vereinfachtes Beispiel. Im realen Code enthält jede Seite div viel mehr Elemente.

Phil Ross
quelle

4

Ah, ich sehe mein Problem, denke ich. Ich habe versucht, es mit einem <br/> -Tag zu verwenden

Mike Valstar

@ Mike Danke, dass du das Problem für mich beantwortet hast. Ich bin mir nicht sicher, warum ein br nicht funktioniert und ein div, aber dennoch eine einfache Änderung.

Jeff Davis

Dies funktioniert, wenn Sie versuchen, es mit der übergeordneten Seite zu verwenden, funktioniert jedoch nicht, wenn Sie aus dem Iframe drucken (natürlich in Chrome).

VJ

Lesen Sie auch die Antwort von @ peter unten; Er hatte auch einen guten Punkt position: relative.

Doub1ejack

6

Entsprechend der Spezifikation break-afterund break-beforenur anwendbar auf block-level elements, table row groups, table rows (but see prose): Drafts.csswg.org/css-break-3/#break-between - das bedeutet, dass es keine Floats oder ausgefallenen Positionierungstricks gibt.

Mikko Rantalainen

34

Tatsächlich fehlt ein Detail in der Antwort, die als akzeptiert ausgewählt wurde (von Phil Ross) ....

es TUT Arbeit in Chrome, und die Lösung ist wirklich dumm !!

Sowohl das übergeordnete Element als auch das Element, für das Sie den Seitenumbruch steuern möchten, müssen wie folgt deklariert werden:

position: relative

Schauen Sie sich diese Geige an: http://jsfiddle.net/petersphilo/QCvA5/5/show/

Dies gilt für:

page-break-before
page-break-after
page-break-inside

Die Steuerung des Seitenumbruchs in Safari funktioniert jedoch nicht (zumindest in 5.1.7).

ich hoffe das hilft!!!

PS: Die folgende Frage hat die Tatsache aufgeworfen, dass neuere Versionen von Chrome dies nicht mehr respektieren, selbst mit der Position: relativ; Trick. Sie scheinen jedoch zu respektieren:

-webkit-region-break-inside: avoid;

siehe diese Geige: http://jsfiddle.net/petersphilo/QCvA5/23/show

Also müssen wir das jetzt wohl hinzufügen ...

Hoffe das hilft!

Peter
quelle

Es hängt von der verwendeten WebKit-Version ab, ob es in Chrome funktioniert oder nicht. Sie selbst sagten, dass es in Safari 5.1.7 nicht funktioniert, also finde ich es überhaupt nicht albern. Die Version von WK in dem, was sie getestet haben, unterscheidet sich möglicherweise von dem, was Sie getestet haben.

Joel Peltonen

Diese Seite funktioniert nicht in Chrome 26.0.1410.65, ich erhalte 3 Seiten und die letzte enthält nur ein Wort. Ich habe auch versucht sicherzustellen, dass sowohl das Element, auf das ich die Regel anwenden möchte, als auch das übergeordnete Element die Position: relativ auf meiner eigenen Seite haben, aber beim Drucken wird der Seitenumbruch trotzdem nicht hinzugefügt. Ist dies also eine Funktion, die in Chrome kommt und geht?

Joe Dyndale

Sie haben Recht ... es scheint in neueren Versionen von Chrome nicht zu funktionieren. Sie können es jedoch ersetzen durch: -webkit-region-break-inside: vermeiden; (siehe dieses: jsfiddle.net/QCvA5/22/show )

Peter

@ Peter Irgendwelche Updates hier? Ich habe eine SO-Frage mit Kopfgeld gepostet , um eine Situation zu beheben, die ich verwendet habe page-break-inside. Irgendeine Hilfe?

Zach Saucier

1

Dies funktionierte bei mir mit einer Kuriosität - es funktioniert nur, wenn ich den Stil inline setze und nicht in der separaten CSS-Datei. Ich benutze es auf einem h7-Element. Die Chrome-Version ist 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

Ich wollte hier nur erwähnen, dass Chrome auch Seitenumbruch- * CSS-Einstellungen in schwebenden Divs ignoriert.

Ich vermute, dass es irgendwo in der CSS-Spezifikation eine vernünftige Rechtfertigung dafür gibt, aber ich dachte mir, dass es eines Tages jemandem helfen könnte ;-)

Nur ein weiterer Hinweis: IE7 kann keine Einstellungen für Seitenumbrüche ohne explizite Höhe des vorherigen Blockelements bestätigen:

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

fordareh
quelle

2

Wahrscheinlich, weil das Schweben eines Elements es auf dieselbe Weise aus dem Dokumentenfluss entfernt, wie es absolut positioniert ist. Elemente mit Position: Absolut funktioniert nicht mit Seitenumbruch- *.

Joe Dyndale

1

Außerdem: Es sollten keine schwebenden oder absolut positionierten Elemente unter allen übergeordneten Elementen des Elements mit Seitenumbruchstil vorhanden sein. Ich hatte Bootstrap "col-xs-12" Eltern, als ich explizit "float: none" darauf setzte, begann der Seitenumbruch zu funktionieren!

Stalinko

12

Ich hatte ein ähnliches Problem, fand aber schließlich die Lösung. Ich hatte Überlauf-x: versteckt; Wird auf das <html> -Tag angewendet. Unabhängig davon, was ich unten im DOM getan habe, werden niemals Seitenumbrüche zugelassen. Durch Zurücksetzen auf Überlauf-x: sichtbar; es hat gut funktioniert.

Hoffentlich hilft das jemandem da draußen.

Davidbehan
quelle

Beachten Sie, dass jedes übergeordnete Element mit bestimmten Überlaufeigenschaften diese Probleme verursachen kann. Ich habe gerade die Regel hinzugefügt * { overflow-x: visible }.

Garrett

10

Ich habe dieses Problem selbst - meine Seitenumbrüche funktionieren in jedem Browser außer Chrome - und konnte es auf das Seitenumbruchelement in einer Tabellenzelle beschränken. (Alte, geerbte Vorlagen im CMS.)

Anscheinend berücksichtigt Chrome die Eigenschaften "Seitenumbruch vor" oder "Seitenumbruch nach" in Tabellenzellen nicht. In dieser modifizierten Version von Phils Beispiel werden die zweite und dritte Überschrift auf dieselbe Seite gesetzt:

<!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>

Die Implementierung von Chrome ist (zweifelhaft) aufgrund der CSS-Spezifikation zulässig. Weitere Informationen finden Sie hier: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=de

Nate Cook
quelle

Dies war mein Problem - gezwungen, Tabellenzellen für das Layout von SharePoint 2007 zu verwenden, sodass Chrome alle Deklarationen für das Layout von Druckstilblättern befolgte :(

Dexter

8

Vorsicht vor CSS: display:inline-blockbeim Drucken.

Keine der CCS-Eigenschaften, um zur nächsten Seite zu gelangen, würde in Chrome und Firefox für mich funktionieren, wenn sich meine Tabelle in einem Div mit dem Stil befindet display:inline-block

Zum Beispiel funktioniert Folgendes nicht:

<div style='display:inline-block'>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>

Aber die folgende Arbeit:

<div>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>

Gudradain
quelle

1

Und auch "schweben". In übergeordneten Elementen sollten keine "float" -Eigenschaften vorhanden sein.

Jimba Tamang

2

Gleiches gilt fürdisplay: flex

Michael Schmid

4

Ich habe dieses Problem schon einmal auf Chrom gesehen und die Ursache dafür ist, dass ein Div die minimale Höhe auf einen Wert gesetzt hat. Die Lösung bestand darin, die Mindesthöhe während des Druckens wie folgt zurückzusetzen:

@media print {
    .wizard-content{
        min-height: 0;
    }
}

Hamdy Ahmed
quelle

3

Update 2016:

Nun, ich hatte dieses Problem, als ich es hatte

overflow:hidden

auf meinem div.

Nachdem ich gemacht habe

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

alles wurde gut und perfekt

x0 z1
quelle

1

Dies löste das Problem, als nichts anderes tat. Vielen Dank!

Geschichte

1

Wenn Sie Chrome mit Bootstrap Css verwenden, verwenden die Klassen, die das Rasterlayout steuern, z. B. col-xs-12 usw., "float: left", was, wie andere bereits betont haben, die Seitenumbrüche zerstört. Entfernen Sie diese zum Drucken von Ihrer Seite. Es hat bei mir funktioniert. (In Chrome Version = 49.0.2623.87)

Astra Bär
quelle

0

Habe dieses Problem. So lange Zeit vergeht ... Ohne Seitenfelder der Seite ist es normal, aber wenn Felder angezeigt werden, werden Seite und "Seitenumbruch" skaliert. Bei einem normalen Feld in einem Dokument wurde es also falsch angezeigt. Ich repariere es mit Set

    width:100%

und verwenden

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

Verwenden Sie es in der ersten Zeile.

Intey
quelle

0

Soweit ich weiß, besteht die einzige Möglichkeit, mit Google Chrome die richtigen Seitenumbrüche in Tabellen zu erzielen, darin, dem Element <tr>die Eigenschaft display: inline-table (oder display: inline-block) zuzuweisen. In anderen Fällen, die keine Tabellen sind, passt es jedoch besser ). Außerdem sollten die Eigenschaften "Seitenumbruch nach: immer; Seitenumbruch nach innen: vermeiden;" verwendet werden. wie von @Phil Ross geschrieben

<table>
  <tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
    <td></td>
    <td></td>
    ...
  </tr>
</table>

Codekraft
quelle

1

Gibt es Hinweise, wie Sie den Rand / die Polsterung innerhalb des tds nicht beschädigen können?

Joeforker

@joeforker Sie sollten das <tr> mit "padding: 0; margin: 0;" verwenden. und geben Sie den darin enthaltenen Elementen die Randeigenschaften.

Codekraft

-2

Es hat bei mir funktioniert, als ich Polster verwendet habe wie:

<div style="padding-top :200px;page-break-inside:avoid;">
   <div>My content</div>
</div>

Tuvia Khusid
quelle

Dies funktionierte nur wegen des Auffüllens und nicht wegen des Seitenumbruchs

Char

Seitenumbrüche beim Drucken von Google Chrome

Antworten: