Pixelgenaue HTML-Formatierung in IronPDF

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

Damit Ihre PDFs perfekt aussehen, müssen Sie ausgezeichnete HTML-Vorlagen entwickeln oder mit einem Webentwickler zusammenarbeiten, der dies für Sie erledigt. Dieser Artikel zur Fehlersuche stammt aus einem vollständigen Tutorial zum Debuggen Ihres HTML.

1. Debuggen und Testen von HTML

Sie können Ihr HTML, CSS und JS in Ihrem Chrome oder einem ähnlichen Desktop-Browser debuggen. Wenn Sie dann wissen, dass es perfekt funktioniert, verbinden Sie es mit IronPDF, und es wird genauso aussehen wie in Chrome.

Grundlegende Verwendung

Dieses Codebeispiel rendert PDFs, die für den neuesten Chrome-Desktop-Browser pixelgenau sind.

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

Fortgeschrittene HTML-Entwicklung

Fortgeschrittene Chrome-Entwickler können 100%ige Präzision erreichen, indem sie die Standardeinstellungen von IronPDF verwenden und 'Emulate CSS media > Screen' aktivieren https://developer.chrome.com/docs/devtools/css/print-preview/

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

2. Vergleichen Sie das Ergebnis

Um das Ergebnis zu vergleichen, öffnen Sie Ihre HTML-Datei im Chrome-Desktop-Webbrowser.

Hinweis: Exportieren Sie alle HTML-Strings und Assets in eigenständige HTML-Dateien und bearbeiten Sie sie manuell, oder bitten Sie einen Webentwickler um Hilfe

File QHUUeuiG91 related to 2. Vergleichen Sie das Ergebnis

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

Möglicherweise müssen Sie das Papierformat ändern und den Druck von Hintergrundbildern im Chrome-Druckdialog aktivieren.

File 9xs8GDjzqz related to 3. Öffnen Sie das Fenster Druckvorschau (Strg+P unter Windows)

4. Wählen Sie die Option "Als PDF speichern"

Sobald Print to PDF in Chrome perfekt ist, wird IronPDF es nachmachen.

File 00sfd2abQl related to 4. Wählen Sie die Option "Als PDF speichern"

5. IronPDF ausführen

Jetzt ist der HTML-Code perfekt. Wenn Sie ihn in IronPDF ausführen, sieht er identisch aus. Verwenden Sie {PlaceHolders}, um Kundendaten einzufügen. Die Codebeispiele unter https://ironpdf.com/examples/using-html-to-create-a-pdf werden wirklich helfen!

Wenn dieses Tutorial Ihr Problem nicht löst, wenden Sie sich bitte an den Engineering Support, und wir werden unsere Dokumentation anpassen und verbessern, um Sie weiter zu unterstützen.