1. IronPDF
  2. Samouczki
  3. Debugowanie HTML w Chrome
Jak konwertować HTML na PDF za pomocą C# w .NET 8 | IronPDF

How to Debug HTML in Chrome to Create Pixel Perfect PDFs in C

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

Jako deweloperzy IronPDF wiemy, że dokumenty PDF utworzone przez IronPDF nie tylko muszą wyglądać perfekcyjnie, ale także muszą wyglądać dokładnie tak, jak oczekują tego nasi klienci. Aby Twoje PDF-y wyglądały doskonale pikselowo, musisz opracować doskonałe szablony HTML lub współpracować z programistą sieciowym, który to zrobi za Ciebie. IronPDF ma opcje, aby renderować Twoje PDF-y jako doskonale pikselowe w stosunku do Twojego HTML i wyglądać identycznie jak w Chrome dzięki naszemu rendererowi Chrome.

Szybki start: Tworzyć doskonale pikselowe PDF-y za pomocą IronPDF

Bez wysiłku przekształcaj swój HTML w doskonale pikselowe PDF-y, używając potężnego Chrome Renderer w IronPDF. Ten szybki przewodnik pomoże osiągnąć precyzyjne i przewidywalne wyniki PDF-owe, wykorzystując pełne wsparcie IronPDF dla HTML5, CSS3 i JavaScript. Dzięki kilku liniom kodu możesz renderować zawartość HTML dokładnie tak, jak pojawia się w Chrome, zapewniając bezproblemową zmianę z sieci na PDF. Idealne dla programistów, którzy chcą zachować dokładność układu, nie rezygnując z łatwości obsługi.

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Skopiuj i uruchom ten fragment kodu.

    var Renderer = new IronPdf.ChromePdfRenderer();
Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.PRINT;
Renderer.RenderHtmlAsPdf("<html>Your HTML content here</html>").SaveAs("output.pdf");

  3. Wdrożenie do testowania w środowisku produkcyjnym

    Rozpocznij używanie IronPDF w swoim projekcie już dziś z darmową wersją próbną

    arrow pointer

Czym jest renderer Chrome firmy IronPDF?

Co czyni IronPDF unikatowym wśród innych bibliotek PDF dla .NET

IronPDF wyróżnia się na rynku, ponieważ wykorzystuje Google Chromium Renderer, co oznacza, że HTML, który widzisz w przeglądarkach Chrome, będzie wyglądał dokładnie tak samo, jak to, co widzisz w naszych PDF-ach. W tym samouczku przeprowadzimy Cię przez niektóre ustawienia, które będziesz musiał zastosować w Chrome i w IronPDF, aby to osiągnąć.

Dla jasności, wiele rzekomych technologii "HTML do PDF" wdrożonych przez konkurentów nie spełnia standardów W3C, a nawet nie wspiera HTML5, CSS3 czy JavaScript, i używa podstawowych rendererów takich jak wkhtmltopdf.

IronPDF w porównaniu z konkurencją

IronPDF

IronPDF

Pobierz plik PDF

Vanilla Chrome

Vanilla Chrome

Pobierz plik PDF

Aspose.PDF

Aspose.PDF

Pobierz plik PDF

iText

iText

Pobierz plik PDF

wkhtmltopdf

wkhtmltopdf

Pobierz plik PDF

Aby zobaczyć pełną listę porównań z innymi produktami, zobacz nasz blog.

[pFeatures related to IronPDF w porównaniu z konkurencją Funkcje] | Renderer Chrome IronPDF | Aspose kontra IronPDF| iText kontra IronPDF

Optymalizowany Chrome Renderer IronPDF jest lepszy niż Chrome

Dwa przykłady, w których IronPDF przewyższa sam Chrome. Przyciski i tekst, które w przeciwnym razie zostałyby podzielone na dwie strony w Chrome, pozostają nienaruszone w IronPDF.

Przykład przycinania przycisków i tekstu w Chrome

Przycisk ucięty w przeglądarce Chrome, ale nie w IronPDF

Kolejny przykład przycinania tekstu w Chrome

Tekst ucięty w przeglądarce Chrome, ale nie w IronPDF

Dłączego używać HTML do PDF?

