Wie man CSS mit HTML in C#35; für responsive PDFs verwendet

Warum ist es wichtig, den richtigen CSS-Medientyp zu wählen?

IronPDF generiert PDFs aus HTML in C# und kann standardmäßig ein Bildschirm-Stylesheet in PDF umwandeln. Dies ist praktisch, da Druck-Stylesheets oft weniger gut dokumentiert, verwendet oder entwickelt werden im Vergleich zu ihren Bildschirm-Gegenstücken. Die Kenntnis des Unterschieds zwischen diesen Medientypen ist jedoch entscheidend für die Erstellung professioneller PDFs.

Bei der Arbeit mit CSS (Screen & Print) in IronPDF hat die Wahl zwischen Bildschirm- und Druckmedientyp erhebliche Auswirkungen auf die endgültige PDF-Ausgabe. Bei Bildschirmmedien werden interaktive Elemente und ein reichhaltiges visuelles Design beibehalten, während bei Druckmedien der Inhalt für die Lesbarkeit und den Konsum auf Papier optimiert wird.

CSS3 erlaubt es, bestimmte CSS-Stile ausschließlich in gedruckten Dokumenten zu rendern, während andere für Webbrowser gedacht sind. IronPDF kann mit beiden arbeiten und gibt Ihnen die vollständige Kontrolle darüber, wie Ihr HTML-Inhalt in PDF gerendert wird. Durch diese Flexibilität wird sichergestellt, dass Ihre PDF-Dateien die spezifischen Anforderungen des jeweiligen Anwendungsfalls erfüllen, unabhängig davon, ob Sie digitale Berichte, druckbare Rechnungen oder Hybriddokumente erstellen.

Wann sollte ich den CSS-Medientyp Print vs. Screen verwenden?

Erstellen und wenden Sie ein Druck-Stylesheet auf Ihr HTML an: Erfahren Sie, wie man ein perfektes Druck-Stylesheet erstellt und anwendet..

Jeder CSS-Medientyp zielt auf unterschiedliche Anwendungsfälle ab. Probieren Sie alle aus, um zu sehen, welche Ihren Anforderungen entspricht. Beachten Sie diese Richtlinien:

Verwenden Sie den CSS-Medientyp Print, wenn:

• Erstellen von Dokumenten für den physischen Druck
• Erstellung von Rechnungen, Berichten oder formellen Dokumenten
• Sie benötigen seitenübergreifend wiederholte Tabellenüberschriften
• Sparen von Tinte ist eine Priorität
• Arbeiten mit Benutzerdefinierte Papiergröße Anforderungen

Verwenden Sie Screen CSS Media Type wenn:

• Erstellung interaktiver PDFs mit reichhaltigen visuellen Elementen
• Wahrung der Ästhetik des Webdesigns in der PDF-Datei
• Einschließlich Hintergrundbilder und Farben
• Die PDF-Datei wird hauptsächlich auf Bildschirmen angezeigt
• Arbeiten mit responsiven HTML-zu-PDF-Konvertierungen

Was sind die visuellen Unterschiede zwischen Bildschirm- und Druckmodi?

Die obigen Beispiele zeigen, wie derselbe HTML-Inhalt je nach Auswahl des CSS-Medientyps unterschiedlich dargestellt wird. Beachten Sie, dass in der Druckversion dekorative Bilder und Symbole entfernt wurden, um ein übersichtlicheres, besser druckbares Dokument zu erstellen, während in der Bildschirmversion alle visuellen Elemente für die digitale Anzeige beibehalten wurden.

Warum werden Tabellenüberschriften im Bildschirmmodus nur einmal angezeigt?

Wenn Sie mit HTML-Tabellen arbeiten, die sich über mehrere Seiten erstrecken, setzen Sie die Eigenschaft CssMediaType auf PdfCssMediaType.Print. Dadurch wird sichergestellt, dass die Tabellenüberschrift oben auf jeder erweiterten Seite wiederholt wird. Im Gegensatz dazu weist PdfCssMediaType.Screen Chrome an, die Kopfzeilen nur einmal zu drucken. Dieses Verhalten ist besonders wichtig bei der Erstellung von PDF-Berichten mit langen Datentabellen.

Der Medientyp print aktiviert bestimmte CSS-Regeln, die von Browsern für den Seitenumbruch verwendet werden, darunter die Eigenschaft thead {display: table-header-group;}, die eine Wiederholung der Kopfzeile ermöglicht. Diese Funktion ist wichtig, um den Kontext zu erhalten, wenn die Leser durch mehrseitige Dokumente blättern.

Welche HTML-Struktur ist für sich wiederholende Kopfzeilen erforderlich?

Um sicherzustellen, dass Chrome den Tabellenkopf erkennt, schließen Sie ihn in einen <thead>-Tag ein. Let's render the 'tableHeader.html example of repeating table headers' HTML file to PDF to see the effect.

Hier ist die empfohlene HTML-Struktur:

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <!-- Your table data rows here -->
    </tbody>
</table>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <!-- Your table data rows here -->
    </tbody>
</table>

Wie implementiere ich die Wiederholung von Tabellenköpfen in C#35?

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.cs

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400);

// Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableHeader.html");

pdf.SaveAs("tableHeader.pdf");

Imports IronPdf
Imports IronPdf.Rendering

Private renderer As New ChromePdfRenderer()

' Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400)

' Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableHeader.html")

pdf.SaveAs("tableHeader.pdf")

Für erweiterte Optionen zur Tabellenformatierung können Sie Benutzerdefinierte Ränder verwenden, um die Abstände um Ihre Tabellen herum zu steuern, oder Seitenumbrüche implementieren, um sicherzustellen, dass Tabellen bei Bedarf auf neuen Seiten beginnen.

Wie sieht die endgültige PDF-Ausgabe aus?