1. IronPDF
  2. Anleitungen
  3. HTML mit Chrome debuggen
Wie man HTML in Chrome debuggt, um pixelgenaue PDFs zu erstellen

How to Debug HTML in Chrome to Create Pixel Perfect PDFs

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

Als Entwickler von IronPDF verstehen wir, dass PDF-Dokumente, die mit IronPDF erstellt wurden, nicht nur perfekt aussehen müssen, sondern auch genauso, wie unsere Kunden es erwarten. Um pixelgenaue PDFs zu erzeugen, müssen Sie hervorragende HTML-Vorlagen erstellen oder mit einem Webentwickler zusammenarbeiten, um sie für Sie zu erstellen. IronPDF bietet Möglichkeiten, Ihre PDFs pixelgenau an Ihr HTML zu rendern und sicherzustellen, dass sie identisch mit ihrer Darstellung in Chrome erscheinen, dank unseres Chrome-Renderers.

als-überschrift:2(Schnellstart: Pixelgenaue PDFs mit IronPDF erstellen)

Mit dem Chrome-Renderer von IronPDF ist die Umwandlung von HTML in PDF ein Kinderspiel. Dieser Leitfaden hilft Entwicklern, pixelgenaue PDF-Dokumente zu erstellen, die ihre HTML-Designs genau spiegeln, wie sie in einem Chrome-Browser erscheinen. Der Prozess stellt sicher, dass HTML5-, CSS3- und JavaScript-Elemente vollständig unterstützt werden, im Gegensatz zu vielen Konkurrenten. Befolgen Sie diese Schritte, um schnell PDFs zu erstellen, die Ihr Web-Branding und Ihre Designintegrität mühelos beibehalten.

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.

    IronPdf.ChromePdfRenderer.RenderHtmlAsPdf("<html><body>Hello World</body></html>").SaveAs("output.pdf");

  3. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    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 Leitfaden führen wir Sie durch einige Einstellungen, die Sie in Chrome und in IronPDF anwenden müssen, um dies zu erreichen.

Um klarzustellen, viele von Konkurrenten behauptete Technologien von "HTML zu PDF" entsprechen nicht den W3C-Standards oder unterstützen sogar HTML5, CSS3 oder JavaScript und verwenden zugrunde liegende Renderer wie wkhtmltopdf im C#-Vergleich.

IronPDF im Vergleich zu Wettbewerbern

class="competitors-section__wrapper-even-1">
class="competitors__card">

class="competitors__header">IronPDF

IronPDF

class="competitors__download-link"> PDF herunterladen

class="competitors__card">

class="competitors__header">Vanilla Chrome

Vanilla Chrome

class="competitors__download-link"> PDF herunterladen

class="competitors-section__wrapper">
class="competitors__card">

class="competitors__header">Aspose.PDF

Aspose.PDF

class="competitors__download-link"> PDF herunterladen

class="competitors__card">

class="competitors__header">iText

iText

class="competitors__download-link"> PDF herunterladen

class="competitors__card">

class="competitors__header">wkhtmltopdf

wkhtmltopdf

class="competitors__download-link"> PDF herunterladen

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

Features of Iron Software Libraries | Using IronPDF's Chrome Rendering Engine | Aspose vs IronPDF Analysis | iText vs IronPDF Comparison

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 von abgeschnittenen Schaltflächen und Text in Chrome:

class="content-img-align-center">
class="center-image-wrapper"> Schaltflächen in Chrome abgeschnitten, aber nicht in IronPDF

Ein weiteres Beispiel für abgeschnittenen Text in Chrome:

class="content-img-align-center">
class="center-image-wrapper"> Text in Chrome abgeschnitten, aber nicht in IronPDF

Warum HTML zu PDF nutzen?

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 das Design des Outputs entsprechen exakt 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 des CSS-Medientyps Print oder Screen

