1. IronPDF
2. Anleitungen
3. Seitenumbrüche

Hinzufügen oder Vermeiden von Seitenumbrüchen in HTML-PDFs

IronPDF unterstützt Seitenumbrüche in PDF-Dokumenten. Ein wesentlicher Unterschied zwischen PDF- und HTML-Dokumenten besteht darin, dass HTML-Dokumente in der Regel gescrollt werden, während PDF-Dokumente mehrseitig sind und ausgedruckt werden können.

Erste Schritte mit IronPDF

Beginnen Sie noch heute mit der Verwendung von IronPDF in Ihrem Projekt mit einer kostenlosen Testversion.

Erster Schritt:

Kostenloser Start

Wie man Seitenumbrüche in HTML-PDFs verwendet

1. C#-Bibliothek zur Verwendung von Seitenumbrüchen in PDF herunterladen
2. Seitenumbrüche auf HTML-String anwenden und in PDF konvertieren
3. Satz vermeiden zum Attribut page-break-inside, um Seitenumbrüche in Bildern zu vermeiden
4. Machen Sie dasselbe für Tabellen, um Seitenumbrüche in Tabellen zu vermeiden
5. Stil auf der CSS-Ebene festlegen

Einen Seitenumbruch hinzufügen

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

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

Demonstration von Seitenumbruch erstellen

In diesem Beispiel habe ich die folgende Tabelle und das folgende Bild in meinem HTML-Code, und ich möchte, dass sie auf zwei getrennten Seiten erscheinen, indem ich nach der Tabelle einen Seitenumbruch einfüge.

Tabelle

Bild

: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");

Imports IronPdf

Private Const html As String = "
  <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'>"

Private renderer = New ChromePdfRenderer()

Private pdf = renderer.RenderHtmlAsPdf(html)
pdf.SaveAs("Page_Break.pdf")

Der obige Code generiert die unten stehende PDF-Datei mit 2 Seiten, der Tabelle auf der ersten Seite und dem Bild auf der zweiten:

Vermeiden von Seitenumbrüchen in Bildern

Um einen Seitenumbruch innerhalb eines Bildes oder einer Tabelle zu vermeiden, können Sie das css-Attribut page-break-inside verwenden, das auf ein umschließendes DIV-Element angewendet wird.

<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>

Vermeidung von Seitenumbrüchen in Tabellen

Wie oben gezeigt, können Seitenumbrüche innerhalb von Tabellen durch die Verwendung von CSS vermieden werden:

page-break-inside: avoid". Dies sollte besser auf ein umschließendes DIV als auf die Tabelle selbst angewendet werden, um sicherzustellen, dass der Stil auf einen HTML-Knoten auf Block-Ebene angewendet wird.

Um Tabellen Kopf- und Fußzeilen auf jeder Seite einer großen HTML-Tabelle zu duplizieren, die sich über mehrere PDF-Seiten erstreckt, können Sie ein `

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

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

Erweiterte CSS3-Einstellungen

Um eine bessere Kontrolle zu erhalten, können Sie CSS3 zusätzlich zu Ihrer "thead"-Gruppe verwenden:

<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>