Seitenumbruch beim Drucken in HTML

1. Setzen Sie die Eigenschaft page-break-after auf always Inside @media print auf Seitenumbruch in HTML
2. Setzen Sie die Eigenschaft page-break-before auf always Inside @media print auf Seitenumbruch in HTML
3. Setzen Sie die Eigenschaft break-after auf page für den Seitenumbruch in HTML

In diesem Artikel werden einige Methoden erläutert, um beim Drucken von HTML-Inhalten einen Seitenumbruch zu erzwingen.

Setzen Sie die Eigenschaft page-break-after auf always Inside @media print auf Seitenumbruch in HTML

Die @media print-Regel von CSS lässt uns die Regeln beim Drucken des HTML-Inhalts anwenden. Wir können die Stile mit dieser Regel ändern.

Wir können JavaScript verwenden, um ein onclick()-Ereignis zu erstellen, das die angegebenen HTML-Inhalte druckt. Die Methode window.print() druckt das aktuelle Fenster.

Wir können das Ereignis onclick() verwenden, um diese Methode aufzurufen.

In CSS können wir mit @media print die Eigenschaft page-break-after auf always setzen, damit ein HTML-Element ab diesem Punkt einen Seitenumbruch durchführt.

Erstellen Sie beispielsweise zwei Überschriften mit dem Tag h1. Nennen Sie die erste Überschrift Vor Seitenumbruch und die andere Nach Seitenumbruch.

Geben Sie der ersten Überschrift den Klassennamen break-page. Erstellen Sie dann einen Button, Print und fügen Sie einen onclick-Listener für den Button hinzu und rufen Sie die window.print()-Methode auf.

Wählen Sie die Klasse break-page innerhalb der Regel @media print im CSS-Abschnitt. Als nächstes setzen Sie die Eigenschaft page-break-after auf always.

Das folgende Beispiel zeigt, dass nach dem Klicken auf die Schaltfläche Drucken die Überschrift Vor Seitenumbruch auf der ersten Seite erscheint, während die zweite Überschrift und die Schaltfläche beim Drucken auf der zweiten Seite erscheinen. Wir können die Eigenschaft page-break-after verwenden, um beim Drucken von HTML einen Seitenumbruch durchzuführen.

Beispielcode:

<h1 class="break-page">Before page break </h1>
<h1>After page break</h1>
<button onclick="window.print()">Print</button>

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

Demo

Setzen Sie die Eigenschaft page-break-before auf always Inside @media print auf Seitenumbruch in HTML

Diese Methode ist der vorherigen ziemlich ähnlich. Der Unterschied besteht darin, dass wir die Eigenschaft page-break-before verwenden.

Ähnlich wird es in der Regel @media print verwendet. Diese Methode bewirkt, dass die Seite vor dem HTML-Inhalt umbricht, wobei wir die Eigenschaft page-break-before verwendet haben.

Erstellen Sie beispielsweise zwei Überschriften wie bei der ersten Methode. Geben Sie diesmal der zweiten Überschrift den Klassennamen break-page.

Erstellen Sie als Nächstes eine Schaltfläche mit einem onclick-Listener, der die window.print()-Methode aufruft. Wählen Sie im CSS-Abschnitt innerhalb von @media print die Klasse break-page und setzen Sie deren Eigenschaft page-break-before auf always.

Der Seitenumbruch erscheint vor der zweiten Überschrift Nach Seitenumbruch, wenn Sie auf die Schaltfläche Drucken klicken.

Beispielcode:

<h1>Before page break </h1>
<h1 class="break-page">After page break</h1>
<button onclick="window.print()">Print</button>

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

Setzen Sie die Eigenschaft break-after auf page für den Seitenumbruch in HTML

Wir können die Eigenschaft break-after eines Elements auf page setzen, um die Seite in HTML umzubrechen. Es wird die Seite nach dem Element umbrechen, in dem die Eigenschaft verwendet wird.

Dann können wir die HTML-Seiten mit window.print() wie in den obigen Methoden drucken. Diese Methode unterscheidet sich von den oben genannten Methoden, da sie nicht die Regel @media print verwendet.

Erstellen Sie beispielsweise wie gewohnt zwei Überschriften. Erstellen Sie zwischen den Überschriften ein leeres div und geben Sie ihm den Klassennamen break-page.

Als nächstes erstellen Sie einen anklickbaren Button mit dem Listener onclick, der die Methode window.print() aufruft.

Wählen Sie die Klasse break-page und setzen Sie deren Eigenschaft break-after im CSS auf page.

Die Seite bricht beim Drucken nach der ersten Überschrift um. Auf diese Weise können wir die Eigenschaft break-after verwenden, um die Seite in HTML zu unterbrechen.

Beispielcode:

<h1>
Before page break
</h1>
<div class="break-page"></div>
<h1>
After page break
</h1>
<button onclick="window.print();" />Print</button>

.break-page {
    break-after: page;
}