Debuggen von HTML in Chrome zur Erstellung pixelgenauer PDFs

Chaknith Bin

22. September 2021

Aktualisiert 24. Dezember 2024

Teilen Sie:

Translated

View the article in English

Als Entwickler von IronPDF wissen wir, dass die von IronPDF erstellten PDF-Dokumente nicht nur perfekt aussehen müssen, sondern auch genau den Erwartungen unserer Kunden entsprechen müssen. 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 diesem Leitfaden werden wir Ihnen einige Einstellungen erläutern, die Sie in Chrome und IronPDF vornehmen müssen, um dies zu erreichen.

Um es klarzustellen: Viele der von Wettbewerbern implementierten "HTML zu PDF"-Technologien 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

Download PDF

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

Funktionen der Iron Software-Bibliotheken Verwendung der Chrome-Rendering-Engine von IronPDF Aspose vs IronPDF Analyse iText vs IronPDF Vergleich

Der optimierte Chrome-Renderer von IronPDF ist besser als Chrome

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

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 das Design der Ausgabe müssen exakt mit der Website übereinstimmen.
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 hat zwei Medien-Renderoptionen: Print (Standard) und Screen. Für einen visuellen Vergleich nebeneinander sehen Sie bitte das Ende dieses Abschnitts. Unter dem Abschnitt "Vergleich von Bildschirm und Druckbeispiel".

CssMediaType.Print ist die Standard-Wiedergabeoption, die Ihr HTML für den allgemeinen Druckgebrauch 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, die es ermöglicht, dass 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

$vbLabelText $csharpLabel

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 Print CssMediaType verwenden.
Durch die Verwendung von Screen wird Chrome angewiesen, die Kopfzeilen nur einmal zu drucken.

Vergleich von Bildschirm und Druck Beispiel

Viele Bilder und Symbole werden im Print-Modus nicht geladen, die im Screen-Modus geladen werden:

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 erstellen, die alle Bilder, Symbole und Hintergründe enthalten, die normalerweise im Druckformat weggelassen werden, sollten Sie die CSS-Medienoption Screen verwenden.

2a.

Öffnen Sie DevTools und setzen Sie Enable Emulate CSS Media to Screen/Print in Chrome

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

Drücken Sie Command+Shift+P (Mac) oder Control+Shift+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. Weitere Hilfe zu Renderingeinstellungen
Navigieren Sie nach unten und finden 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 die Seite neu laden (Strg+R), damit die Einstellungen wirksam werden.

Drucken

Bildschirm

2b.

Öffnen Sie das Druckvorschaufenster (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 die Papiergröße aus, die Sie in Ihrem IronPDF-Projekt verwenden, wie z. B. A4 oder Letter.
Unter dem Margins-Dropdown-Menü wählen Sie Custom und stellen Sie alle vier Seiten auf einen Rand von (1") einem Zoll ein.
Aktivieren Sie das Background Graphics-Kontrollkästchen.
Stellen Sie sicher, dass Sie Ihr Layout auf Landscape einstellen, wenn Sie beabsichtigen, ein Querformatdokument auszugeben.

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 beinhaltet, die im PdfCssMediaType.Print-Format, welches standardmäßig für Drucker zur Tinteneinsparung konzipiert ist, weggelassen werden können.

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

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 Rendering-Verzögerung hingegen 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 das Fehlen eines festgelegten Timeouts oder eine Renderverzögerung, die länger als das festgelegte Timeout ist, eine "Unable to Render PDF"-Ausnahme erzeugen wird. 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

$vbLabelText $csharpLabel

Chaknith Bin

Jetzt mit dem Ingenieurteam chatten

Software-Ingenieur

Chaknith arbeitet an IronXL und IronBarcode. Er hat tiefgehende Expertise in C# und .NET und hilft, die Software zu verbessern und Kunden zu unterstützen. Seine Erkenntnisse aus Benutzerinteraktionen tragen zu besseren Produkten, Dokumentation und einem insgesamt besseren Erlebnis bei.