it-swarm.com.de

Google Chrome-Druckseite bricht ab

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

Ich habe über eine Reihe von Websites erfahren, dass page-break-after: always; in Chrom gültig ist, aber ich kann nicht scheinen, dass es auch mit einem sehr einfachen Beispiel funktioniert. Gibt es eine Möglichkeit, einen Seitenumbruch beim Drucken in Chrom zu erzwingen?

90
Mike Valstar

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

<!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 eigentlichen Code enthält jede Seitendatei viele weitere Elemente.

119
Phil Ross

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

it FUNKTIONIERT in Chrome, und die Lösung ist wirklich dumm !!

Sowohl das übergeordnete Element als auch das Element, auf das Sie den Seitenumbruch steuern möchten, müssen folgendermaßen 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: In der folgenden Frage wurde darauf hingewiesen, dass neuere Versionen von Chrome dies nicht mehr berücksichtigen, auch wenn die Position: relative; Trick . Allerdings scheinen sie zu respektieren:

-webkit-region-break-inside: avoid;

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

ich denke, wir müssen das jetzt hinzufügen ...

Hoffe das hilft!

33
Peter

Ich wollte hier nur anmerken, dass Chrome auch die Seitenumbrüche- * css-Einstellungen in divs ignoriert, die verschoben wurden.

Ich vermute, dass es irgendwo in der CSS-Spezifikation eine solide Begründung dafür gibt, aber ich dachte, es könnte jemandem irgendwann helfen ;-)

Noch ein Hinweis: Der IE7 kann Seitenumbrüche ohne explizite Höhe des vorherigen Blockelements nicht bestätigen:

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

15
fordareh

Ich habe dieses Problem selbst - meine Seitenumbrüche funktionieren in allen Browsern außer Chrome - und konnten es bis auf das Seitenumbruchelement innerhalb einer Tabellenzelle isolieren. (Alte, vererbte Vorlagen im CMS.)

Offensichtlich erkennt Chrome die Eigenschaften der Seitenumbrüche oder Seitenumbrüche in Tabellenzellen nicht an, sodass diese modifizierte Version von Phils Beispiel die zweite und die dritte Überschrift auf derselben Seite platziert:

<!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 angesichts der CSS-Spezifikation (zweifelhaft) zulässig. Weitere Informationen finden Sie hier: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=de

10
Nate Cook

Ich hatte ein ähnliches Problem, fand aber schließlich die Lösung. Ich hatte overflow-x: ausgeblendet; auf das <html> -Tag angewendet. Unabhängig davon, was ich unten im DOM gemacht habe, würde es niemals Seitenumbrüche zulassen. Durch Umschalten auf overflow-x: sichtbar; es hat gut funktioniert.

Hoffentlich hilft das jemandem da draußen.

10
davidbehan

Vorsicht vor CSS: display:inline-block beim Drucken.

Keine der CCS-Eigenschaften, die zur nächsten Seite gehen, würde für mich in Chrome und Firefox funktionieren, wenn sich meine Tabelle in einem div mit dem Stil display:inline-block befand.

Folgendes funktioniert beispielsweise 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>
6
Gudradain

Ich war schon früher mit diesem Problem auf Chrome konfrontiert, und die Ursache dafür war, dass ein div-Wert für min-height auf einen Wert eingestellt war .. Die Lösung bestand darin, min-height während des Druckens wie folgt zurückzusetzen:

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

2016 Update:

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

3

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

1
Astra Bear

Es funktionierte für mich, als ich Polsterung verwendete:

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

Soweit ich weiß, besteht der einzige Weg, um die korrekten Seitenumbrüche in Tabellen mit Google Chrome zu erhalten, darin, das Element <tr> der Eigenschaft display: inline-table (oder display: inline-block) anzugeben Fälle, die keine Tabellen sind. Außerdem sollten die Eigenschaften "Seitenumbruch nach: Immer; Seitenumbruch 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>
0
Codekraft

Habe das Problem. So lange Zeit vergeht ....... Ohne Seitenfelder der Seite ist der Bruch normal, aber wenn Felder angezeigt werden, skalieren die Seiten- und Seitenumbrüche. Bei einem normalen Feld innerhalb eines Dokuments wurde es daher falsch angezeigt. Ich fixiere es mit set 

    width:100%

und verwenden 

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

Verwenden Sie es in der ersten Zeile.

0
Intey