Wie man HTML zu PDF-Umbrüche mit C# verwaltet

Seitenumbrüche in HTML-PDFs mit C#35 hinzufügen oder vermeiden;

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

Steuern Sie Seitenumbrüche in PDF-Dokumenten, indem Sie page-break-after: always; zu HTML-Elementen hinzufügen oder Umbrüche mit page-break-inside: avoid; verhindern, wenn Sie HTML mit IronPDF in C# in PDF konvertieren.

IronPDF unterstützt Seitenumbrüche innerhalb von PDF-Dokumenten. Ein wesentlicher Unterschied zwischen PDF-Dokumenten und HTML besteht darin, dass HTML-Dokumente tendenziell scrollen, während PDFs mehrseitig sind und gedruckt werden können. Bei der Konvertierung von HTML-Strings in PDF müssen Entwickler oft genau steuern, wo Seiten umbrochen werden, um ein professionelles Aussehen der Dokumente zu gewährleisten.

als-Überschrift:2(Schnellstart: Implementierung von Seitenumbrüchen in HTML-zu-PDF-Konvertierung)

Konvertieren Sie HTML in PDF mit Seitenumbrüchen mit IronPDF. Dieses Beispiel zeigt, wie ein Seitenumbruch nach bestimmten HTML-Inhalten eingefügt wird, um einen korrekten Seitenumbruch zu gewährleisten. Durch Hinzufügen des Stils page-break-after: always; können Entwickler steuern, wo Seitenumbrüche auftreten, und so die Lesbarkeit und Organisation des resultierenden PDF-Dokuments verbessern.

Nuget IconLegen Sie jetzt mit NuGet los, um PDFs zu erstellen:

  1. Installieren Sie IronPDF mit dem NuGet-Paketmanager.

    PM > Install-Package IronPdf

  2. Kopieren Sie diesen Codeausschnitt und führen Sie ihn aus.

    new IronPdf.ChromePdfRenderer()
      .RenderHtmlAsPdf("<html><body><h1>Hello World!</h1><div style='page-break-after: always;'></div></body></html>")
      .SaveAs("pageWithBreaks.pdf");
  3. Bereitstellen zum Testen in Ihrer Live-Umgebung

    Beginnen Sie noch heute mit der Nutzung von IronPDF in Ihrem Projekt – mit einer kostenlosen Testversion.
    arrow pointer


Wie kann ich einen Seitenumbruch in HTML zu PDF hinzufügen?

Um einen Seitenumbruch in HTML zu erzeugen, verwenden Sie dies in Ihrem HTML-Code:

<div style="page-break-after: always;"></div>
<div style="page-break-after: always;"></div>
HTML

Die CSS-Eigenschaft page-break-after ist die zuverlässigste Methode zur Steuerung des Seitenumbruchs beim Rendern von HTML in PDF. Diese Eigenschaft weist den PDF-Renderer an, unmittelbar nach dem Element, das diesen Stil enthält, einen Seitenumbruch einzufügen. Bei der Arbeit mit Benutzerdefinierten Rändern oder spezifischen Seitenlayouts sorgen Seitenumbrüche dafür, dass der Inhalt genau an der vorgesehenen Stelle erscheint.

Warum funktioniert page-break-after besser als andere Methoden?

In diesem Beispiel habe ich die folgende Tabelle und das folgende Bild in meinem HTML-Code, und ich möchte sie auf zwei separaten Seiten anzeigen, indem ich nach der Tabelle einen Seitenumbruch einfüge. Die Eigenschaft Page-break-after liefert konsistentere Ergebnisse bei verschiedenen Rendering-Engines im Vergleich zu Alternativen wie page-break-before oder manuellem Abstand. Bei der Erstellung von neuen PDFs mit komplexen Layouts gewährleistet dieser Ansatz eine vorhersehbare Paginierung.

Welche Elemente sollte ich für Seitenumbrüche verwenden?

Seitenumbrüche funktionieren effektiv mit Elementen auf Blockebene wie <div>, <section> und <article>. Sie können zwar Seitenumbruchstile auf verschiedene HTML-Elemente anwenden, aber die zuverlässigsten Ergebnisse erzielt man, wenn man den Inhalt in ein spezielles <div> einbettet. Dies ist besonders wichtig bei der Arbeit mit Kopf- und Fußzeilen, die auf allen Seiten gleich aussehen müssen.

