1. IronPDF
2. Anleitungen
3. HTML mit Chrome debuggen

Debuggen von HTML in Chrome zur Erstellung pixelgenauer PDFs

Als Entwickler von IronPDF wissen wir, dass mit IronPDF erstellte PDF-Dokumente nicht nur perfekt aussehen müssen, sondern auch genau so, wie unsere Kunden es erwarten. Um pixelgenaue PDFs zu erhalten, müssen Sie ausgezeichnete HTML-Vorlagen entwickeln oder mit einem Webentwickler zusammenarbeiten, der sie für Sie erstellt. IronPDF bietet Optionen, um Ihre PDFs pixelgenau in Ihr HTML zu rendern und sicherzustellen, dass sie dank unseres Chrome Renderers identisch mit der Anzeige in Chrome erscheinen.

Was ist der Chrome Renderer von IronPDF?

Das unterscheidet IronPDF von anderen .NET PDF-Bibliotheken

IronPDF hebt sich auf dem Markt dadurch ab, dass es den Google Chromium Renderer verwendet. Das bedeutet, dass der HTML-Code, den Sie in Chrome-Browsern sehen, genau so aussieht wie der in unseren PDFs. In dieser Anleitung werden wir Ihnen einige Einstellungen zeigen, die Sie in Chrome und IronPDF vornehmen müssen, um dies zu erreichen.

Um es klar zu sagen: Viele angebliche "HTML to PDF"-Technologien von Wettbewerbern entsprechen nicht den W3C-Standards oder unterstützen nicht einmal HTML5, CSS3 oder JavaScript und verwenden zugrunde liegende Renderer wie wkhtmltopdf.

IronPDF im Vergleich zu Wettbewerbern

IronPDF

PDF herunterladen

Vanille-Chrome

PDF herunterladen

Aspose.PDF

PDF herunterladen

iText

PDF herunterladen

wkhtmltopdf

PDF herunterladen

Eine vollständige Liste der Vergleiche mit anderen Produkten finden Sie in unseremblog.

Eigenschaften IronPDFs Chrome Renderer Aspose gegenüber IronPDF iText gegenüber IronPDF

IronPDFs optimierter Chrome-Renderer ist besser als Chrome

Zwei Beispiele dafür, dass IronPDF Chrome selbst übertrifft. Schaltflächen und Text, die in Chrome auf zwei Seiten aufgeteilt würden, bleiben in IronPDF erhalten.

Beispiel für das Abschneiden von Schaltflächen und Text in Chrome:

Ein weiteres Beispiel für abgeschnittenen Text in Chrome:

Warum sollte man HTML in PDF umwandeln?

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

• Das Layout und Design der Ausgabe entspricht genau der Website.
• Webentwickler können sich auf die Gestaltung mit absoluter Präzision konzentrieren.
• .NET-Entwickler können sich auf die Anwendungslogik und nicht auf das Layout konzentrieren. Backend-Entwickler können Layout- und Designaufgaben an Web-Designer delegieren.

1. Entscheiden Sie sich für den CSS-Medientyp Print oder Screen

Der Renderer von IronPDF verfügt über zwei Optionen für die Medienwiedergabe: Drucken (standard) und Screen. Einen visuellen Seite-an-Seite-Vergleich finden Sie unterdas Ende dieses Abschnitts. Unter dem Abschnitt "Vergleich von Bildschirm und Druckbeispiel".

• cssMediaType.Print" ist die Standard-Rendering-Option, die Ihr HTML für die allgemeine Verwendung mit einem Drucker optimiert. Dies bedeutet, dass einige Hintergrundbilder, Symbole und andere tintenintensive Elemente auf der Seite möglicherweise anders dargestellt oder weggelassen werden. Diese Option eignet sich für Dokumente ohne Hintergrundbilder und ist die Standard-Druckvorschau.
• cssMediaType.Screen" ist die Rendering-Option, mit der Ihre PDFs genau so aussehen, wie sie in Chrome auf Ihrem Bildschirm erscheinen. Sie müssen in Ihrem Chrome-Browser einige Optionen einrichten, damit die Druckvorschau genau so aussieht, wie IronPDF sie für HTML-Debugging-Zwecke darstellt.

: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

Wiederholte Tabellenüberschriften

Wenn Sie HTML mit einer Tabelle haben, die sich über mehr als eine Seite erstreckt, möchten Sie wahrscheinlich, dass die Tabellenüberschriften auf jeder PDF-Seite wiederholt werden.