Der Renderer von IronPDF hat zwei Medien-Rendering-Optionen: Print (Standard) und Screen. Für einen visuellen Vergleich Seite an Seite siehe bitte das Ende dieses Abschnitts. Unter dem Abschnitt „Vergleich von Bildschirm- und Druckbeispiel“.

  • CssMediaType.Print ist die Standardrenderoption, die Ihr HTML für den allgemeinen Gebrauch 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-Printvorschau.
  • CssMediaType.Screen ist die Renderer-Option, die es ermöglicht, dass Ihre PDFs genau so aussehen wie auf Ihrem Bildschirm in Chrome. Sie müssen einige Optionen in Ihrem Chrome-Browser einrichten, um die Printvorschau genau so aussehen zu lassen, wie IronPDF für HTML-Debugging-Zwecke rendert.
:path=/static-assets/pdf/content-code-examples/how-to/pixel-perfect-html-to-pdf-1.cs
// Pixel Perfect HTML Formatting Settings
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print; // or Screen
' Pixel Perfect HTML Formatting Settings
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = 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 die Print CssMediaType verwenden.
  • Die Verwendung von Screen weist Chrome an, die Header nur einmal zu drucken.

Vergleich von Screen und Print Beispiel

Viele Bilder und Icons werden im Print-Modus nicht geladen, die im Screen-Modus 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 rendern, die alle Bilder, Icons und Hintergründe enthalten, die normalerweise im Druckformat ausgelassen werden, stellen Sie sicher, dass Sie die Screen-CSS-Medien-Option verwenden.

2a. Öffnen Sie DevTools und setzen Sie Aktivieren Emulate CSS Media auf Screen/Print in Chrome

  1. Um dies zu tun, öffnen Sie innerhalb von Chrome DevTools in Chrome.
Verwenden Sie Inspect in Chrome
  1. Drücken Sie Command+Shift+P (Mac) oder Strg+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. Mehr Hilfe zu Rendereinstellungen
Gehe zu Show Rendering und dann Suche 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 Screen oder Print. Wenn Sie auf einer Webseite sind, müssen Sie möglicherweise die Seite neu laden (Strg+R), damit die Einstellungen wirksam werden.
class="competitors-section__wrapper-even-1">
Wechseln zu CSS Media Type Print

Print

Wechseln zu CSS Media Type Screen

Screen

