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.
Wie man Seitenumbrüche in HTML-PDFs verwendet
- Laden Sie die C#-Bibliothek herunter, um Seitenumbrüche in PDF zu verwenden
- Seitenumbrüche auf HTML-String anwenden und in PDF konvertieren
- Setzen Sie das Attribut avoid auf page-break-inside, um Seitenumbrüche in Bildern zu vermeiden
- Führen Sie dasselbe für Tabellen durch, um Seitenumbrüche in Tabellen zu vermeiden
- Stil auf 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
| Company | Product |
|---|---|
| Iron Software | IronPDF |
| Iron Software | IronOCR |
Bild
:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-page-breaks-page-break.csusing 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 auf ein umgebendes DIV-Element anwenden.
<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 ist besser auf ein umgebendes DIV angewendet als auf die Tabelle selbst, um sicherzustellen, dass der Stil auf einen Block-Level-HTML-Knoten angewendet wird.
Um Tabellen-Kopfzeilen und Fußzeilen über jede Seite einer großen HTML-Tabelle, die sich über mehrere PDF-Seiten erstreckt, zu duplizieren, können Sie eine <thead>-Gruppe innerhalb der Tabelle verwenden:
<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 mehr Kontrolle zu erhalten, möchten Sie möglicherweise 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>
