1. IronPDF
  2. Fehlersuche
  3. Kopf- und Fußzeilen und Seitenumbrüche

Managing Headers, Footers & Page Breaks in PDFs

Curtis Chau
Curtis Chau
Aktualisiert:
This article was translated from English: Does it need improvement?
Translated
View the article in English

Seitenumbrüche können verwirrend sein.

Die CSS-Regel page-break-after funktioniert immer, wenn sie korrekt angewendet wird. Diese Regel funktioniert jedoch nicht, wenn Ihr Stylesheet ein div von display:block ändert. Stellen Sie sicher, dass die Regel page-break-after auf ein Block-Element angewendet wird, vorzugsweise ein div, das ein direktes Kind des body-Tags ist.

Das HTML-Beispiel unten zeigt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Page Breaks with Header and Footer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header, footer {
            position: fixed;
            width: 100%;
            text-align: center;
            background-color: #f1f1f1;
            padding: 10px 0;
        }
        header {
            top: 0;
        }
        footer {
            bottom: 0;
        }
        .content {
            margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
        }
        .page-break {
            page-break-after: always;
            display: block; /* Ensure it remains a block-level element */
        }
    </style>
</head>
<body>
    <header>
        <h1>Document Title</h1>
        <p>Header Content</p>
    </header>
    <footer>
        <p>Footer Content</p>
    </footer>
    <div class="content">
        <div class="page-break">
            <h2>Section 1</h2>
            <p>This is the first section. After this section, there will be a page break.</p>
        </div>
        <div class="page-break">
            <h2>Section 2</h2>
            <p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
        </div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Page Breaks with Header and Footer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header, footer {
            position: fixed;
            width: 100%;
            text-align: center;
            background-color: #f1f1f1;
            padding: 10px 0;
        }
        header {
            top: 0;
        }
        footer {
            bottom: 0;
        }
        .content {
            margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
        }
        .page-break {
            page-break-after: always;
            display: block; /* Ensure it remains a block-level element */
        }
    </style>
</head>
<body>
    <header>
        <h1>Document Title</h1>
        <p>Header Content</p>
    </header>
    <footer>
        <p>Footer Content</p>
    </footer>
    <div class="content">
        <div class="page-break">
            <h2>Section 1</h2>
            <p>This is the first section. After this section, there will be a page break.</p>
        </div>
        <div class="page-break">
            <h2>Section 2</h2>
            <p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
        </div>
    </div>
</body>
</html>
HTML

Wenn Sie stattdessen sich wiederholende Tabellenköpfe und -fußzeilen in jeder PDF-Seite benötigen, siehe diesen Artikel: Hinzufügen oder Vermeiden von Seitenumbrüchen in HTML-PDFs

Wenn die oben genannten Schritte Ihr Problem nicht lösen, versuchen Sie bitte Folgendes:

1. Vereinfachen Sie das Problem

Wenn Ihre Inhalte variierende Längen haben, testen Sie die Inhalte variabler Längen, um sicherzustellen, dass Sie das richtige HTML/CSS verwenden. Dieses Werkzeug kann dabei helfen.

2. Validieren Sie Ihr HTML und CSS

CSS-Validator kann verwendet werden, um das verwendete CSS-Styling zu überprüfen.

HTML-Validator kann Ihnen helfen, Ihre HTML-Eingabe zu validieren.

Außerdem können Sie Ihren Webdesigner bitten, Ihr HTML zu überprüfen, während Sie Änderungen nachverfolgen.

Andererseits wird die Positionierung des Offenlegungsabschnitts von vielen Faktoren beeinflusst, einschließlich der Tabellenstruktur, tfoot und vielen anderen. Daher wird Ihnen eine doppelte Überprüfung Ihres HTML-Strings und -Strukturen sicherlich helfen.

3. Überprüfen Sie die Ausgabe in Chrome's Druckvorschau

IronPDF gibt ein identisches PDF für den Chrome-Webbrowser auf dem Desktop aus, dank der Verwendung der Chrome-PDF-Rendering-Engine in IronPDF.

Daher können Sie das Aussehen Ihres HTMLs über die Chrome-Druckvorschau prüfen und das HTML entsprechend anpassen. Dies kann Versuch und Irrtum erfordern, aber es ist der einfachste Weg, Ihr HTML zu debuggen.

Erfahren Sie mehr darüber, wie Sie Ihr HTML über die Chrome-Druckvorschau debuggen: Pixel Perfect HTML Formatierung

Mehr Informationen zur Chrome-PDF-Rendering-Engine finden Sie in diesem Artikel: Was ist der Chrome-Renderer von IronPDF?

4. Verwenden Sie die Chrome-Entwicklerwerkzeuge

Alternativ können Sie Inspect in den Chrome-Entwicklerwerkzeugen verwenden, um kalkulierte finale CSS in Elementen zu suchen. Dies gibt mehr Details zu jedem HTML-Element im String.

5. Rendern Sie das HTML mit IronPDF

Senden Sie Ihren finalisierten HTML-String oder -Datei an den IronPDF Chrome Renderer und verwenden Sie die Methode RenderHtmlAsPdf() oder RenderHtmlFileAsPdf(), um Ihr PDF-Dokument zu erstellen.

Möglicherweise müssen Sie einige Rendering-Optionen an den Renderer spezifizieren, um Ihr Ausgabe-PDF sowie den Rendering-Vorgang fein abzustimmen. Siehe diesen Artikel, um mehr zu erfahren.

Curtis Chau
Curtis Chau
  Jetzt mit dem Ingenieurteam chatten
Technischer Autor

Curtis Chau hat einen Bachelor-Abschluss in Informatik von der Carleton University und ist spezialisiert auf Frontend-Entwicklung mit Expertise in Node.js, TypeScript, JavaScript und React. Leidenschaftlich widmet er sich der Erstellung intuitiver und ästhetisch ansprechender Benutzerschnittstellen und arbeitet gerne mit modernen Frameworks sowie der Erstellung gut strukturierter, optisch ansprechender ...

Weiterlesen
Bereit anzufangen?
Nuget Downloads 16,154,058 | Version: 2025.11 gerade veröffentlicht