1. IronPDF
  2. Fehlersuche
  3. Pixelgenaue HTML-Formatierung

Pixelgenaue HTML-Formatierung in IronPDF

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

Um Ihre PDFs perfekt aussehen zu lassen, müssen Sie ausgezeichnete HTML-Vorlagen entwickeln oder mit einem Webentwickler zusammenarbeiten, der dies für Sie tut. Dieser Fehlerbehebungsartikel stammt aus einem vollen Tutorial zu Debugging Ihres HTML.

1. Debuggen und Testen Sie Ihr 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.

Grundlagen

Dieses Codebeispiel rendert PDFs, die pixelgenau zum neuesten Chrome-Desktop-Browser sind.

// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
' Create a new ChromePdfRenderer instance
Dim renderer As New ChromePdfRenderer()

' Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print

' Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

Fortgeschrittene HTML-Entwicklung

Fortgeschrittene Chrome-Nutzer-Entwickler können 100%ige Präzision erreichen, indem sie die Standardeinstellungen von IronPDF verwenden und 'CSS-Medien emulieren > Bildschirm' aktivieren. Weitere Informationen finden Sie hier.

// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
' Create a new ChromePdfRenderer instance
Dim renderer As New ChromePdfRenderer()

' Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen

' Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

2. Vergleichen Sie das Ergebnis

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

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

Vergleich der PDF-Ergebnisse

3. Öffnen Sie das Druckvorschaufenster (Strg+P auf Windows)

Möglicherweise müssen Sie die Papiergröße ändern und das Drucken von Hintergrundbildern im Chrome-Druckdialog aktivieren.

Druckvorschaufenster

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

Sobald das Drucken in PDF in Chrome perfekt ist, wird IronPDF diesem entsprechen.

Option

5. Führen Sie IronPDF aus

Jetzt, da das HTML perfekt ist, führen Sie es durch IronPDF, und es wird identisch aussehen. Verwenden Sie {PlaceHolders}, um Kundendaten einzufügen. Die Codebeispiele unter IronPDF Beispiele werden wirklich helfen!

Wenn dieses Tutorial nicht hilft, Ihr Problem zu lösen, dann kontaktieren Sie den technischen Support, und wir werden unsere Dokumentation anpassen und verbessern, um Ihnen weiter zu helfen.

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 18,560,885 | Version: 2026.4 gerade veröffentlicht
Still Scrolling Icon

Scrollst du immer noch?

Sie brauchen schnell einen Beweis? PM > Install-Package IronPdf
Führen Sie eine Probe aus Sehen Sie zu, wie Ihr HTML-Code in eine PDF-Datei umgewandelt wird.