1. IronPDF
  2. Tutorials
  3. HTML mit Chrome debuggen
Wie man HTML mit C# in .NET 8 in PDF umwandelt | IronPDF

How to Debug HTML in Chrome to Create Pixel Perfect PDFs in C

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

Als die Entwickler von IronPDF verstehen wir, dass von IronPDF erstellte PDF-Dokumente nicht nur perfekt aussehen müssen, sondern auch genau so, wie es unsere Kunden erwarten. Um Ihre PDFs pixelgenau aussehen zu lassen, müssen Sie hervorragende HTML-Vorlagen entwickeln oder mit einem Webentwickler zusammenarbeiten, der dies für Sie übernimmt. IronPDF bietet die Möglichkeit, Ihre PDFs pixelgenau zu Ihrem HTML zu rendern und optisch genauso aussehen zu lassen wie in Chrome, dank unseres Chrome-Renderers.

Schnellstart: Pixelgenaue PDFs mit IronPDF erstellen

Konvertieren Sie mühelos Ihr HTML in pixelgenaue PDFs mithilfe des leistungsstarken Chrome-Renderers von IronPDF. Dieser kurze Leitfaden hilft Ihnen, präzise und vorhersehbare PDF-Ausgaben zu erzielen, indem Sie die volle Unterstützung von IronPDF für HTML5, CSS3 und JavaScript nutzen. Mit nur wenigen Codezeilen können Sie Ihre HTML-Inhalte genau so rendern, wie sie in Chrome erscheinen, um einen nahtlosen Übergang vom Web zu PDF zu gewährleisten. Perfekt für Entwickler, die die Layoutgenauigkeit beibehalten möchten, ohne die Benutzerfreundlichkeit zu beeinträchtigen.

  1. Installieren Sie IronPDF mit NuGet Package Manager

    PM > Install-Package IronPdf

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

    var Renderer = new IronPdf.ChromePdfRenderer();
Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
Renderer.RenderHtmlAsPdf("<html>Your HTML content here</html>").SaveAs("output.pdf");

  3. Bereitstellen zum Testen in Ihrer Live-Umgebung

    Beginnen Sie noch heute, IronPDF in Ihrem Projekt zu verwenden, mit einer kostenlosen Testversion

    arrow pointer

Was ist der Chrome-Renderer von IronPDF?

Es macht IronPDF einzigartig im Vergleich zu anderen .NET PDF-Bibliotheken

IronPDF ist auf dem Markt einzigartig, da es den Google Chromium-Renderer nutzt, was bedeutet, dass das HTML, das Sie in Chrome-Browsern sehen, genauso aussieht wie das, was Sie in unseren PDFs sehen. In diesem Tutorial führen wir Sie durch einige Einstellungen, die Sie in Chrome und in IronPDF anwenden müssen, um dies zu erreichen.

Viele angebliche „HTML-zu-PDF"-Technologien, die von Mitbewerbern implementiert wurden, entsprechen nicht den W3C-Standards und unterstützen weder HTML5, CSS3 noch JavaScript. Sie verwenden stattdessen zugrunde liegende Renderer wie wkhtmltopdf.

IronPDF im Vergleich zu Wettbewerbern

IronPDF

IronPDF

PDF herunterladen

Vanilla Chrome

Vanilla Chrome

PDF herunterladen

Aspose.PDF

Aspose.PDF

PDF herunterladen

iText

iText

PDF herunterladen

wkhtmltopdf

wkhtmltopdf

PDF herunterladen

Um eine vollständige Liste der Vergleiche mit anderen Produkten zu sehen, besuchen Sie unseren Blog.

[pFeatures related to IronPDF im Vergleich zu Wettbewerbern Funktionen]|IronPDF's Chrome Renderer|Aspose vs IronPDF|iText vs IronPDF

Der optimierte Chrome-Renderer von IronPDF ist besser als Chrome

Zwei Beispiele für IronPDF, das Chrome selbst übertrifft. Schaltflächen und Texte, die in Chrome auf zwei Seiten verteilt werden, bleiben mit IronPDF intakt.

Beispiel für Schaltflächen und Texte, die in Chrome abgeschnitten sind

Button wird in Chrome abgeschnitten, aber nicht in IronPDF

Ein weiteres Beispiel für Texte, die in Chrome abgeschnitten sind

Text wird in Chrome abgeschnitten, aber nicht in IronPDF

Warum HTML zu PDF verwenden?

Entwickler lieben HTML zu PDF, weil es vorhersehbare Ergebnisse liefert, die zum bestehenden Web-Branding passen. Das Design wird mit gut dokumentierten standardisierten HTML-, CSS- und JavaScript-Technologien implementiert.

  • Das Layout und Design der Ausgabe entspricht genau der Website.
  • Webentwickler können sich darauf konzentrieren, mit absoluter Präzision zu gestalten.
  • .NET-Entwickler können sich auf die Anwendungslogik anstatt auf das Layout konzentrieren. Back-End-Entwickler können Layout- und Design-Aufgaben an Webdesigner delegieren.

