1. IronPDF
  2. Anleitungen
  3. CSS (Bildschirm & Druck)
Wie man HTML mit responsivem CSS in PDF konvertiert mit C#

How to use CSS with HTML

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

Der CSS-'Bildschirm'-Medientyp ist hauptsächlich für die Darstellung auf Computerbildschirmen und ähnlichen Geräten vorgesehen. Wenn Stile für den 'Bildschirm'-Medientyp definiert sind, beeinflussen sie, wie Webinhalte auf Bildschirmen präsentiert werden, wobei der visuelle Aufbau und die Interaktivität betont werden.

Im Gegensatz dazu ist der CSS-'Druck'-Medientyp für das Drucken konzipiert. Er bestimmt, wie die Webseite beim Drucken erscheint, wobei der Schwerpunkt auf der Optimierung des Inhalts für die gedruckte Seite liegt. Diese Optimierung kann die Anpassung von Schriftgrößen, Rändern und das Entfernen oder Ausblenden von Elementen umfassen, die beim Drucken nicht relevant oder notwendig sind.

Schnellstart: PDFs mit responsivem HTML und CSS erstellen

Wandeln Sie Ihr HTML mit responsivem CSS mühelos in ein hochwertiges PDF mit IronPDF um. Mit nur wenigen Codezeilen können Entwickler sicherstellen, dass ihre PDFs perfekt auf allen Geräten gerendert werden, wobei die Integrität von Bildschirm- und Druckstilen gewahrt bleibt. Diese kurze Anleitung zeigt, wie man mit IronPDF professionellen PDF-Ausgaben aus Ihren vorhandenen HTML-Inhalten erzielt und den Prozess für schnelle und genaue Ergebnisse vereinfacht.

Nuget IconGet started making PDFs with NuGet now:

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Copy and run this code snippet.

    new IronPdf.ChromePdfRenderer { RenderingOptions = { CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print } }
    .RenderUrlAsPdf("https://example.com")
    .SaveAs("responsive.pdf");

  3. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer
class="hsg-featured-snippet">

Minimaler Workflow (5 Schritte)

  1. Laden Sie die IronPDF C#-Bibliothek für CSS- und HTML-Integration herunter
  2. Bereiten Sie die HTML-Datei für die Konvertierung in PDF vor
  3. Geben Sie den CSS-Medientyp für eine optimale PDF-Formatierung an
  4. Legen Sie den CSS-Medientyp 'Drucken' für wiederholte Tabellenköpfe in PDFs fest
  5. Konfigurieren Sie die Ansichtsfensterabmessungen für responsives Design


Bildschirm- & Druck-CSS-Typen (CSS3)

IronPDF erzeugt PDFs aus HTML in C# und kann standardmäßig problemlos ein Bildschirm-Stylesheet in ein PDF rendern. Dies ist praktisch, da Druck-Stylesheets oft weniger gut dokumentiert, verwendet oder entwickelt werden im Vergleich zu ihren Bildschirm-Gegenstücken.

CSS3 erlaubt es, bestimmte CSS-Stile ausschließlich in gedruckten Dokumenten zu rendern, während andere für Webbrowser gedacht sind. IronPDF kann so programmiert werden, dass es mit beiden arbeitet.

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

Es ist sehr schwer zu sagen, welcher CSS-Medientyp besser ist, da jeder Typ auf unterschiedliche Anwendungsfälle abzielt. Es lohnt sich, jeden durch Ausprobieren zu testen, um zu sehen, welcher für Ihre Anforderungen geeignet ist.

Beispiel für Druck 1 Beispiel für Bildschirm 1

Wiederholte Tabellenköpfe

Wenn Sie mit HTML-Tabellen arbeiten, die sich über mehrere Seiten erstrecken, setzen Sie die CssMediaType-Eigenschaft auf PdfCssMediaType.Print. Dies stellt sicher, dass der Tabellenkopf am Anfang jeder erweiterten Seite wiederholt wird. Im Gegensatz dazu weist PdfCssMediaType.Screen Chrome an, die Überschriften nur einmal zu drucken.

Um sicherzustellen, dass Chrome den Tabellenkopf erkennt, sollte dieser in einem <thead>-Tag eingeschlossen sein. Let's render the 'tableHeader.html example of repeating table headers' HTML file to PDF to see the effect.