• In diesem Fall können Sie nur den CssMediaType Print verwenden.
• Die Verwendung von Screen weist Chrome an, die Kopfzeilen nur einmal zu drucken.

Vergleich von Bildschirm und Druck Beispiel

Viele Bilder und Symbole werden im "Druck"-Modus nicht geladen, im "Bildschirm"-Modus aber schon:

2. Chrome einrichten

IronPDF ist stolz darauf, eine Chrome Rendering Engine zu verwenden. 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 durchgeführt werden müssen, um dies zu erreichen.

Um pixelgenaue PDFs zu rendern, die alle Bilder, Symbole und Hintergründe enthalten, die im Druckformat normalerweise weggelassen werden, sollten Sie die CSS-Medienoption "Bildschirm" verwenden.

2a.

Öffnen Sie DevTools und setzen Sie Enable Emulate CSS media in Chrome auf Screen/Print

1. Um dies zu tun, müssen Sie in ChromedevTools öffnen.

2. Drücken Sie Befehl+Umschalt+P(Mac) oder Strg+Umschalt+P(Windows, Linux, ChromeOS) um das Befehlsmenü zu öffnen. Beginnen Sie mit der Eingabe von Rendering, wählen Sie Rendering anzeigen und drücken Sie die Eingabetaste. DevTools zeigt die Registerkarte Rendering am unteren Rand des DevTools-Fensters an. (mehr Hilfe)

   
3. Navigieren Sie nach unten und suchen Sie das Dropdown-Menü für "CSS-Medien emulieren" 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.
   

   Drucken

   

   Bildschirm

2b.

Öffnen Sie das Fenster Druckvorschau(Strg+P unter Windows)

Möglicherweise müssen Sie das Papierformat ändern und die Option "Hintergrundbilder drucken" im Chrome-Dialogfeld "Drucken" aktivieren, um eine genaue Anzeige zu erhalten.

2c.

Legen Sie die richtigen Einstellungen für die Druckvorschau fest

• Bitte wählen Sie das Papierformat, das Sie in Ihrem IronPDF-Projekt verwenden, z. B. "A4" oder "Letter".
• Wählen Sie unter der Dropdown-Liste "Ränder" die Option "Benutzerdefiniert" und setzen Sie alle vier Seiten auf(1") ein Zoll Rand.
• Aktivieren Sie das Kontrollkästchen Hintergrundgrafik.

• Stellen Sie sicher, dass Sie Ihr Layout auf Landscape setzen, wenn Sie ein Dokument im Querformat ausgeben möchten.

  Und das ist alles. Sie können nun Ihr HTML debuggen und die Druckvorschau verwenden, um genau zu sehen, wie IronPDF Ihr Layout darstellen wird.

3. IronPDF einrichten

3a.

Einstellen des CSS-Medientyps in IronPDF Um das Design der Webseite mit 100-prozentiger Genauigkeit anzupassen, müssen wir in unserem Code denselben CSS-Medientyp wählen, den wir in Chrome eingestellt haben.

Erinnern Sie sich daran, dass PdfCssMediaType.Screen Hintergründe und größere Bilder enthält, die im Format PdfCssMediaType.Print weggelassen werden können, das der Standard ist und für Drucker entwickelt wurde, 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

3b.

Angemessene Einstellung von Renderverzögerung und Renderzeitüberschreitung IronPDFs Standard-Rendering-Timeout beträgt 60 Sekunden. Dauert der Rendering-Prozess länger als diese Zeit, wird eine Timeout-Ausnahme ausgelöst. Um die Standardeinstellungen außer Kraft zu setzen, müssen Sie die Option RenderingOptions.Timeout anpassen. Der Wert für die Renderverzögerung ist die Zeit, die IronPDF warten soll, bevor es mit dem Rendern beginnt. Diese Wartezeit ist entscheidend dafür, dass Elemente wie Bilder, Schriftarten und JavaScript-Code ordnungsgemäß ausgeführt werden können.

Beachten Sie, dass eine Verzögerung des Rendervorgangs, die länger ist als die eingestellte Zeit, zu einer "Unable to Render PDF" Ausnahme. Wenn dieser Fehler also auftritt, müssen Sie diese Werte möglicherweise erhöhen.

: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

• WaitFor und JavaScript (Code-Beispiel)
• WaitFor (API-Referenz)