1. Entscheiden Sie sich für die Verwendung von CSS-Medien-Typ Druck oder Bildschirm

Der Renderer von IronPDF verfügt über zwei Medienwiedergabeoptionen: Drucken (Standard) und Bildschirm. Für einen visuellen Vergleich nebeneinander sehen Sie bitte das Ende dieses Tutorials unter der Rubrik "Vergleich von Bildschirm und Drucken Beispiel".

  • CssMediaType.Print ist die Standard-Rendering-Option, die Ihr HTML für die allgemeine Verwendung mit einem Drucker optimiert. Das bedeutet, dass einige Hintergrundbilder, Symbole und andere tintenintensive Elemente auf der Seite anders gerendert oder weggelassen werden können. Diese Option ist gut für Dokumente ohne Hintergrundbilder und ist die Standard-Druckenvorschau.
  • CssMediaType.Screen ist die Rendering-Option, die dafür sorgt, dass Ihre PDFs auf Ihrem Bildschirm genau so aussehen, wie sie in Chrome angezeigt werden. Sie müssen einige Optionen in Ihrem Chrome-Browser einrichten, um die Druckenvorschau genau so aussehen zu lassen, wie IronPDF für HTML-Debugging-Zwecke rendert.
:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-1.cs
// Pixel Perfect HTML Formatting Settings
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print; // or Screen
' Pixel Perfect HTML Formatting Settings
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print ' or Screen
$vbLabelText   $csharpLabel

Wiederholte Tabellenköpfe

Wenn Sie HTML mit einer Tabelle haben, die auf mehr als einer Seite dargestellt wird, möchten Sie wahrscheinlich, dass die Tabellenköpfe auf jeder PDF-Seite wiederholt werden.

  • In diesem Fall können Sie nur Drucken CssMediaType verwenden.
  • Die Verwendung von Bildschirm weist Chrome an, die Header nur einmal auszugeben.

Vergleich von Bildschirm- und Druckbeispiel

Viele Bilder und Symbole werden im Druckmodus nicht geladen, die im Bildschirmmodus jedoch geladen werden:

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

2. Chrome einrichten

IronPDF verwendet stolz eine Chrome-Rendering-Engine. Befolgen Sie diese Schritte, damit IronPDF Ihr HTML genau so rendert, wie Sie es in Chrome sehen. Dies sind die wenigen Schritte, die vorher in Chrome erledigt werden müssen, um dies zu erreichen.

Um pixelgenaue PDFs zu erstellen, die alle Bilder, Symbole und Hintergründe enthalten, die beim Drucken normalerweise weggelassen werden, verwenden Sie unbedingt die CSS-Medienoption Bildschirm.

2a. Öffnen Sie DevTools und aktivieren Sie das Emulieren des CSS-Media-Typs auf Bildschirm/Drucken in Chrome

  1. Um dies zu tun, öffnen Sie DevTools in Chrome.

    In Chrome die Entwicklertools verwenden

  2. Drücken Sie Command+Shift+P (Mac) oder Control+Shift+P (Windows, Linux, ChromeOS), um das Befehlsmenü zu öffnen. Fangen Sie an, Rendering zu tippen, wählen Sie Show Rendering und drücken Sie Enter. DevTools zeigt die Registerkarte Rendering unten im DevTools-Fenster an. Weitere Hilfe

Gehe zu Rendering anzeigen und suche dann nach dem CSS-Medientyp

  1. Scrollen Sie nach unten und suchen Sie das Dropdown-Menü für Emulate CSS media und wählen Sie die Option Bildschirm oder Drucken. Wenn Sie sich auf einer Webseite befinden, müssen Sie möglicherweise neu laden (Strg+R), damit die Einstellungen wirksam werden.
Switch to CSS Media Type Drucken

Drucken

Switch to CSS Media Type Bildschirm

Bildschirm

2b. Öffnen Sie das Druckvorschau-Fenster (Strg+P auf Windows)

Möglicherweise müssen Sie die Papiergröße ändern und 'Hintergrundbilder drucken' im Chrome-Druckdialog aktivieren, um eine genaue Anzeige zu erhalten.

