Verwaltung von Kopf- und Fußzeilen sowie Seitenumbrüchen in PDF-Dateien
Seitenumbrüche können verwirrend sein.
Die CSS-Regel page-break-after wird immer funktionieren, wenn sie richtig 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 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>Wenn Sie stattdessen Tabellenköpfe und -fußzeilen auf jeder PDF-Seite wiederholen müssen, sehen Sie sich diesen Artikel an: Seitenumbrüche in HTML-PDFs hinzufügen oder vermeiden
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. Dieses Tool kann zur Unterstützung verwendet werden.
2. Validieren Sie Ihr HTML und CSS
CSS Validator kann verwendet werden, um die verwendeten CSS-Stile zu überprüfen.
HTML-Validator kann verwendet werden, um Ihnen bei der Validierung Ihrer HTML-Eingabe zu helfen.
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 Ihr HTML über die Druckvorschau von Chrome debuggen können: Pixel Perfect HTML Formatting
Sehen Sie sich diesen Artikel für weitere Informationen zur Chrome PDF Rendering Engine an: Was ist IronPDF's Chrome Renderer?
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 finalisierten HTML-String oder die HTML-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 dem Renderer einige Rendering-Optionen vorgeben, um Ihre PDF-Ausgabe und den Rendering-Vorgang fein abzustimmen. Siehe diesen Artikel, um mehr zu erfahren.
