1. IronPDF
  2. Fehlersuche
  3. Kopfzeilen/Fußzeilen und Seitenumbrüche

Kopfzeilen/Fußzeilen und Seitenumbrüche

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 wird jedoch nicht funktionieren, wenn Ihr Stylesheet ein "div" aus "display:block" ändert. Stellen Sie sicher, dass die "page-break-after"-Regel auf ein Block-Level-Element angewendet wird, vorzugsweise ein "div", das ein direktes Kind des body-Tags ist.

Das folgende HTML-Beispiel demonstriert

<!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="content">
        <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="content">
        <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 Tabellenkopf- und -fußzeilen in jeder PDF-Seite wiederholen möchten, lesen Sie diesen Artikel:Hinzufügen oder Vermeiden von Seitenumbrüchen in HTML-PDFs

Wenn die oben genannten Schritte Ihr Problem nicht beheben, versuchen Sie bitte Folgendes:

1. Vereinfachen Sie das Thema

Wenn Ihr Inhalt in der Länge variiert, testen Sie die Inhalte mit variabler Länge, um sicherzustellen, dass Sie das richtige Html/CSS verwenden. Diesewerkzeug können zur Unterstützung eingesetzt werden.

2. Validieren Sie Ihr HTML und CSS

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

HTML-Validator kann Ihnen bei der Validierung Ihrer HTML-Eingabe behilflich sein.

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

Andererseits wird die Positionierung des Offenlegungsabschnitts von vielen Faktoren beeinflusst, wie z. B. der Tabellenstruktur, dem Fuß und vielen anderen. Eine doppelte Überprüfung der HTML-Zeichenfolge und -Struktur ist also sicher hilfreich.

3. Prüfen Sie die Ausgabe in der Druckvorschau von Chrome

Dank der in IronPDF verwendeten Chrome PDF-Rendering-Engine gibt IronPDF eine identische PDF-Datei für den Chrome-Webbrowser aus.

Daher können Sie das Erscheinungsbild Ihres HTML über die Chrome-Druckvorschau überprüfen und das HTML entsprechend anpassen. Dies erfordert zwar einige Versuche, ist aber der einfachste Weg, Ihr HTML zu debuggen.

Erfahren Sie mehr darüber, wie Sie Ihren HTML-Code mit Chrome Print Preview debuggen können:Pixelgenaue HTML-Formatierung

In diesem Artikel finden Sie weitere Informationen zur Chrome PDF Rendering Engine:Was ist der Chrome Renderer von IronPDF?

4. Verwenden Sie die Chrome-Entwicklerwerkzeuge

Alternativ können Sie Inspect in den Chrome-Entwicklertools verwenden, um nach berechneten endgültigen CSS in Elementen zu suchen. So erhalten Sie genauere Angaben zu jedem HTML-Element in der Zeichenkette.

5. Rendering des HTML mit IronPDF

Senden Sie Ihren fertigen HTML-String oder Ihre HTML-Datei an den IronPDF Chrome Renderer und verwenden Sie "RenderHtmlAsPdf()oderRenderHtmlFileAsPdf()` Methode zur Erstellung Ihres PDF-Dokuments.

Möglicherweise müssen Sie dem Renderer einige Rendering-Optionen vorgeben, um Ihre PDF-Ausgabe und den Rendering-Vorgang fein abzustimmen. Siehe diesartikel um mehr zu erfahren.