2b. Öffnen Sie das Druckvorschaufenster (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.

Denken Sie daran, dass PdfCssMediaType.Screen Hintergründe und größere Bilder beinhaltet, die im PdfCssMediaType.Print-Format ausgelassen werden können, das standardmäßig eingestellt und für Drucker optimiert ist, um Tinte zu sparen.

:path=/static-assets/pdf/content-code-examples/how-to/pixel-perfect-html-to-pdf-2.cs
// Example using PdfCssMediaType.Screen
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Screen; // or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
' Example using PdfCssMediaType.Screen
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = 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. Wenn der Renderprozess länger dauert, wird eine Timeout-Ausnahme ausgelöst. Um die Standardeinstellungen außer Kraft zu setzen, müssen Sie die Option RenderingOptions.Timeout anpassen. Der Wert der Renderverzögerung hingegen ist die Zeit, die IronPDF warten soll, bevor es mit dem Rendern beginnt. Diese Wartezeit ist entscheidend für Ressourcen wie Bilder, Schriftarten und JavaScript, um richtig ausgeführt zu werden.

:path=/static-assets/pdf/content-code-examples/how-to/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
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

Beachten Sie, dass das Nicht-Setzen eines Zeitlimits oder das Setzen einer Renderverzögerung, die länger ist als das eingestellte Zeitlimit, eine "Unable to Render PDF" Ausnahme produzieren wird. Wenn Sie diesen Fehler begegnen, müssen Sie möglicherweise diese Werte erhöhen.

Hinweis:Aspose, iText, wkhtmltopdf und PuppeteerSharp sind eingetragene Marken der jeweiligen Inhaber. Diese Seite ist nicht mit, von oder durch Aspose, iText, wkhtmltopdf oder Puppeteer gesponsert oder verbunden. Alle Produktnamen, Logos und Marken sind Eigentum ihrer jeweiligen Inhaber. Vergleiche dienen nur zu Informationszwecken und basieren auf öffentlich zugänglichen Informationen zum Zeitpunkt des Schreibens.

Häufig gestellte Fragen

Wie kann ich pixelgenaue PDFs aus HTML erstellen?

Sie können pixelgenaue PDFs aus HTML mit dem Chrome-Renderer von IronPDF erstellen, der sicherstellt, dass das HTML, das Sie in Chrome-Browsern sehen, in Ihren PDFs genauso aussieht.

Welche Bedeutung hat die Verwendung des Chrome-Renderers bei der PDF-Erstellung?

Der Chrome-Renderer in IronPDF ermöglicht das genaue Rendern von HTML5, CSS3 und JavaScript und stellt sicher, dass Ihre PDFs so erscheinen, wie sie in Chrome-Browsern angezeigt werden, im Gegensatz zu einigen anderen .NET-Bibliotheken.

Wie wähle ich zwischen den CSS-Medientypen 'Print' und 'Screen' für das PDF-Rendering?

In IronPDF verwenden Sie den CSS-Medientyp 'Print' für druckerfreundliche Dokumente und 'Screen' für eine darstellungsgerechte Wiedergabe. Passen Sie diese Einstellungen im ChromePdfRenderer an, um Ihre Anforderungen zu erfüllen.

Warum ist das korrekte Einrichten von Chrome wichtig für das PDF-Rendering?

Das korrekte Einrichten von Chrome ist entscheidend für genaue Druckvorschauen, die dazu beitragen, pixelgenaue PDF-Ausgaben mit IronPDF zu erreichen, indem sichergestellt wird, dass Ihre Entwicklungsumgebung Produktionseinstellungen widerspiegelt.

Wie kann ich Renderverzögerungs- und Zeitüberschreitungs-Einstellungen in IronPDF anpassen?

Passen Sie die Renderverzögerungs- und Zeitüberschreitungs-Einstellungen in IronPDF über RenderingOptions.RenderDelay und RenderingOptions.Timeout im ChromePdfRenderer an, um Ladezeiten der Assets zu verwalten.

Was soll ich tun, wenn ich auf 'PDF kann nicht gerendert werden'-Fehler stoße?

Wenn Sie auf 'PDF kann nicht gerendert werden'-Fehler stoßen, liegt dies möglicherweise an einer Renderverzögerung, die länger als die festgelegte Zeitüberschreitung ist. Erhöhen Sie die Renderverzögerungs- und Zeitüberschreitungswerte in IronPDF, um dieses Problem zu lösen.

Wie können sich wiederholende Tabellenköpfe beim PDF-Rendering behandelt werden?

Um sich wiederholende Tabellenköpfe über Seiten in IronPDF zu handhaben, verwenden Sie den CSS-Medientyp 'Print', der sicherstellt, dass Köpfe während des PDF-Renderings auf jeder Seite wiederholt werden.

Welche Layouteinstellungen sollten in Chrome für eine genaue PDF-Erstellung konfiguriert werden?

Wählen Sie in der Druckvorschau von Chrome die richtige Papiergröße, setzen Sie die Ränder auf benutzerdefiniert mit einem Zoll an allen Seiten, aktivieren Sie Hintergrundgrafiken und wählen Sie die Ausrichtung als Querformat, wenn nötig, für eine genaue PDF-Erstellung.

Ist IronPDF mit .NET 10 kompatibel, und welchen Vorteil bietet die Verwendung von .NET 10 für die pixelgenaue HTML-zu-PDF-Konvertierung?

Ja – IronPDF ist vollständig mit .NET 10 kompatibel. Dies führt zu Laufzeit- und JIT-Leistungsverbesserungen (wie der Devirtualisierung von Array-Schnittstellenmethoden und der optimierten Stapelzuweisung), die die PDF-Generierung beschleunigen und effizienter gestalten. Durch die Verwendung von .NET 10 mit IronPDF profitieren Ihre HTML-zu-PDF-Workflows (einschließlich des Renderns mit dem Chrome Renderer, der Verarbeitung von Medientypeinstellungen, Verzögerungen, Timeouts usw.) von geringerer Latenz, niedrigerem Speicherverbrauch und einem insgesamt reibungsloseren Betrieb.

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