1. IronPDF
  2. Poradniki
  3. Debugowanie HTML w 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

Chrome Renderer IronPDF umożliwia programistom tworzenie idealnie odwzorowanych pikseli PDF-ów, które dokładnie odpowiadają projektom HTML wyświetlanym w Chrome, wspierając HTML5, CSS3 i JavaScript dla 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

Chrome Renderer IronPDF upraszcza konwersję HTML na PDF. 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 na PDF" nie spełnia standardów W3C ani nie wspiera HTML5, CSS3 czy JavaScript, używając podstawowych rendererów, takich jak wkhtmltopdf w porównaniu 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 Iron Software | Korzystanie z silnika renderującego Chrome IronPDF | Analiza Aspose vs IronPDF | Porównanie iText vs IronPDF

Jak Chrome Renderer IronPDF przewyższa standardowy 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

Dłączego 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 projekt dokładnie odpowiadają stronom internetowym
  • Twórcy stron internetowych 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 Ekran?

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

  • CssMediaType.PRINT optymalizuje kod HTML do druku, potencjalnie pomijając obrazy tła, ikony i elementy wymagające dużego zużycia atramentu. Dobre dla dokumentów bez obrazów tła.
  • CssMediaType.Ekran wyświetla pliki PDF dokładnie tak, jak wyglądają w przeglądarce 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:

  • Należy używać wyłącznie PRINT CssMediaType
  • Tryb Ekran PRINTuje 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 Ekran a PRINT?

Wiele obrazów i ikon ładuje się w trybie Ekran, ale nie w trybie PRINT:

Porównanie typów mediów CSS PRINT i Ekran pokazujące układ wydruku zawierający wyłącznie tekst w porównaniu z układem ekranu bogatym w obrazy dla strony internetowej na komputery Mac
Porównanie specyfikacji MacBooka Pro pokazujące typy mediów CSS PRINT i screen 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ć pliki PDF z idealną dokładnością pikselową, zawierające wszystkie obrazy, ikony i tła, które zazwyczaj są pomijane w formacie PRINT, należy użyć opcji Ekran CSS Media.

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 opcję Pokaż renderowanie i naciśnij klawisz 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 menu rozwijanego Emulate CSS media i wybierz Ekran 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

Ekran

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)
  • W sekcji Margins wybierz Custom i ustaw wszystkie strony na 1 cal
  • Zaznacz 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.

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

: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

Dłączego opóźnienie renderowania i czas oczekiwania są ważne?

Domyślny czas oczekiwania na renderowanie w IronPDF wynosi 60 sekund. Gdy renderowanie trwa dłużej, występuje wyjątek czasu oczekiwania. Zastąp ustawienia domyślne, 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

Having no timeout set or a render delay longer than the timeout produces an "Unable to Render PDF" exception. 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

Co sprawia, że pliki PDF stworzone przy użyciu C# wyglądają dokładnie tak, jak w przeglądarce Chrome?

IronPDF używa Google Chromium Renderer, aby zapewnić, że HTML w plikach PDF wygląda dokładnie tak samo, jak w przeglądarkach Chrome. Ten Renderer Chrome oferuje pełne wsparcie dla HTML5, CSS3 i JavaScript, umożliwiając generowanie plików PDF o perfekcyjnym oddaniu pikseli, które dokładnie odpowiadają twoim projektom internetowym.

Jak mogę szybko wygenerować plik PDF z HTML przy użyciu C#?

Możesz stworzyć plik PDF za pomocą zaledwie jednej linii kodu, używając Chrome Renderer IronPDF: IronPdf.ChromePdfRenderer.RenderHtmlAsPdf("Hello World").SaveAs("output.pdf"). To proste rozwiązanie wykorzystuje silnik renderujący Chrome do natychmiastowego tworzenia plików PDF o perfekcyjnym oddaniu pikseli.

Dlaczego niektóre biblioteki do konwersji HTML na PDF dają inne rezultaty niż oczekiwano?

Wiele konkurencyjnych technologii HTML do PDF nie spełnia standardów W3C lub brakuje im wsparcia dla HTML5, CSS3 czy JavaScript. Chrome Renderer IronPDF zapewnia, że twoje pliki PDF będą dokładnie takie, jak to, co widzisz w przeglądarce Chrome, w przeciwieństwie do bibliotek używających przestarzałych rendererów, takich jak wkhtmltopdf.

Jakie funkcje HTML i CSS są obsługiwane przy generowaniu PDF?

Chrome Renderer IronPDF wspiera pełny zakres nowoczesnych technologii webowych, w tym HTML5, CSS3 i JavaScript. To wszechstronne wsparcie zapewnia wierne odzwierciedlenie złożonych układów, animacji, projektów responsywnych i interaktywnych elementów w dokumentach PDF.

Jak mogę zapewnić, że moje pliki PDF zachowują spójność z marką i integralność projektu?

IronPDF renderuje pliki PDF identycznie jak wyświetlenie w przeglądarce Chrome za pomocą Chrome Renderer. Debugując swoje szablony HTML najpierw w Chrome, a następnie używając IronPDF do konwersji, możesz zachować pełną integralność projektu i upewnić się, że twoje pliki PDF zachowują wszystkie elementy marki tak, jak zamierzono.

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.