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

Dlaczego 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 udokumentowane, 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 należy używać Print, a kiedy Screen CSS Media Type?

Warto stworzyć i zastosować arkusz stylów do druku: 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. Należy wypróbować każdy z nich, aby zobaczyć, który odpowiada wymaganiom projektu. Zaleca się uwzględnić następujące wytyczne:

Używaj Print CSS Media Type, gdy:

• Tworzone są dokumenty przeznaczone do drukowania fizycznego
• Generowane są faktury, raporty lub formalne dokumenty
• Wymagane są powtarzane nagłówki tabel na stronach
• Oszczędność tuszu jest priorytetem
• Stosowane są niestandardowe wymagania rozmiaru papieru

Używaj Screen CSS Media Type, gdy:

• Tworzone są interaktywne pliki PDF z bogatymi elementami wizualnymi
• Zachowywana jest estetyka web designu w pliku PDF
• Włączane są obrazy tła i kolory
• Plik PDF będzie głównie oglądany na ekranach
• Realizowana jest konwersja 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.

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

Gdy masz do czynienia z tabelami HTML rozciągającymi się na wiele stron, ustaw właściwość CssMediaType na PdfCssMediaType.Print. Zapewnia to, że nagłówek tabeli pojawia się na początku każdej kolejnej strony. Z kolei PdfCssMediaType.Screen informuje Chrome, aby drukował nagłówki tylko raz. To zachowanie jest szczególnie ważne podczas tworzenia raportów PDF z długimi tabelami danych.

Typ mediów do druku aktywuje specyficzne zasady CSS, które 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 Chrome wykrywał nagłówek tabeli, należy umieścić go w tagu <thead>. Wyrenderuj 'przykładowy plik tableHeader.html z powtarzającymi się nagłówkami tabel' jako PDF, aby zobaczyć efekt.

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?