Tabelle

<table style="border: 1px solid #000000">
  <tr>
    <th>Company</th>
    <th>Product</th>
  </tr>
  <tr>
    <td>Iron Software</td>
    <td>IronPDF</td>
  </tr>
  <tr>
    <td>Iron Software</td>
    <td>IronOCR</td>
  </tr>
</table>
<table style="border: 1px solid #000000">
  <tr>
    <th>Company</th>
    <th>Product</th>
  </tr>
  <tr>
    <td>Iron Software</td>
    <td>IronPDF</td>
  </tr>
  <tr>
    <td>Iron Software</td>
    <td>IronOCR</td>
  </tr>
</table>
HTML

Bild

<img src="/static-assets/pdf/how-to/html-to-pdf-page-breaks/ironpdf-logo-text-dotnet.svg" style="border:5px solid #000000; padding:3px; margin:5px" />
<img src="/static-assets/pdf/how-to/html-to-pdf-page-breaks/ironpdf-logo-text-dotnet.svg" style="border:5px solid #000000; padding:3px; margin:5px" />
HTML

Wie implementiere ich Seitenumbrüche in C# Code?

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-page-breaks-page-break.cs
using IronPdf;

const string html = @"
  <table style='border: 1px solid #000000'>
    <tr>
      <th>Company</th>
      <th>Product</th>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronPDF</td>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronOCR</td>
    </tr>
  </table>

  <div style='page-break-after: always;'> </div>

  <img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>";

var renderer = new ChromePdfRenderer();

var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("Page_Break.pdf");
$vbLabelText   $csharpLabel

Der obige Code erzeugt eine PDF-Datei mit 2 Seiten: die Tabelle auf der ersten Seite und das Bild auf der zweiten Seite:

Wie verhindere ich Seitenumbrüche in Bildern?

Um einen Seitenumbruch innerhalb eines Bildes oder einer Tabelle zu vermeiden, verwenden Sie das CSS-Attribut page-break-inside, das auf ein umschließendes DIV-Element angewendet wird. Diese Technik ist unerlässlich für die Wahrung der visuellen Integrität beim Debugging von HTML mit Chrome, um sicherzustellen, dass Ihre PDFs genau wie vorgesehen dargestellt werden.

<div style="page-break-inside: avoid">
    <img src="no-break-me.png" />
</div>
<div style="page-break-inside: avoid">
    <img src="no-break-me.png" />
</div>
HTML

Warum sollte ich Bilder in DIV-Elemente einbetten?

Das Einbetten von Bildern in DIV-Elemente bietet eine bessere Kontrolle über das Verhalten bei Seitenumbrüchen. Die Eigenschaft page-break-inside: avoid funktioniert am zuverlässigsten bei Elementen auf Blockebene. Bilder sind standardmäßig Inline-Elemente, so dass durch den Umbruch sichergestellt wird, dass der Stil korrekt angewendet wird. Dieser Ansatz ist besonders nützlich bei der Arbeit mit responsive CSS-Layouts, die ihre Struktur im PDF-Format beibehalten müssen.

Was sind häufige Probleme mit Bildseitenumbrüchen?

Zu den häufigen Problemen gehören die Aufteilung von Bildern auf mehrere Seiten, die teilweise Wiedergabe an Seitengrenzen und der Verlust von Beschriftungen oder zugehörigem Text. Diese Probleme treten häufig auf, wenn sich Bilder am unteren Rand einer Seite befinden. Die Verwendung des page-break-inside: avoid-Wrappers verhindert diese Probleme, indem er sicherstellt, dass das gesamte Bild und sein Container als eine Einheit auf die nächste Seite übertragen werden.

using IronPdf;