2c. Stellen Sie die richtigen Druckvorschau-Einstellungen ein

  • Bitte wählen Sie das Papierformat, das Sie in Ihrem IronPDF Projekt verwenden, z. B. A4 oder Letter.
  • Wählen Sie unter Margins die Option Custom aus und stellen Sie alle vier Seiten auf (1") einen Ein-Zoll-Rand ein.
  • Aktivieren Sie das Kontrollkästchen Background Graphics.
  • Stellen Sie sicher, dass Sie Ihren Layout auf Landscape setzen, wenn Sie ein Dokument im Querformat ausgeben möchten.

Und das war's. Sie können jetzt Ihr HTML debuggen und die Druckvorschau verwenden, um genau zu sehen, wie IronPDF Ihr Layout rendern wird.

3. IronPDF einrichten

3a. Setzen Sie den CSS-Medientyp in IronPDF

Um das Webseitendesign mit 100 % Präzision zu matchen, müssen wir den gleichen CSS-Medientyp wählen, den wir in Chrome in unserem Code eingestellt haben.

Beachten Sie, dass PdfCssMediaType.Screen Hintergründe und größere Bilder enthält, die im Format PdfCssMediaType.Print weggelassen werden können. Dieses Format ist die Standardeinstellung und wurde für Drucker entwickelt, um Tinte zu sparen.

:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-2.cs
// Example using PdfCssMediaType.Screen
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen; // or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
' Example using PdfCssMediaType.Screen
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen ' or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

3b. Stellen Sie die Renderverzögerung und das Rendertimeout angemessen ein

Das Standard-Rendering-Timeout von IronPDF beträgt 60 Sekunden. Alles, was länger dauert, wird nicht ohne Bearbeitung der Renderoptionen gerendert. Um die Standardeinstellungen zu überschreiben, müssen Sie die Option RenderingOptions.Timeout anpassen.

Beachten Sie, dass das Fehlen eines Timeout-Werts oder eine längere Renderverzögerung als der festgelegte Timeout-Wert zu einer Unable to Render PDF Ausnahme führt. Wenn Sie diesen Fehler begegnen, müssen Sie möglicherweise diese Werte erhöhen.

:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-3.cs
// Example of setting Timeout and RenderDelay options
renderer.RenderingOptions.Timeout = 90; // seconds (default is 60)
renderer.RenderingOptions.WaitFor.RenderDelay(30000); // milliseconds
$vbLabelText   $csharpLabel

Bereit zu sehen, was Sie sonst noch tun können? Schauen Sie sich unsere Tutorial-Seite hier an: Zusätzliche Funktionen

Häufig gestellte Fragen

Wie kann ich ein pixelgenaues PDF-Rendering aus HTML erreichen?

Um ein pixelgenaues PDF-Rendering aus HTML zu erreichen, können Sie den Chrome Renderer von IronPDF verwenden, der sicherstellt, dass der in Chrome-Browsern angezeigte HTML-Inhalt mit den generierten PDFs identisch ist.

Was sind die Vorteile der Verwendung von IronPDF für die Umwandlung von HTML in PDF?

IronPDF ermöglicht es Entwicklern, PDFs zu generieren, die dem visuellen Erscheinungsbild des HTML-Inhalts in Webbrowsern entsprechen und HTML5, CSS3 und JavaScript unterstützen, im Gegensatz zu vielen anderen Bibliotheken.

Wie kann ich die CSS-Medientypen in IronPDF konfigurieren?

Sie können CSS-Medientypen in IronPDF konfigurieren, indem Sie 'Druck' für Dokumente ohne Hintergründe oder 'Bildschirm' wählen, um das Aussehen auf dem Bildschirm zu entsprechen und sicherzustellen, dass die PDF-Ausgabe Ihren Anforderungen entspricht.

Welche Schritte sollte ich befolgen, um Chrome für das PDF-Rendering einzurichten?

Um Chrome für das PDF-Rendering einzurichten, öffnen Sie die DevTools, aktivieren Sie 'CSS-Medien emulieren' auf 'Bildschirm/Druck' und passen Sie die Druckvorschau-Einstellungen an, um sicherzustellen, dass das PDF dem gewünschten Layout entspricht.

Wie löse ich Rendering-Probleme mit IronPDF?

Wenn Sie auf Rendering-Probleme stoßen, wie z.B. eine 'Fehler beim Rendern von PDF'-Ausnahme, versuchen Sie, die Render-Verzögerungs- oder Render-Zeitüberschreitungseinstellungen innerhalb der IronPDF-Optionen zu erhöhen, um verbesserte Ergebnisse zu erzielen.

Kann ich IronPDF verwenden, um PDFs zu rendern, die dem Webdesign entsprechen?

Ja, IronPDF ermöglicht es Ihnen, PDFs zu rendern, die genau Ihrem Webdesign entsprechen, indem es den Google Chromium Renderer verwendet, der Unterstützung für alle modernen Webtechnologien bietet.

Warum verwendet IronPDF den Google Chromium Renderer?

IronPDF verwendet den Google Chromium Renderer, um sicherzustellen, dass HTML, das in Chrome-Browsern angezeigt wird, mit den erstellten PDFs identisch aussieht und eine konsistente und hochwertige Ausgabe liefert.

Ist IronPDF mit .NET 10 kompatibel und kann ich es in neuen .NET 10-Projekten verwenden?

Ja. IronPDF unterstützt explizit .NET 10 (sowie .NET 9, .NET 8 und ältere Versionen) und ist sofort kompatibel. Sie können .NET 10 in Ihren Projekten als Zielplattform verwenden und die HTML-zu-PDF-, Rendering-, Bearbeitungs- und Signier-APIs von IronPDF ohne zusätzliche Anpassungen nutzen.

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 18,560,885 | Version: 2026.4 gerade veröffentlicht
Still Scrolling Icon

Scrollst du immer noch?

Sie brauchen schnell einen Beweis? PM > Install-Package IronPdf
Führen Sie eine Probe aus Sehen Sie zu, wie Ihr HTML-Code in eine PDF-Datei umgewandelt wird.