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

HTML in Chrome debuggen, um pixelgenaue PDFs in C# zu erstellen

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: Erstellen Sie pixelgenaue PDFs mit IronPDF

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.

Nuget IconLegen Sie jetzt mit NuGet los, um PDFs zu erstellen:

  1. Installieren Sie IronPDF mit dem NuGet-Paketmanager.

    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.Drucken;
Renderer.RenderHtmlAsPdf("<html>Your HTML content here</html>").SaveAs("output.pdf");

  3. Bereitstellen zum Testen in Ihrer Live-Umgebung

    Beginnen Sie noch heute mit der Nutzung von IronPDF in Ihrem Projekt – 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.

Um es klarzustellen, viele angebliche "HTML zu PDF"-Technologien, die von Mitbewerbern implementiert wurden, entsprechen nicht den W3C-Standards oder unterstützen HTML5, CSS3 oder JavaScript nicht und verwenden 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 in Chrome abgeschnitten, aber nicht in IronPDF

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

Text 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 hat zwei Medien-Rendering-Optionen: 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.Drucken 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.Bildschirm ist die Rendering-Option, die es Ihren PDFs ermöglicht, genau so auszusehen, wie sie in Chrome auf Ihrem Bildschirm erscheinen. 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
$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 den Drucken CssMediaType verwenden.
  • Die Verwendung von Bildschirm weist Chrome an, die Köpfe nur einmal zu drucken.

Vergleich von Bildschirm- und Druckbeispiel

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

Beispiel für Drucken 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 Pixelperfekte PDFs zu rendern, die alle Bilder, Symbole und Hintergründe enthalten, die normalerweise im Druckformat weggelassen werden, verwenden Sie unbedingt die Bildschirm CSS-Media-Option.

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.

Verwenden Sie Inspect in Chrome

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

Gehen Sie zu Show Rendering und dann Find CSS Media Type

  1. Navigieren Sie nach unten und finden 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 die Papiergröße, die Sie in Ihrem IronPDF-Projekt verwenden, wie A4 oder Letter.
  • Wählen Sie unter dem Margins Dropdown Custom und setzen Sie alle vier Seiten auf (1") einen Zoll Rand.
  • Aktivieren Sie das Background Graphics Kontrollkästchen.
  • Stellen Sie sicher, dass Sie Ihr Layout auf Landscape setzen, wenn Sie beabsichtigen, ein Querformatdokument auszugeben.

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.

Erinnern Sie sich, dass PdfCssMediaType.Bildschirm Hintergründe und größere Bilder enthält, die im PdfCssMediaType.Drucken-Format, das standardmäßig ist und für Drucker konzipiert ist, um Tinte zu sparen, möglicherweise weggelassen werden.

: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;
$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 außer Kraft zu setzen, müssen Sie die Option RenderingOptions.Timeout anpassen.

Denken Sie daran, dass keine Zeitüberschreitung oder eine Renderverzögerung, die länger ist als die eingestellte Zeitüberschreitung, zu einer Unable to Render PDF Exception 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 17,012,929 | Version: 2025.12 gerade veröffentlicht