1. IronPDF
  2. Poradniki
  3. Debug HTML with Chrome
Jak debugować HTML w przeglądarce Chrome, aby tworzyć pliki PDF o idealnej rozdzielczości

Debugowanie kodu HTML w przeglądarce Chrome w celu uzyskania plików PDF o idealnej rozdzielczości za pomocą języka C

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

Renderer Chrome firmy IronPDF umożliwia programistom tworzenie plików PDF o idealnej rozdzielczości, które dokładnie odpowiadają projektom HTML wyświetlanym w przeglądarce Chrome, obsługując HTML5, CSS3 i JavaScript w celu precyzyjnego generowania dokumentów.

IronPDF gwarantuje, że pliki PDF wyglądają dokładnie tak, jak tego oczekujesz. Osiągnięcie idealnych wyników wymaga doskonałych szablonów HTML lub współpracy z programistami stron internetowych w celu ich stworzenia. IronPDF renderuje pliki PDF identycznie jak przeglądarka Chrome dzięki modułowi Chrome Renderer. Aby uzyskać wyczerpującą dokumentację dotyczącą rozpoczęcia pracy, odwiedź Przewodnik szybkiego startu.

Szybki start: Twórz pliki PDF o idealnej rozdzielczości dzięki IronPDF

Renderer Chrome firmy IronPDF sprawia, że konwersja HTML do PDF jest prosta. Ten przewodnik pomaga programistom tworzyć dokumenty PDF o idealnej rozdzielczości, które dokładnie odzwierciedlają projekty HTML tak, jak wyglądają w przeglądarce Chrome. Proces ten zapewnia pełną obsługę elementów HTML5, CSS3 i JavaScript. Wykonaj poniższe kroki, aby utworzyć pliki PDF zachowujące spójność wizerunku marki i projektu strony internetowej. Aby poznać więcej technik konwersji HTML do PDF, zapoznaj się z samouczkiem HTML do PDF.

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Skopiuj i uruchom ten fragment kodu.

    // Initialize Chrome PDF renderer with IronPDF