// Example showing how to prevent image breaks in a more complex layout
const string htmlWithProtectedImage = @"
<html>
<head>
    <style>
        .no-break { page-break-inside: avoid; }
        .image-container { 
            border: 2px solid #333; 
            padding: 10px; 
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>Product Gallery</h1>
    <p>Our featured products are displayed below:</p>

    <div class='no-break image-container'>
        <img src='product1.jpg' alt='Product 1' />
        <p>Product 1 Description</p>
    </div>

    <div class='no-break image-container'>
        <img src='product2.jpg' alt='Product 2' />
        <p>Product 2 Description</p>
    </div>
</body>
</html>";

var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(htmlWithProtectedImage);
pdf.SaveAs("ProductGallery.pdf");
using IronPdf;

// Example showing how to prevent image breaks in a more complex layout
const string htmlWithProtectedImage = @"
<html>
<head>
    <style>
        .no-break { page-break-inside: avoid; }
        .image-container { 
            border: 2px solid #333; 
            padding: 10px; 
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>Product Gallery</h1>
    <p>Our featured products are displayed below:</p>

    <div class='no-break image-container'>
        <img src='product1.jpg' alt='Product 1' />
        <p>Product 1 Description</p>
    </div>

    <div class='no-break image-container'>
        <img src='product2.jpg' alt='Product 2' />
        <p>Product 2 Description</p>
    </div>
</body>
</html>";

var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(htmlWithProtectedImage);
pdf.SaveAs("ProductGallery.pdf");
$vbLabelText   $csharpLabel

Wie kann ich Seitenumbrüche in Tabellen vermeiden?

Wie oben gezeigt, können Seitenumbrüche innerhalb von Tabellen mit dem CSS page-break-inside: avoid vermieden werden. Dies wird besser auf ein umschließendes DIV angewendet als auf die Tabelle selbst, um sicherzustellen, dass der Stil auf einen block-level HTML-Knoten angewendet wird. Bei der Erstellung umfassender HTML-zu-PDF-Tutorials ist die richtige Tabellenformatierung für die Lesbarkeit entscheidend.

Wann sollte ich thead für Tabellenüberschriften verwenden?

Um Tabellenköpfe und -fußzeilen auf jeder Seite einer großen HTML-Tabelle zu duplizieren, die sich über mehrere PDF-Seiten erstreckt, verwenden Sie eine <thead>-Gruppe innerhalb der Tabelle:

<thead>
    <tr>
        <th>C Sharp</th><th>VB</th>
    </tr>
</thead>
<thead>
    <tr>
        <th>C Sharp</th><th>VB</th>
    </tr>
</thead>
HTML

Das <thead>-Element sorgt dafür, dass sich Tabellenüberschriften auf jeder Seite wiederholen, wenn sich eine Tabelle über mehrere Seiten erstreckt. Dies ist besonders nützlich für Finanzberichte, Datenlisten und alle Dokumente, bei denen der Kontext auf jeder Seite benötigt wird. Für die Ersteinrichtung und die Installationsübersicht verarbeitet IronPDF diese HTML-Standards automatisch.

Warum ist die Einbettung von Tabellen in DIVs wichtig?

Das Einbetten von Tabellen in DIV-Elemente mit Seitenumbruchsteuerelementen bietet mehrere Vorteile:

  • Sicherstellen, dass die gesamte Tabelle bei Bedarf als Einheit auf die nächste Seite verschoben wird
  • Verhindert, dass Kopfzeilen von Datenzeilen getrennt werden
  • Ermöglicht zusätzliche Gestaltung und Abstandskontrolle
  • Erleichtert das Hinzufügen von Beschriftungen oder Beschreibungen, die bei der Tabelle bleiben

Welche erweiterten CSS3-Einstellungen steuern Seitenumbrüche?

Um eine bessere Kontrolle zu ermöglichen, verwenden Sie CSS3 zusätzlich zu Ihrer thead-Gruppe:

<style type="text/css">
    table { page-break-inside:auto }
    tr { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
<style type="text/css">
    table { page-break-inside:auto }
    tr { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
HTML

Welche CSS-Eigenschaften eignen sich am besten für komplexe Layouts?

Für komplexe Layouts sollten Sie mehrere CSS-Eigenschaften kombinieren:

  • page-break-inside: avoid - Verhindert, dass Elemente geteilt werden
  • page-break-after: always - Erzwingt einen Umbruch nach einem Element
  • page-break-before: always - Erzwingt einen Umbruch vor einem Element
  • Waagen und Balken - Steuert die Mindestanzahl von Zeilen bei Seitenumbrüchen
  • break-inside, break-after, break-before - Moderne CSS3 Alternativen

Diese Eigenschaften wirken zusammen, um professionell aussehende PDFs mit korrektem Fluss und guter Lesbarkeit zu erstellen.

Wie behebe ich Probleme mit Seitenumbrüchen?

Wenn der Seitenumbruch nicht wie erwartet funktioniert:

  1. Prüfen Sie, ob Ihre HTML-Struktur gültig ist
  2. Prüfen, ob Stile auf Elemente auf Blockebene angewendet werden
  3. Testen Sie zuerst mit einfachen Beispielen, dann fügen Sie Komplexität hinzu
  4. Browser-Entwickler-Tools verwenden, um berechnete Stile zu überprüfen
  5. Ziehen Sie die Verwendung der Rendering-Optionen von IronPDF für zusätzliche Kontrolle in Betracht

Denken Sie daran, dass verschiedene PDF-Renderer Seitenumbrüche leicht unterschiedlich handhaben können. Daher ist es wichtig, mit Ihrem spezifischen Anwendungsfall zu testen, um in allen Szenarien konsistente Ergebnisse zu erzielen.

Häufig gestellte Fragen

Wie kann ich bei der Konvertierung von HTML in PDF in C# einen Seitenumbruch hinzufügen?

Um bei der Verwendung von IronPDF einen Seitenumbruch einzufügen, fügen Sie `

` in Ihren HTML-Code an der Stelle ein, an der der Umbruch erfolgen soll. Der ChromePdfRenderer von IronPDF erkennt diese CSS-Eigenschaft und erstellt an dieser Stelle im PDF-Dokument eine neue Seite.

Welche CSS-Eigenschaft ist am zuverlässigsten für die Steuerung von Seitenumbrüchen bei der PDF-Konvertierung?

Die CSS-Eigenschaft `page-break-after: always;` ist die zuverlässigste Methode bei der Verwendung von IronPDF. Diese Eigenschaft sorgt für konsistente Ergebnisse bei verschiedenen Rendering-Engines und gewährleistet einen vorhersehbaren Seitenumbruch in Ihren konvertierten PDF-Dokumenten.

Wie kann ich Seitenumbrüche innerhalb von Tabellen oder Bildern verhindern?

Um unerwünschte Seitenumbrüche innerhalb von Tabellen oder Bildern zu verhindern, verwenden Sie die CSS-Eigenschaft `page-break-inside: avoid;`. Bei der Konvertierung von HTML in PDF mit IronPDF sorgt dieser Stil dafür, dass Ihre Tabellen und Bilder auf einer einzigen Seite intakt bleiben und nicht auf mehrere Seiten aufgeteilt werden.

Welche HTML-Elemente funktionieren am besten mit Seitenumbruchstilen?

Seitenumbrüche funktionieren am effektivsten mit Elementen auf Blockebene wie `

`, ``, und `
`. IronPDF empfiehlt, den Inhalt in ein spezielles `
`-Element mit dem Seitenumbruchstil einzuschließen, um die zuverlässigsten Ergebnisse bei der Konvertierung von HTML in PDF zu erzielen.

Kann ich Seitenumbrüche auf CSS-Ebene anstelle von Inline-Stilen steuern?

Ja, Sie können Seitenumbruchstile auf CSS-Ebene festlegen, anstatt Inline-Stile zu verwenden. Die Rendering-Engine von IronPDF unterstützt CSS-Stylesheets in vollem Umfang, so dass Sie die Regeln für den Seitenumbruch in Ihrer CSS-Datei definieren und einen saubereren, besser wartbaren HTML-Code erhalten können.

Warum sollte ich page-break-after anstelle von page-break-before verwenden?

Die Eigenschaft "page-break-after" liefert im Vergleich zu "page-break-before" konsistentere Ergebnisse über verschiedene Rendering-Engines hinweg. Bei der Verwendung von IronPDF zur Erstellung von PDF-Dateien mit komplexen Layouts sorgt page-break-after für ein vorhersehbareres und zuverlässigeres Paginierungsverhalten.

Curtis Chau
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 17,012,929 | Version: 2025.12 gerade veröffentlicht