2009-11-02 5 views
76

Ich mache einen HTML-Bericht, der druckbar sein wird und "Abschnitte" hat, die auf einer neuen Seite beginnen sollen.Kann ich beim HTML-Drucken einen Seitensprung erzwingen?

Gibt es eine Möglichkeit, etwas in das HTML/CSS zu stellen, das dem Browser signalisiert, dass es zu diesem Zeitpunkt auf eine neue Seite springen muss?

Ich brauche das nicht, um in jedem Browser da draußen zu arbeiten, ich denke, ich kann Leute sagen, um einen bestimmten Satz von Browsern zu verwenden, um dies zu drucken.

Dank
Daniel

Antwort

163

eine CSS-Klasse hinzufügen "Seitenumbruch" (oder "pb") genannt wird, etwa so:

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

Dann einen leeren DIV-Tag (or any block element that generates a box), wo Sie das wollen hinzufügen Seitenumbruch.

Es wird nicht auf der Seite angezeigt, aber beim Drucken wird die Seite aufgebrochen.

+2

Aber wie alle guten Dinge in CSS, das konsequent auf der ganzen Linie nicht immer funktioniert, so testen, davon The Living Daylights, damit ihr nicht böse Benutzer, warum Haufen zusätzliche leere Seiten Ihrer Website druckt fragen! – Zoe

+10

Laut MDN gilt 'page-break-after'" für Blockelemente, die eine Box generieren ", so dass ein leeres' 'Element nicht funktioniert. Es ist eine bessere Idee, es auf ein Stück Ihres Inhalts anzuwenden. Siehe https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after – nullability

+1

@nullability: Guter Fang. Ich hatte dies hauptsächlich bei meinem alten Job in einem WebBrowser-Steuerelement in WinForms verwendet, das den IE, den Goldstandard der folgenden Standards, verwendete. –

26

Versuchen Sie, diese link

<style> 
@media print 
{ 
h1 {page-break-before:always} 
} 
</style> 
+0

Ich denke, das ist eine bessere Antwort, da es nicht beinhaltet, den HTML-Code zu manipulieren, um einen visuellen Effekt zu erzielen. – FinnNk

+0

Ich mag den anderen lieber, da er mir mehr Kontrolle gibt. Ich kann die Klasse "pagebreak" immer nur den H1's zuweisen, die den Seitensprung verursachen sollen. Aber es ist immer noch eine gute Lösung. +1 für @media, obwohl der Bildschirm die Seitenumbrüche ignorieren sollte, denke ich. Vielen Dank! –

+0

Die 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, den Sie mögen.Sie können auch page-break-after verwenden: immer – jfarrell

3

Sie können die CSS-Eigenschaft page-break-before (oder page-break-after) verwenden. Setzen Sie einfach page-break-before: always auf diese Elemente auf Blockebene (z. B. Überschrift, div, p oder table Elemente), die in einer neuen Zeile beginnen sollen.

Zum Beispiel einen Zeilenumbruch vor jeder 2. Ebene Überschrift führen und vor jedem Element in der Klasse newpage (zum Beispiel <div class=newpage> ...), würden Sie

h2, .newpage { page-break-before: always } 
-1

@Chris Doggett macht Sinn verwenden. Obwohl, ich fand einen lustigen Trick auf lvsys.com, und es funktioniert tatsächlich auf Firefox und Chrome. Setzen Sie diesen Kommentar einfach überall hin, wo der Seitenumbruch eingefügt werden soll. Sie können den Tag <p> auch durch ein beliebiges Blockelement ersetzen.

<p><!-- pagebreak --></p> 
+2

Das funktioniert nicht –