1. IronPDF
  2. Samouczki
  3. Debugowanie HTML w Chrome
Jak przekonwertować HTML na PDF za pomocą języka C# w środowisku .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 pliki PDF wyglądały doskonale pikselowo, należy opracować doskonałe szablony HTML lub współpracować z programistą sieciowym, który to zrobi. IronPDF ma opcje, aby renderować pliki PDF jako doskonale pikselowe w stosunku do kodu HTML i wyglądać identycznie jak w Chrome dzięki 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 zostaną omówione ustawienia, które należy 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 vs IronPDF | iText vs 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

Przyciski przycięte w Chrome, ale nie w IronPDF

Kolejny przykład przycinania tekstu w Chrome

Tekst przycięty w Chrome, ale nie w IronPDF

Dlaczego 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 udokumentowanych, 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 Screen

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

  • CssMediaType.PRINT jest domyślną opcją 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.Screen jest opcją renderowania, która pozwoli plikom PDF wyglądać dokładnie tak, jak pojawiają się w Chrome na ekranie. Należy skonfigurować kilka opcji w przeglądarce Chrome, aby 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 takim przypadku można tylko użyć PRINT CssMediaType.
  • Użycie Screen instruuje Chrome, aby drukował nagłówki 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 druku 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 należy wykonać wcześniej w Chrome, aby to osiągnąć.

Aby renderować doskonale pikselowe PDF-y, które zawierają wszystkie obrazy, ikony i tła, które zwykle są pomijane w formacie drukowania, należy używać opcji CSS Media Screen.

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

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

    Użyj Inspekcji w Chrome

  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 Pokaż Renderowanie i znajdź typ CSS Media

  1. Przejdź niżej i znajdź rozwijaną listę dla Emulate CSS media i wybierz opcję Screen albo PRINT. Jeśli strona jest otwarta w przeglądarce, 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 Screen

Screen

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

Może być konieczna zmiana rozmiaru papieru i włączenie opcji „drukowania obrazów tła" w oknie dialogowym drukowania Chrome, aby uzyskać dokładny podgląd.

2c. Ustaw poprawne ustawienia podglądu wydruku

  • Wybierz Rozmiar Papieru używany w projekcie IronPDF, taki jak A4 lub Letter.
  • W rozwijanej liście Margins wybierz Custom i ustaw wszystkie cztery boki na (1") jeden cal marginesu.
  • Włącz opcję Background Graphics.
  • Należy ustawić Layout na Landscape, jeśli planowane są wyniki w układzie poziomym.

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.

Warto przypomnieć, że PdfCssMediaType.Screen zawiera tła i większe obrazy, które mogą być pominięte w formacie PdfCssMediaType.PRINT, który jest domyślny i zaprojektowany dla drukarek, aby oszczędzać tusz.

: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 do przetworzenia, nie będzie renderowane bez edytowania opcji renderowania. Aby nadpisać ustawienia domyślne, należy dostosować opcję RenderingOptions.Timeout.

Należy pamiętać, że brak ustawionego limitu lub ustawienie opóźnienia renderowania dłuższego niż ustawiony limit czasu spowoduje wystąpienie wyjątków Unable to Render PDF. Jeśli napotkano 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

Chcesz sprawdzić, co jeszcze można zrobić? Zajrzyj na stronę z samouczkami: Dodatkowe funkcje

Często Zadawane Pytania

Jak uzyskać idealne odwzorowanie pliku PDF z HTML?

Aby uzyskać idealne odwzorowanie pliku PDF z HTML, można użyć renderera Chrome firmy IronPDF, który zapewnia, że zawartość HTML wyświetlana w przeglądarkach Chrome jest identyczna z wygenerowanymi plikami PDF.

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

IronPDF pozwala programistom generować pliki PDF, które wyglądają tak samo jak treść HTML w przeglądarkach internetowych, obsługując HTML5, CSS3 i JavaScript, w przeciwieństwie do wielu innych bibliotek.

Jak skonfigurować typy mediów CSS w IronPDF?

W IronPDF można skonfigurować typy mediów CSS, wybierając opcję „PRINT” dla dokumentów bez tła lub „Ekran”, aby dopasować wygląd do ekranu, zapewniając, że plik PDF będzie zgodny z Twoimi potrzebami.

Jakie kroki należy wykonać, aby skonfigurować przeglądarkę Chrome do renderowania plików PDF?

Aby skonfigurować przeglądarkę Chrome do renderowania plików PDF, otwórz DevTools, włącz opcję „Emulate CSS media” na „Screen/PRINT” i dostosuj ustawienia podglądu wydruku, aby plik PDF odpowiadał pożądanemu układowi.

Jak 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 opóźnienia renderowania (Render Delay) lub limitu czasu renderowania (Render Timeout) w opcjach IronPDF, aby uzyskać lepsze wyniki.

Czy mogę używać IronPDF do renderowania plików PDF, które pasują do projektu strony internetowej?

Tak, IronPDF umożliwia renderowanie plików PDF, które dokładnie pasują do projektu strony internetowej, dzięki wykorzystaniu silnika renderującego Google Chromium, zapewniającego obsługę wszystkich nowoczesnych technologii internetowych.

Dlaczego IronPDF korzysta z renderera Google Chromium?

IronPDF wykorzystuje silnik renderujący Google Chrome, aby zapewnić, że kod HTML wyświetlany w przeglądarkach Chrome wygląda identycznie jak utworzone pliki PDF, zapewniając spójny i wysokiej jakości wynik.

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 (a także .NET 9, .NET 8 i wcześniejsze wersje) i jest kompatybilny od razu po instalacji. Możesz kierować swoje projekty do .NET 10 i korzystać z interfejsów API IronPDF do konwersji HTML na PDF, renderowania, edycji i podpisywania bez konieczności stosowania 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,135,201 | Wersja: 2026.4 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.