Seitenumbruch beim Drucken in HTML

Um beim Drucken an einer bestimmten Stelle eine neue Seite zu beginnen, weisen Sie dem Element vor oder nach dieser Stelle eine CSS-Seitenumbruchregel zu und öffnen Sie anschließend die Druckvorschau des Browsers. Verwenden Sie page-break-after: always für einen Umbruch nach einem Element, page-break-before: always für einen Umbruch davor oder alternativ break-after: page. Die Paginierung kann je nach Browser, Papierformat und Druckeinstellungen variieren. Prüfen Sie daher die tatsächliche Vorschau.

Eine Schaltfläche „Print“ kann window.print() aufrufen und so den Druckdialog des Browsers öffnen. Die Beispiele unten zeigen den Quelltext einer Browserseite zur Anpassung. Prüfen Sie das Ergebnis mit Ihrer eigenen Seite und Ihren Druckeinstellungen in der Druckvorschau.

Das folgende JavaScript gibt eine CSS-Regel aus, die Sie in ein Stylesheet übernehmen können. Es verwendet denselben Selektor und dieselbe Deklaration wie das erste Seitenbeispiel.

const rule = "@media print {\n  .break-page {\n    page-break-after: always;\n  }\n}";
console.log(rule);

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

Verwenden Sie page-break-after: always für einen Seitenumbruch beim Drucken

Mit @media print wird der Seitenumbruchstil nur beim Drucken des Dokuments angewendet. Weisen Sie dem Inhalt, nach dem die Seite enden soll, die Klasse break-page zu. Die Deklaration page-break-after: always setzt den Umbruch nach diesem Element, sodass die folgende Überschrift auf einer neuen Druckseite beginnt.

Diese vollständige Seite enthält zwei Überschriften und eine Druckschaltfläche. Speichern Sie sie als HTML-Datei oder fügen Sie sie in einen Browser-Editor ein und öffnen Sie anschließend die Druckvorschau. Die erste Überschrift trägt die Klasse. Deshalb liegt der Umbruch nach ihr und vor der zweiten Überschrift. Passen Sie den Inhalt an und prüfen Sie die Vorschau, denn Papierformat und Druckeinstellungen beeinflussen die Paginierung.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page break after an element</title>
  <style>
    @media print {
      .break-page {
        page-break-after: always;
      }
    }
  </style>
</head>
<body>
  <h1 class="break-page">Before page break</h1>
  <h1>After page break</h1>
  <button type="button" onclick="window.print()">Print</button>
</body>
</html>

Demo

Verwenden Sie page-break-before: always für einen Seitenumbruch beim Drucken

Die zweite Methode verwendet denselben nur für den Druck bestimmten Rahmen, weist break-page jedoch dem Inhalt zu, der auf einer neuen Seite beginnen soll. Die Deklaration page-break-before: always fügt den Umbruch vor diesem Element ein. In diesem Beispiel bleibt die erste Überschrift vor dem Umbruch, während die zweite auf der nächsten Druckseite beginnt. Wählen Sie diese Platzierung, wenn sich die Regel am besten dem Element zuordnen lässt, das die neue Seite beginnen soll.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page break before an element</title>
  <style>
    @media print {
      .break-page {
        page-break-before: always;
      }
    }
  </style>
</head>
<body>
  <h1>Before page break</h1>
  <h1 class="break-page">After page break</h1>
  <button type="button" onclick="window.print()">Print</button>
</body>
</html>

Verwenden Sie break-after: page für einen Seitenumbruch beim Drucken

Die Deklaration break-after: page ist eine weitere Möglichkeit, nach dem Element mit dieser Regel einen Seitenumbruch einzufügen. In diesem Beispiel wird sie auf ein div zwischen den beiden Überschriften angewendet. Daher folgt die zweite Überschrift auf der nächsten Druckseite auf den Trenner. In diesem Beispiel ist die CSS-Regel nicht in @media print eingeschlossen. Fügen Sie diesen Rahmen hinzu, wenn der Stil nur beim Drucken gelten soll. Das zugehörige Button-Markup ruft window.print() auf und öffnet den Druckdialog des Browsers.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page break after a divider</title>
  <style>
    .break-page {
      break-after: page;
    }
  </style>
</head>
<body>
  <h1>Before page break</h1>
  <div class="break-page"></div>
  <h1>After page break</h1>
  <button type="button" onclick="window.print()">Print</button>
</body>
</html>

Die CSS-Regeln legen fest, an welcher Stelle der Seitenumbruch erfolgen soll. Sie garantieren jedoch keine identische Paginierung in allen Browsern oder Druckkonfigurationen. Öffnen Sie nach dem Anwenden einer Regel die Druckvorschau des Browsers und prüfen Sie, ob der Inhalt wie gewünscht beginnt. Beginnt eine Seite zu früh oder zu spät, verschieben Sie die Klasse auf das Element, das nach beziehungsweise vor dem Umbruch stehen soll, und prüfen Sie die Vorschau erneut.