Jak używać CSS z HTML w C# do tworzenia reagujących plików PDF

Dłączego wybór odpowiedniego typu mediów CSS ma znaczenie?

IronPDF generuje pliki PDF z HTML w C# i może domyślnie renderować arkusz stylów dla ekranów do PDF. Jest to wygodne, ponieważ arkusze stylów do drukowania są często słabiej udokumentówane, używane lub rozwijane w porównaniu do ich odpowiedników dla ekranów. Jednak zrozumienie różnicy między tymi typami mediów jest kluczowe dla produkcji profesjonalnej jakości plików PDF.

Pracując z CSS (Ekran & Druk) w IronPDF, wybór między typami mediów ekranowymi a drukowanymi ma znaczący wpływ na końcowy wynik PDF. Typy mediów ekranowych zachowują interaktywne elementy i bogate projekty wizualne, podczas gdy typy mediów drukowanych optymalizują treści pod kątem czytelności i zużycia papieru.

CSS3 pozwala na renderowanie pewnych stylów CSS wyłącznie w wydrukowanych dokumentach, podczas gdy inne są przeznaczone do przeglądarek internetowych. IronPDF może współpracować z oboma, dając ci pełną kontrolę nad tym, jak twoje treści HTML są renderowane do PDF. Ta elastyczność zapewnia, że niezależnie od tego, czy tworzysz cyfrowe raporty, drukowalne faktury, czy hybrydowe dokumenty, twoje pliki PDF spełniają specyficzne wymagania ich przeznaczenia.

Kiedy powinienem używać Print a kiedy Screen CSS Media Type?

Stwórz i zastosuj arkusz stylów do druku do twojego HTML: Dowiedz się, jak stworzyć i zastosować idealny arkusz stylów do druku.

Każdy typ mediów CSS jest przeznaczony do różnych przypadków użycia. Wypróbuj każdy z nich, aby zobaczyć, który odpowiada twoim wymaganiom. Należy uwzględnić następujące wytyczne:

Używaj Print CSS Media Type, gdy:

• Tworzysz dokumenty przeznaczone do drukowania fizycznego
• Generujesz faktury, raporty lub formalne dokumenty
• Potrzebujesz powtarzanych nagłówków tabel na stronach
• Oszczędność tuszu jest priorytetem
• Pracujesz z niestandardowymi wymaganiami rozmiaru papieru

Używaj Screen CSS Media Type, gdy:

• Tworzysz interaktywne pliki PDF z bogatymi elementami wizualnymi
• Zachowujesz estetykę web designu w pliku PDF
• Włączasz obrazy tła i kolory
• Plik PDF będzie głównie oglądany na ekranach
• Pracujesz nad konwersją HTML do PDF z responsywnym designem

Jakie są wizualne różnice między trybami ekranu a druku?

Powyższe przykłady pokazują, jak ta sama treść HTML jest renderowana inaczej w zależności od wyboru typu mediów CSS. Zauważ, jak wersja do druku usuwa dekoracyjne obrazy i ikony, tworząc czystszy, bardziej drukowalny dokument, podczas gdy wersja ekranowa zachowuje wszystkie elementy wizualne do oglądania cyfrowego.

Dłączego nagłówki tabel pojawiają się tylko raz w trybie ekranowym?

W przypadku tabel HTML obejmujących wiele stron należy ustawić właściwość CssMediaType na PdfCssMediaType.Print. Zapewnia to, że nagłówek tabeli pojawia się na początku każdej kolejnej strony. Natomiast PdfCssMediaType.Screen nakazuje przeglądarce Chrome wydrukowanie nagłówków tylko raz. To zachowanie jest szczególnie ważne podczas tworzenia raportów PDF z długimi tabelami danych.

Typ mediów PRINT aktywuje określone reguły CSS, których przeglądarki używają do paginacji, w tym właściwość thead {display: table-header-group;}, która umożliwia powtarzanie nagłówków. Ta funkcja jest niezbędna do zachowania kontekstu, gdy czytelnicy przeglądają dokumenty wielostronicowe.

Jaka struktura HTML jest wymagana dla powtarzających się nagłówków?

Aby zapewnić, że Chrome wykryje nagłówek tabeli, należy umieścić go w tagu <thead>. Let's render the 'tableHeader.html example of repeating table headers' HTML file to PDF to see the effect.

Oto zalecana struktura HTML:

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

Jak wdrożyć powtarzanie nagłówków tabel w C#?

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.cs

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400);

// Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableHeader.html");

pdf.SaveAs("tableHeader.pdf");

Imports IronPdf
Imports IronPdf.Rendering

Private renderer As New ChromePdfRenderer()

' Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400)

' Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableHeader.html")

pdf.SaveAs("tableHeader.pdf")

Aby uzyskać bardziej zaawansowane opcje formatowania tabel, zbadaj niestandardowe marginesy do kontroli odstępów wokół twoich tabel lub wdroż podziały stron, aby upewnić się, że tabele zaczynają się na nowych stronach, gdy jest to potrzebne.

Jak wygląda ostateczny plik PDF?