IronPdf.ChromePdfRenderer.RenderHtmlAsPdf("<html><body>Hello World</body></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?

Czym IronPDF różni się od innych bibliotek PDF dla platformy .NET?

IronPDF wykorzystuje silnik renderujący Google Chrome, dzięki czemu kod HTML wyświetla się w plikach PDF dokładnie tak samo, jak w przeglądarkach Chrome. Niniejszy przewodnik obejmuje ustawienia wymagane zarówno w przeglądarce Chrome, jak i w programie IronPDF, aby osiągnąć ten rezultat. Dowiedz się więcej o silniku renderowania plików PDF w przeglądarce Chrome, aby poznać jego zaawansowane możliwości.

Wiele konkurencyjnych technologii "HTML do PDF" nie jest zgodnych ze standardami W3C ani nie obsługuje HTML5, CSS3 lub JavaScript, wykorzystując podstawowe renderery, takie jak wkhtmltopdf w porównaniu z C#. Szczegółowe porównanie wydajności można znaleźć w analizie iText vs IronPDF.

Jak IronPDF wypada na tle konkurencji?

IronPDF

IronPDF rendering of Bootstrap components showing pixel-perfect HTML to PDF conversion

Pobierz plik PDF

Vanilla Chrome

Chrome browser's native PDF rendering of Bootstrap components for comparison

Pobierz plik PDF

Aspose.PDF

Aspose.PDF rendering showing limited Bootstrap component support

Pobierz plik PDF

iText

iText PDF rendering demonstrating incomplete HTML/CSS support

Pobierz plik PDF

wkhtmltopdf

wkhtmltopdf rendering showing outdated WebKit engine limitations

Pobierz plik PDF

Aby zapoznać się z pełną listą porównań z innymi produktami, zajrzyj na blog porównawczy.

Funkcje bibliotek oprogramowania Iron Software | Korzystanie z silnika renderującego Chrome w IronPDF | Analiza Aspose vs IronPDF | Porównanie iText vs IronPDF

W jaki sposób renderer Chrome firmy IronPDF przewyższa standardową przeglądarkę Chrome?

IronPDF przewyższa Chrome w dwóch kluczowych obszarach. Przyciski i tekst, które Chrome rozdziela na różne strony, pozostają nienaruszone w IronPDF. Ta doskonała jakość renderowania wynika z zoptymalizowanych algorytmów PRINT i zaawansowanego zarządzania podziałami stron. Więcej informacji na temat zarządzania podziałami stron można znaleźć w Przewodniku po podziałach stron.

Co się dzieje, gdy przyciski są ucięte w przeglądarce Chrome?

Renderowanie w IronPDF a Chrome: IronPDF zachowuje całe przyciski, podczas gdy Chrome ucieka elementy w miejscach podziału stron

Co się dzieje, gdy tekst zostaje ucięty w przeglądarce Chrome?

Porównanie renderowania w IronPDF i Chrome pokazujące pełne wyświetlanie tekstu w IronPDF w porównaniu z ucięciem tekstu w Chrome

Dlaczego programiści powinni korzystać z funkcji HTML do PDF?

Konwersja HTML do PDF zapewnia przewidywalne wyniki zgodne z istniejącym wizerunkiem marki w sieci. Projekt wykorzystuje standardowe technologie HTML, CSS i JavaScript. Aby tworzyć pliki PDF od podstaw, zapoznaj się z dokumentacją Tworzenie nowych plików PDF.

  • Układ i wygląd muszą dokładnie odpowiadać stronie internetowej
  • Programiści webowi mogą projektować z absolutną precyzją
  • Programiści backendu skupiają się na logice, a nie na układzie

Jak wybrać między CSS Media Type PRINT a Screen?

Renderer IronPDF posiada dwie opcje renderowania mediów: PRINT (domyślnie) i Screen. Dla porównania wizualnego zobacz koniec tej sekcji. Dla obsługi CSS typu responsive, zapoznaj się z przewodnikiem CSS (Screen & PRINT).

  • CssMediaType.PRINT optymalizuje HTML do druku, potencjalnie pomijając obrazy tła, ikony i elementy zużywające dużo atramentu. Dobre dla dokumentów bez obrazów tła.
  • CssMediaType.Screen renderuje PDFy dokładnie tak, jak wyglądają w Chrome. Wymaga specjalnej konfiguracji przeglądarki Chrome dla dokładnego debugowania podglądu wydruku. 
:path=/static-assets/pdf/content-code-examples/how-to/pixel-perfect-html-to-pdf-1.cs
// Pixel Perfect HTML Formatting Settings
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print; // or Screen
' Pixel Perfect HTML Formatting Settings
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print ' or Screen
$vbLabelText   $csharpLabel

Kiedy powinienem używać powtarzających się nagłówków tabel?

Dla tabel rozciągających się na wiele stron z powtarzającymi się nagłówkami:

  • Użyj wyłącznie PRINT CssMediaType
  • Tryb Screen drukuje nagłówki tylko raz

Zadbaj o prawidłowe renderowanie tabeli z tą strukturą HTML: 

:path=/static-assets/pdf/content-code-examples/how-to/pixel-perfect-html-to-pdf-table-example.html
// TEN FRAGMENT KODU JEST NIEDOSTĘPNY!
HTML

Jakie są różnice wizualne między trybami Screen a PRINT?

W trybie Screen wiele obrazów i ikon się ładuje, ale nie w trybie PRINT:

Porównanie typów nośników CSS PRINT vs Screen pokazuje układ wydruku z samym tekstem w porównaniu do bogatego w obrazy układu ekranowego dla strony Mac Porównanie specyfikacji MacBook Pro pokazuje typy nośników CSS w trybie wydruku vs ekran z różnymi układami i widocznością ikon

Jak skonfigurować Chrome dla dokładnego debugowania pikseli?

IronPDF wykorzystuje silnik renderowania Chrome. Wykonaj te kroki, aby IronPDF renderował HTML dokładnie tak, jak wyświetlany w Chrome. Dla dodatkowej personalizacji renderowania zobacz dokumentację Rendering Options.

Aby renderować PDFy z idealną dokładnością, w tym wszystkie obrazy, ikony i tła typowo pomijane w formacie drukowym, użyj opcji CSS Media Screen.

Jak włączyć emulację CSS Media w Chrome DevTools?

  1. W Chrome, otwórz DevTools w Chrome.
Chrome browser showing how to access Developer Tools for PDF debugging
  1. Naciśnij Command+Shift+P (Mac) lub Control+Shift+P (Windows, Linux, ChromeOS), aby otworzyć Command Menu. Wpisz rendering, wybierz Show Rendering i naciśnij Enter. DevTools wyświetla zakładkę Rendering na dole. Więcej pomocy dotyczącej ustawień renderowania
Chrome DevTools showing how to access Rendering panel for CSS media emulation
  1. Przejdź do rozwijanego menu Emulate CSS media i wybierz Screen lub PRINT. Przeładuj (Ctrl+R) jeśli jesteś na stronie internetowej, aby ustawienia miały efekt.
Chrome DevTools showing CSS PRINT media type emulation settings

PRINT

Chrome DevTools Rendering panel showing CSS media emulation options with dropdowns set to No emulation

Screen

Jak uzyskać dostęp do okna podglądu wydruku?

Zmień rozmiar papieru i włącz 'drukowanie obrazów tła' w dialogu druku Chrome dla dokładnego wyświetlania. Dla niestandardowych rozmiarów papieru, zobacz przewodnik Niestandardowy rozmiar papieru.

Jakie ustawienia podglądu wydruku powinienem użyć?

  • Wybierz rozmiar papieru używany w projekcie IronPDF (A4 lub Letter)
  • Pod Margins wybierz Custom i ustaw wszystkie strony na 1 cal
  • Włącz pole wyboru Background Graphics
  • Ustaw Layout na Landscape dla dokumentów w orientacji poziomej

Te ustawienia umożliwiają debugowanie HTML z podglądem wydruku pokazującym dokładnie, jak IronPDF renderuje układy.

Jak skonfigurować IronPDF dla dokładnego renderowania pikseli?

Jak dopasować typ mediów CSS w IronPDF?

Aby dopasować projekt strony internetowej z 100% precyzją, wybierz ten sam Typ Mediów CSS ustawiony w Chrome.

Pamiętaj, że PdfCssMediaType.Screen zawiera tła i większe obrazy pomijane w formacie PdfCssMediaType.PRINT, zaprojektowanym dla drukarek do oszczędzania atramentu.

:path=/static-assets/pdf/content-code-examples/how-to/pixel-perfect-html-to-pdf-2.cs
// Example using PdfCssMediaType.Screen
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Screen; // or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
' Example using PdfCssMediaType.Screen
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Screen ' or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

Dlaczego opóźnienie renderowania i czas oczekiwania są ważne?

Domyślny czas oczekiwania na renderowanie w IronPDF to 60 sekund. Gdy renderowanie trwa dłużej, występuje wyjątek czasu oczekiwania. Zmień domyślne ustawienia, dostosowując RenderingOptions.Timeout. Opóźnienie renderowania pozwala na prawidłowe ładowanie zasobów, takich jak obrazy, czcionki i JavaScript. Dla stron bogatych w JavaScript, zobacz przewodnik JavaScript (Niestandardowe opóźnienia renderowania).

:path=/static-assets/pdf/content-code-examples/how-to/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

Brak ustawionego czasu oczekiwania lub opóźnienia renderowania dłuższego niż czas oczekiwania powoduje wyjątek "Nie można wyrenderować PDF". Zwiększ te wartości, jeśli napotkasz ten błąd.

Zwróć uwagęAspose, iText, wkhtmltopdf, a PuppeteerSharp są zarejestrowanymi znakami towarowymi ich odpowiednich właścicieli. Ta strona nie jest związana z, zatwierdzona przez ani sponsorowana przez Aspose, iText, wkhtmltopdf lub Puppeteer. Wszystkie nazwy produktów, logo i marki są własnością ich odpowiednich właścicieli. Porównania mają charakter wyłącznie informacyjny i opierają się na informacjach dostępnych publicznie w momencie pisania tekstu.

Często Zadawane Pytania

What makes PDFs created with C# look exactly like they do in Chrome browser?

IronPDF uses the Google Chromium Renderer to ensure HTML appears in PDFs exactly as it does in Chrome browsers. This Chrome Renderer provides full support for HTML5, CSS3, and JavaScript, enabling pixel-perfect PDF generation that matches your web designs precisely.

How can I quickly generate a PDF from HTML using C#?

You can create a PDF in just one line of code using IronPDF's Chrome Renderer: IronPdf.ChromePdfRenderer.RenderHtmlAsPdf("Hello World").SaveAs("output.pdf"). This simple approach leverages the Chrome rendering engine to produce pixel-perfect PDFs instantly.

Why do some HTML to PDF libraries produce different results than expected?

Many competing HTML to PDF technologies don't comply with W3C standards or lack support for HTML5, CSS3, or JavaScript. IronPDF's Chrome Renderer ensures your PDFs match exactly what you see in Chrome browser, unlike libraries using outdated renderers like wkhtmltopdf.

What HTML and CSS features are supported for PDF generation?

IronPDF's Chrome Renderer supports the full range of modern web technologies including HTML5, CSS3, and JavaScript. This comprehensive support ensures that complex layouts, animations, responsive designs, and interactive elements are accurately rendered in your PDF documents.

How can I ensure my PDFs maintain web branding and design integrity?

IronPDF renders PDFs identically to Chrome browser display through its Chrome Renderer. By debugging your HTML templates in Chrome first and then using IronPDF for conversion, you can maintain complete design integrity and ensure your PDFs preserve all branding elements exactly as intended.

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.