Debuggen von HTML in Chrome zur Erstellung pixelgenauer PDFs

Chaknith Bin

22. September 2021

Aktualisiert 20. Oktober 2024

Teilen Sie:

Translated

View the article in English

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. Damit Ihre PDFs pixelgenau aussehen, müssen Sie ausgezeichnete HTML-Vorlagen entwickeln oder mit einem Webentwickler zusammenarbeiten, der dies für Sie erledigt. IronPDF verfügt über die Optionen, Ihre PDFs so zu rendern, dass sie pixelgenau mit Ihrem HTML-Code übereinstimmen und dank unseres Chrome Renderers identisch mit der Darstellung 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 Tutorial werden wir Ihnen einige Einstellungen zeigen, die Sie in Chrome und IronPDF vornehmen müssen, um dies zu erreichen.

Um es klarzustellen, viele als "HTML in PDF" bezeichnete Technologien, die von Wettbewerbern implementiert werden, entsprechen weder den W3C-Standards noch unterstützen sie HTML5, CSS3 oder JavaScript und verwenden zugrunde liegende Renderer wie wkhtmltopdf.

IronPDF im Vergleich zu Wettbewerbern

Download PDF

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

Funktionen IronPDFs Chrome Renderer Aspose vs IronPDF iText vs 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 die Umwandlung von HTML in PDF, weil sie vorhersehbare Ergebnisse liefert, die dem bestehenden Web-Branding entsprechen. 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 hat zwei Medien-Renderoptionen: Print (Standard) und Screen. Einen visuellen Seite-an-Seite-Vergleich finden Sie am Ende dieses Tutorials. 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/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 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 Druckmodus nicht geladen, im Bildschirmmodus jedoch 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 Pixel Perfect PDFs zu rendern, die alle Bilder, Symbole und Hintergründe enthalten, die normalerweise im Druckformat weggelassen werden, verwenden Sie die CSS-Media-Option Screen.

2a.

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

Um dies zu tun, öffnen Sie innerhalb von Chrome DevTools.

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)
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/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.

Angemessene Einstellung von Renderverzögerung und Renderzeitüberschreitung

IronPDFs Standard-Rendering-Timeout beträgt 60 Sekunden. Alles, was länger dauert, wird nicht gerendert, ohne dass die Rendering-Optionen bearbeitet werden.

Um die Standardeinstellungen außer Kraft zu setzen, müssen Sie die Option RenderingOptions.Timeout anpassen.

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/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

IRON VB CONVERTER ERROR developers@ironsoftware.com

$vbLabelText $csharpLabel

RenderDelay und JavaScript (Code-Beispiel)
RenderDelay (API-Referenz)
Timeout (API-Referenz)

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.