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

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życie PRINT CssMediaType wyłącznie
• Tryb Ekran 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

<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Widget A</td>
            <td>10</td>
            <td>$25.00</td>
        </tr>
        <tr>
            <td>Widget B</td>
            <td>5</td>
            <td>$40.00</td>
        </tr>
        <!-- Additional rows spanning multiple pages.
             The <thead> header row repeats automatically at the top of each page. -->
    </tbody>
</table>

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:

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

1. W Chrome, otwórz DevTools w Chrome.

<img src="/static-assets/pdf/how-to/pixel-perfect-html-to-pdf/open_devtools.gif" alt="Chrome browser showing how to access Developer Tools for PDF debugging" class="img-responsive add-shadow" style="margin-bottom: 30px;">

2. Naciśnij Command+Shift+P (Mac) lub Control+Shift+P (Windows, Linux, ChromeOS), aby otworzyć Command Menu. Wpisz rendering, wybierz Pokaż Renderowanie i naciśnij Enter. DevTools wyświetla zakładkę Rendering na dole. Więcej pomocy dotyczącej ustawień renderowania

<img src="/static-assets/pdf/how-to/pixel-perfect-html-to-pdf/find_emulate_css_type.gif" alt="Chrome DevTools showing how to access Rendering panel for CSS media emulation" class="img-responsive add-shadow" style="margin-bottom: 30px;">

3. Przejdź do rozwijanego Emulate CSS media i wybierz Ekran lub PRINT. Przeładuj (Ctrl+R) jeśli jesteś na stronie internetowej, aby ustawienia miały efekt.

<div class="competitors-sectionwrapper-even-1"> <div class="competitorscard" style="width: 48%;"> <img src="/static-assets/pdf/how-to/pixel-perfect-html-to-pdf/view_css_print.gif" alt="Chrome DevTools showing CSS PRINT media type emulation settings" class="img-responsive add-shadow" style="margin-bottom: 30px;">

PRINT

</div>
<div class="competitors__card" style="width: 48%;"&gt;
    <img src="/static-assets/pdf/how-to/pixel-perfect-html-to-pdf/view_css_screen.gif" alt="Panel Rendering w Chrome DevTools pokazujący opcje emulacji mediów CSS z listami rozwijanymi ustawionymi na No emulation" class="img-responsive add-shadow" style="margin-bottom: 30px;"&gt;  
    <p class="competitors__download-link" style="color: #181818; font-style: italic;">  
        Ekran  
    </p>
</div>

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żyty w twoim 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 poziomych

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

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.Ekran obejmuje tła i większe obrazy pomijane w formacie PdfCssMediaType.PRINT, który został zaprojektowany tak, aby oszczędzać tusz.

: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

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

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.

• WaitFor i przykładowy kod JavaScript
• Użycie WaitFor do opóźnienia renderowania PDF dla zaawansowanej kontroli czasu