Kann ich beim HTML-Druck einen Seitenumbruch erzwingen?

187

Ich erstelle einen HTML-Bericht, der druckbar sein wird und "Abschnitte" enthält, die auf einer neuen Seite beginnen sollen.

Gibt es eine Möglichkeit, etwas in das HTML / CSS einzufügen, das dem Browser signalisiert, dass er zu diesem Zeitpunkt einen Seitenumbruch erzwingen (eine neue Seite starten) muss?

Ich brauche das nicht, um in jedem Browser da draußen zu funktionieren. Ich denke, ich kann den Leuten sagen, dass sie einen bestimmten Satz von Browsern verwenden sollen, um dies zu drucken.

Daniel Magliola
quelle

Antworten:

334

Fügen Sie eine CSS-Klasse mit dem Namen "pagebreak" (oder "pb") hinzu:

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}

Fügen Sie dann ein leeres DIV-Tag ( oder ein beliebiges Blockelement, das ein Feld generiert ) hinzu, an dem der Seitenumbruch erfolgen soll.

<div class="pagebreak"> </div>

Es wird nicht auf der Seite angezeigt, sondern beim Drucken die Seite aufteilen.

PS Vielleicht gilt dies nur für die Verwendung -after(und auch für das, was Sie sonst noch mit anderen <div>s auf der Seite tun ), aber ich stellte fest, dass ich die CSS-Klasse wie folgt erweitern musste:

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}
Chris Doggett
quelle
7
Aber wie bei allen guten Dingen in CSS funktioniert dies nicht immer auf ganzer Linie. Testen Sie also das lebendige Tageslicht, damit sich keine wütenden Benutzer fragen, warum Ihre Website Stapel von extra leeren Seiten druckt!
Zoe
13
Laut MDN gilt page-break-after"für Blockelemente, die eine Box generieren", sodass die Verwendung eines leeren <span>Elements nicht funktioniert. Es ist eine bessere Idee, es auf einen Teil Ihres Inhalts anzuwenden. Siehe developer.mozilla.org/en-US/docs/Web/CSS/page-break-after
NULL - Zulässigkeit
1
@nullability: Guter Fang. Ich hatte dies hauptsächlich bei meinem alten Job in einem WebBrowser-Steuerelement in WinForms verwendet, das IE verwendete, den Goldstandard der folgenden Standards.
Chris Doggett
1
In Chrome hat dies bei mir nicht funktioniert ... Ich versuche, einen Seitenumbruch nach einem <tr> in einer <Tabelle> durchzuführen. Funktioniert dies in diesem Fall?
Delphirules
3
Aus irgendeinem Grund ist bei Verwendung dieses Tricks in Chrome 1 Pixelzeile der nächsten Seite in die vorherige übergegangen (erkennbar bei Verwendung der Hintergrundfarbe). Ich habe es mit.pagebreak { min-height: 1px; page-break-before: always; }
pzmarzly
44

Versuchen Sie, diese Verbindung

<style>
@media print
{
h1 {page-break-before:always}
}
</style>
jfarrell
quelle
Ich denke, dies ist eine bessere Antwort, da es nicht darum geht, den HTML-Code zu entstellen, um einen visuellen Effekt zu erzielen.
FinnNk
Ich mag den anderen eigentlich besser, da er mir mehr Kontrolle gibt. Ich kann die Klasse "Seitenumbruch" immer nur den H1 zuweisen, die die Seite zum Springen bringen sollen. Aber es ist immer noch eine gute Lösung. +1 für @media, obwohl der Bildschirm den Seitenumbruch vorher ignorieren sollte, denke ich. Vielen Dank!
Daniel Magliola
Das h1 ist ein Beispiel dafür, was Sie als Tag für die Druckunterbrechung verwenden können. Sie können den Namen dort ersetzen und markieren, wie Sie möchten. Sie können auch Seitenumbruch nach verwenden: immer
jfarrell
1
h1ist kein gutes Beispiel, da es eine Überschrift der ersten Ebene bedeutet und eine Seite normalerweise nur eine solche Überschrift haben sollte.
Jukka K. Korpela
6
Wenn Sie den ersten Header auf der ersten Seite überspringen möchten, versuchen Sieh1:not(:first-child) { page-break-before:always; }
Jeff Atwood
10