: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")
$vbLabelText   $csharpLabel

Häufig gestellte Fragen

Wie kann ich HTML mit responsivem Design in PDF umwandeln?

Sie können HTML mit responsivem Design in PDF umwandeln, indem Sie zuerst die IronPDF C#-Bibliothek herunterladen. Bereiten Sie dann Ihre HTML-Datei vor, geben Sie den entsprechenden CSS-Mediatyp an und konfigurieren Sie die Viewport-Dimensionen, um sicherzustellen, dass das PDF auf verschiedenen Geräten responsiv ist.

Was ist der Unterschied zwischen den CSS-Mediatypen 'screen' und 'print'?

Der CSS-Mediatyp 'screen' wird für die Anzeige von Inhalten auf digitalen Bildschirmen verwendet und konzentriert sich auf visuelles Design und Interaktivität. Im Gegensatz dazu optimiert der Medientyp 'print' Inhalte für gedrucktes Material, indem Elemente wie Schriftgrößen und Ränder angepasst werden, was ihn für physische Drucke geeignet macht.

Wie gewährleiste ich, dass Tabellenüberschriften auf jeder Seite in PDFs wiederholt werden?

Um sicherzustellen, dass Tabellenüberschriften auf jeder Seite in einem PDF wiederholt werden, setzen Sie die CssMediaType-Eigenschaft auf PdfCssMediaType.Print und umschließen Sie die Tabellenüberschrift in einem <thead>-Tag. Dies gewährleistet eine konsistente Darstellung der Überschrift über mehrere Seiten hinweg.

Kann IronPDF sowohl Bildschirm- als auch Druck-Stylesheets verarbeiten?

Ja, IronPDF kann sowohl Bildschirm- als auch Druck-Stylesheets verarbeiten. Es ermöglicht das Rendern von PDFs aus HTML mit jedem Medientyp, wodurch Flexibilität sowohl für digitale Bildschirme als auch für den Druck gewährleistet ist.

Was sind die Vorteile der Verwendung eines Druck-Stylesheets bei der Umwandlung von HTML in PDF?

Ein Druck-Stylesheet ist vorteilhaft bei der Umwandlung von HTML in PDF, da es sicherstellt, dass der Inhalt für den Druck optimiert ist. Dazu gehören Anpassungen von Schriftgrößen und Rändern, um sicherzustellen, dass das PDF korrekt für physische Ausdrucke formatiert ist.

Wie implementieren Sie responsives CSS in einem PDF mit einer C#-Bibliothek?

Um responsives CSS in einem PDF mit IronPDF zu implementieren, laden Sie die IronPDF C#-Bibliothek herunter, bereiten Sie Ihre HTML-Inhalte vor, geben Sie den gewünschten CSS-Mediatyp an und passen Sie die Viewport-Dimensionen an, um sicherzustellen, dass das PDF sich an verschiedene Geräte anpasst.

Warum ist es wichtig, den richtigen CSS-Mediatyp für PDFs zu verwenden?

Die Verwendung des richtigen CSS-Mediatyps ist für PDFs wichtig, da er bestimmt, wie der Inhalt gerendert wird. Der Medientyp 'screen' eignet sich für digitale Displays, während der Medientyp 'print' sicherstellt, dass der Inhalt für Papier optimiert ist, was Layout und Lesbarkeit beeinflusst.

Unterstützt IronPDF .NET 10, und gibt es Vorteile bei der Verwendung der neuesten Version?

Ja, IronPDF unterstützt .NET 10. Da .NET 10 eine LTS-Version (Long-Term Support) mit signifikanten Leistungs-, Laufzeit- und SDK-Verbesserungen ist – darunter verbessertes JIT-Inlining, Hardwarebeschleunigung und erweiterte HTTP- und Serialisierungs-APIs –, führt die Verwendung von .NET 10 mit IronPDF zu einer schnelleren und effizienteren PDF-Generierung und langfristiger Stabilität. ([devblogs.microsoft.com](https://devblogs.microsoft.com/dotnet/announcing-dotnet-10/?utm_source=openai))

Curtis Chau
Curtis Chau
  Jetzt mit dem Ingenieurteam chatten
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 16,154,058 | Version: 2025.11 gerade veröffentlicht