Programiści kochają HTML do PDF, ponieważ dostarcza przewidywalne wyniki zgodne z istniejącą marką w sieci. Projektowanie jest wdrażane przy użyciu dobrze udokumentówanych, standardowych technologii HTML, CSS i JavaScript.

  • Układ i projekt outputu dokładnie odpowiadają stronie internetowej.
  • Deweloperzy internetowi mogą skoncentrować się na projektowaniu z absolutną precyzją.
  • Deweloperzy .NET mogą skoncentrować się na logice aplikacji zamiast na układzie. Programiści zaplecza mogą delegować zadania związane z układem i projektowaniem do projektantów sieciowych.

1. Zdecyduj się na użycie CSS Media Type PRINT lub Ekran

Renderer IronPDF ma dwie opcje renderowania multimediów: PRINT (domyślna) i Ekran. Dla porównania wizualnego obok siebie zobacz koniec tego samouczka w sekcji "Porównanie przykładu ekranu i druku".

  • CssMediaType.PRINT to domyślna opcja renderowania, która optymalizuje kod HTML do ogólnego użytku z drukarką. Oznacza to, że niektóre obrazy tła, ikony i inne elementy zużywające dużo tuszu mogą być renderowane inaczej lub pominięte. Ta opcja jest dobra dla dokumentów bez obrazów tła i jest domyślnym podglądem wydruku.
  • CssMediaType.Ekran to opcja renderowania, która sprawi, że pliki PDF będą wyglądały dokładnie tak, jak w przeglądarce Chrome na ekranie. Będziesz musiał skonfigurować kilka opcji w swojej przeglądarce Chrome, aby umożliwić podgląd wydruku wyglądać dokładnie tak, jak IronPDF będzie renderować dla celów debugowania HTML.
: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

Powtarzające się nagłówki tabel

Jeśli masz HTML zawierający tabelę, która będzie się rozciągać na więcej niż jednej stronie, to prawdopodobnie chciałbyś, aby nagłówki tabeli powtarzały się na każdej stronie PDF.

  • W tym przypadku można używać wyłącznie PRINT CssMediaType.
  • Użycie Ekran nakazuje przeglądarce Chrome wydrukowanie nagłówków tylko raz.

Porównanie przykładu ekranu i druku

Wiele obrazów i ikon nie załaduje się w trybie druku, które załadują się w trybie ekranu:

Przykład wydruku 1
Przykład ekranu 1

2. Skonfiguruj Chrome

IronPDF z dumą wykorzystuje silnik renderujący Chrome. Wykonaj te kroki, aby IronPDF renderował Twój HTML dokładnie jak widzisz go w Chrome. To są kilka kroków, które musisz wykonać wcześniej w Chrome, aby to osiągnąć.

Aby wygenerować pliki PDF o idealnej rozdzielczości, zawierające wszystkie obrazy, ikony i tła, które są zazwyczaj pomijane w formacie do druku, należy użyć opcji Ekran CSS Media.

2a. Otwórz Narzędzia dewelopera i ustaw Włącz Emulację CSS media na Ekran/PRINT w Chrome

  1. W tym celu w Chrome otwórz Narzędzia dewelopera.

    Użyj funkcji

  2. Naciśnij Command+Shift+P (Mac) albo Control+Shift+P (Windows, Linux, ChromeOS), aby otworzyć Menu Komend. Zacznij wpisywać rendering, wybierz Pokaż Renderowanie i naciśnij Enter. Narzędzia dewelopera wyświetlają kartę renderowania na dole okna Narzędzi dewelopera. Więcej pomocy

Przejdź do opcji

  1. Przewiń w dół i znajdź menu rozwijane dla Emulate CSS media, a następnie wybierz opcję Ekran lub PRINT. Jeśli jesteś na stronie internetowej, może być konieczne odświeżenie (Ctrl+R), aby ustawienia weszły w życie.
Switch to CSS Media Type PRINT

PRINT

Switch to CSS Media Type Ekran

Ekran

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

Może być konieczna zmiana rozmiaru papieru i włączenie 'drukowania obrazów tła' w dialogu drukowania Chrome, aby uzyskać dokładny wyświetlacz.