Ich wollte nur ein Update setzen. page-break-afterist jetzt ein Vermächtnis.

Offizielle Seite Staaten

Diese Eigenschaft wurde durch die Break-After- Eigenschaft ersetzt.

shazyriver
quelle
Es ist zu beachten, dass diese Eigenschaft nur von Microsoft IE- und Edge-Browsern unterstützt wird. caniuse.com/…
Benjamin
7

Sie können die CSS-Eigenschaft page-break-before(oder page-break-after) verwenden. Stellen Sie einfach page-break-before: alwaysauf diesen Block-Elemente (zB Position, div, p, oder tableElemente) , die auf einer neuen Zeile beginnen soll.

Um beispielsweise einen Zeilenumbruch vor einer Überschrift der 2. Ebene und vor einem Element in der Klasse newpage(z. B. <div class=newpage>...) zu verursachen, würden Sie verwenden

h2, .newpage { page-break-before: always }
Jukka K. Korpela
quelle
5

First page (scroll down to see the second page)
<div style="break-after:page"></div>
Second page
<br>
<br>
<button onclick="window.print();return false;" />Print (to see the result) </button>

Fügen Sie dies einfach dort hinzu, wo Sie die Seite benötigen, um zur nächsten zu gelangen (der Text "Seite 1" befindet sich auf Seite 1 und der Text "Seite 2" befindet sich auf der zweiten Seite).

Page 1
<div style='page-break-after:always'></div>
Page 2

Das funktioniert auch:

First page (there is a break after this)
<div style="break-after:page"></div>
Second page (This will be printed in the second page)
Giovanni G. PY
quelle
1

Angenommen, Sie haben einen Blog mit Artikeln wie diesen:

<div class="article"> ... </div>

Das Hinzufügen zum CSS hat für mich funktioniert:

@media print {
  .article { page-break-after: always; }
}

(getestet und funktioniert unter Chrome 69 und Firefox 62).

Referenz:

Basj
quelle
0
  • Wir können ein Seitenumbruch- Tag mit dem Stil " Seitenumbruch nach: immer " an der Stelle hinzufügen, an der wir den Seitenumbruch in die HTML-Seite einfügen möchten.
  • " Seitenumbruch vor " funktioniert auch

Beispiel:

HTML_BLOCK_1
<p style="page-break-after: always"></p>
HTML_BLOCK_2
<p style="page-break-after: always"></p>
HTML_BLOCK_3

Beim Drucken der HTML-Datei mit dem obigen Code werden in der Druckvorschau drei Seiten angezeigt (eine für jeden HTML-Block " HTML_BLOCK_n "), wobei wie im Browser alle drei Blöcke nacheinander angezeigt werden.

Chinmay
quelle
0

Ich brauchte nach jeder dritten Zeile einen Seitenumbruch, während wir den Druckbefehl im Browser verwenden.

Ich habe <div style = 'page-break-before: always;'> </ div> hinzugefügt

nach jeder 3. Reihe und meinem Eltern-Div haben Anzeige: flex; also habe ich display entfernt: flex; und es funktionierte wie ich will.

Dinesh Sharma
quelle
0

CSS

@media print {
  .pagebreak { 
     page-break-before: always; 
  }
}

HTML

<div class="pagebreak"></div>
Vlad Hnatovskyi
quelle
-7

@ Chris Doggett macht vollkommen Sinn. Obwohl ich auf lvsys.com einen lustigen Trick gefunden habe , der tatsächlich auf Firefox und Chrome funktioniert. Platzieren Sie diesen Kommentar einfach an einer beliebigen Stelle, an der der Seitenumbruch eingefügt werden soll. Sie können das <p>Tag auch durch ein beliebiges Blockelement ersetzen .

<p><!-- pagebreak --></p>
Oniya Daniel
quelle