Perfekcyjny pikselowo format HTML w IronPDF

Zaktualizowano:10 września, 2025

Translated

View the article in English

Twoja firma wydaje zbyt wiele na roczne subskrypcje na zabezpieczenia i zgodność PDF. Rozważ IronSecureDoc, który oferuje rozwiązania do zarządzania usługami SaaS, takimi jak podpisy cyfrowe, redakcja, szyfrowanie i ochrona, wszystko za jednorazową opłatą. Wypróbuj teraz

Aby Twoje PDF-y wyglądały doskonale, musisz opracować doskonałe szablony HTML lub współpracować z web developerem, który zrobi to za Ciebie. Ten artykuł z rozwiązywania problemów pochodzi z pełnego samouczka o debugowaniu HTML.

1. Debuguj i testuj swój HTML

Możesz debugować swój HTML, CSS i JS w Chrome lub podobnej przeglądarce na pulpicie. Następnie, gdy będziesz pewny, że działa perfekcyjnie, podłącz go do IronPDF, a będzie wyglądał identycznie jak w Chrome.

Podstawowe użycie

Ten przykład kodu wyrenderuje PDF-y, które będą perfekcyjnie odwzorowane jak w najnowszej przeglądarce Chrome na pulpit.

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

Zaawansowany rozwój HTML

Zaawansowani użytkownicy deweloperzy Chrome mogą osiągnąć 100% precyzji, używając domyślnych ustawień IronPDF i włączając 'Emuluj CSS media > Ekran'. Więcej informacji można znaleźć tutaj.

// 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. Porównaj wynik

Aby porównać wynik, otwórz swój HTML w przeglądarce Chrome na pulpit.

Uwaga: Wyeksportuj każdy ciąg HTML i zasoby do samodzielnych plików HTML i edytuj je ręcznie lub poproś o pomoc web developera.

Porównanie wyników PDF

3. Otwórz okno podglądu wydruku (Ctrl+P w systemie Windows)

Możesz potrzebować zmienić rozmiar papieru i włączyć drukowanie obrazów tła w oknie dialogowym druku w Chrome.

Okno podglądu wydruku

4. Wybierz opcję 'Zapisz jako PDF'

Po zakończeniu drukowania do PDF w Chrome, IronPDF dopasuje go.

Opcja Zapisz jako PDF

5. Uruchom IronPDF

Teraz kod HTML jest idealny, uruchom go w IronPDF, a będzie wyglądał identycznie. Użyj {PlaceHolders}, aby połączyć dane klienta. Przykłady kodu na stronie IronPDF Examples będą bardzo pomocne!

Jeśli ten samouczek nie pomoże w rozwiązaniu problemu, prosimy o kontakt z działem pomocy technicznej, a my dostosujemy i ulepszymy naszą dokumentację, aby zapewnić dalszą pomoc.

Curtis Chau

Czat z zespołem inżynierów teraz

Autor tekstów technicznych

Curtis Chau posiada tytuł licencjata z informatyki (Uniwersytet Carleton) i specjalizuje się w front-endowym rozwoju, z ekspertką w Node.js, TypeScript, JavaScript i React. Pasjonuje się tworzeniem intuicyjnych i estetycznie przyjemnych interfejsów użytkownika, Curtis cieszy się pracą z nowoczesnymi frameworkami i tworzeniem dobrze zorganizowanych, atrakcyjnych wizualnie podrę...

Czytaj więcej

Gotowy, aby rozpocząć?

Nuget Pliki do pobrania 18,135,201 | Wersja: 2026.4 just released