2c. Ustaw poprawne ustawienia podglądu wydruku

  • Wybierz rozmiar papieru używany w projekcie IronPDF, np. A4 lub Letter.
  • W menu rozwijanym Margins wybierz Custom i ustaw marginesy ze wszystkich czterech stron na 1 cal (1").
  • Zaznacz pole wyboru Background Graphics.
  • Upewnij się, że ustawiłeś Layout na Landscape, jeśli zamierzasz wygenerować dokument w orientacji poziomej.

I to wszystko. Teraz możesz debugować swój HTML i używać podglądu wydruku, aby zobaczyć dokładnie, jak IronPDF wyrenderuje Twój układ.

3. Skonfiguruj IronPDF

3a. Ustaw typ CSS Media w IronPDF

Aby dostosować się do projektu strony z 100% precyzją, musimy wybrać ten sam typ CSS Media, który ustawiliśmy w Chrome w naszym kodzie.

Należy pamiętać, że PdfCssMediaType.Ekran zawiera tła i większe obrazy, które mogą zostać pominięte w formacie PdfCssMediaType.PRINT, który jest domyślny i zaprojektowany z myślą o oszczędzaniu atramentu w drukarkach.

: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. Ustawianie Render Delay i Render Timeout odpowiednio

Domyślny czas oczekiwania na renderowanie w IronPDF to 60 sekund. Wszystko, co zajmuje dłużej niż to do przetworzenia, nie będzie renderowane bez edytowania opcji renderowania. Aby zmienić ustawienia domyślne, musisz dostosować opcję RenderingOptions.Timeout.

Należy pamiętać, że brak ustawionego limitu czasu lub opóźnienie renderowania dłuższe niż ustawiony limit czasu spowoduje wygenerowanie wyjątku Unable to Render PDF. Więc jeśli napotykasz ten błąd, może być konieczne zwiększenie tych wartości.

: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
$vbLabelText   $csharpLabel

Gotowy, aby sprawdzić, co jeszcze możesz zrobić? Zapoznaj się z naszą stroną z samouczkami tutaj: Dodatkowe funkcje

Często Zadawane Pytania

Jak mogę osiągnąć pikselowo idealne renderowanie PDF z HTML?

Aby osiągnąć pikselowo idealne renderowanie PDF z HTML, możesz użyć renderera Chrome IronPDF, który zapewnia, że zawartość HTML wyświetlana w przeglądarkach Chrome jest identyczna z generowanymi PDF-ami.

Jakie są zalety korzystania z IronPDF do konwersji HTML na PDF?

IronPDF pozwala programistom generować pliki PDF, które odpowiadają wizualnemu wyglądowi zawartości HTML w przeglądarkach internetowych, wspierając HTML5, CSS3 i JavaScript, w przeciwieństwie do wielu innych bibliotek.

Jak mogę skonfigurować CSS Media Types w IronPDF?

Możesz skonfigurować CSS Media Types w IronPDF, wybierając 'Print' dla dokumentów bez tła lub 'Screen', aby dopasować wygląd ekranu, co zapewnia zgodność wyjścia PDF z Twoimi potrzebami.

Jakie kroki powinienem wykonać, aby skonfigurować Chrome do renderowania PDF?

Aby skonfigurować Chrome do renderowania PDF, otwórz DevTools, włącz 'Emulate CSS media' na 'Screen/Print' i dostosuj ustawienia podglądu druku, aby upewnić się, że PDF odpowiada żądanemu układowi.

Jak mogę rozwiązać problemy z renderowaniem w IronPDF?

Jeśli napotkasz problemy z renderowaniem, takie jak wyjątek 'Unable to Render PDF', spróbuj zwiększyć ustawienia Render Delay lub Render Timeout w opcjach IronPDF dla lepszych wyników.

Czy mogę używać IronPDF do renderowania PDF zgodnego z projektem strony internetowej?

Tak, IronPDF umożliwia renderowanie PDF, które precyzyjnie odpowiada projektowi Twojej strony internetowej, korzystając z Google Chromium Renderer, oferując wsparcie dla wszystkich nowoczesnych technologii webowych.

Dlaczego IronPDF używa Google Chromium Renderer?

IronPDF używa Google Chromium Renderer, aby zapewnić, że HTML wyświetlany w przeglądarkach Chrome wygląda identycznie z tworzonymi PDF-ami, zapewniając spójne i wysokiej jakości wyjście.

Czy IronPDF jest kompatybilny z .NET 10 i czy mogę go używać w nowych projektach .NET 10?

Tak. IronPDF wyraźnie obsługuje .NET 10 (jak również .NET 9, .NET 8 i wcześniejsze) i działa od razu. Możesz skoncentrować swoje projekty na .NET 10 i używać API IronPDF do konwersji HTML na PDF, renderowania, edytowania i podpisywania bez potrzeby specjalnych obejść.

Curtis Chau
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,926,724 | Wersja: 2026.5 just released
Still Scrolling Icon

Wciąż przewijasz?

Czy chcesz szybko dowodu? PM > Install-Package IronPdf
Uruchom przykład i zobacz, jak Twój kod HTML zamienia się w plik PDF.