如何在 C# 中結合 CSS 與 HTML 製作響應式 PDF

為何選擇正確的 CSS 媒體類型如此重要？

IronPDF 能在 C# 環境中將 HTML 轉為 PDF，並預設可將螢幕樣式表渲染為 PDF。 這點相當便利，因為相較於螢幕版樣式表，PRINT樣式表的文件記錄、使用頻率或開發程度往往較為有限。 然而，理解這些媒體類型的區別對於製作 Professional 品質的 PDF 至關重要。

在 IronPDF 中處理 CSS（螢幕與列印）時，選擇螢幕或列印媒體類型將顯著影響最終的 PDF 輸出效果。 螢幕媒體類型保留互動元素與豐富的視覺設計，而PRINT媒體類型則針對可讀性與紙本閱讀體驗進行內容優化。

CSS3 允許某些 CSS 樣式僅在 PRINT 文件中呈現，而其他樣式則專為網頁瀏覽器設計。 IronPDF 皆可支援，讓您完全掌控 HTML 內容轉為 PDF 的呈現方式。 這種靈活性確保無論您是製作數位報告、可列印發票，還是混合型文件，您的 PDF 都能滿足其預期使用情境的特定需求。

何時該使用 PRINT 與 Screen CSS 媒體類型？

建立並套用 PRINT 樣式表至您的 HTML：瞭解如何建立並套用完美的 PRINT 樣式表。

每種 CSS 媒體類型皆針對不同的使用情境。 請逐一試用，找出最符合您需求的選項。 請遵循以下指引：

在以下情況下使用 PRINT CSS 媒體類型：

• 製作供實體列印使用的文件
• 生成發票、報告或正式文件
• 各頁面需重複顯示表格標題
• 節省墨水是首要考量
• 處理自訂紙張尺寸的需求

在以下情況下使用 Screen CSS 媒體類型：

• 建立具備豐富視覺元素的互動式 PDF
• 在 PDF/A 中保留網頁設計的美感
• 包含背景圖片與顏色
• 該 PDF 文件主要會在螢幕上檢視
• 處理響應式 HTML 轉 PDF 轉換

螢幕模式與PRINT模式在視覺上有哪些差異？

上述範例展示了相同的 HTML 內容如何根據 CSS 媒體類型的選擇呈現出不同的效果。 請注意，列印版本會移除裝飾性圖片和圖示，以產生更簡潔、更適合列印的文件；而螢幕版本則保留所有視覺元素，以利數位瀏覽。

為何在螢幕模式下表格標題只會出現一次？

處理跨頁的 HTML 表格時，請將 CssMediaType 屬性設定為 PdfCssMediaType.Print。 這可確保表格標題在每個延伸頁面的頂端重複顯示。 相對地，PdfCssMediaType.Screen 會指示 Chrome 僅列印一次頁首。 此功能在建立包含冗長資料表的 PDF 報告時尤為重要。

"PRINT"媒體類型會啟用瀏覽器用於分頁的特定 CSS 規則，其中包括可啟用頁首重複顯示的 thead {display: table-header-group;} 屬性。 此功能對於維持讀者瀏覽多頁文件時的語境連貫性至關重要。

重複頁首需要什麼樣的 HTML 結構？

為確保 Chrome 能偵測到表格標題，請將其包在 <thead> 標籤內。 Let's render the 'tableHeader.html example of repeating table headers' HTML file to PDF to see the effect.

以下為建議的 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>

如何在 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")

若需更進階的表格格式設定選項，請探索"自訂邊距"以控制表格周圍的間距，或使用"分頁"功能，確保表格在必要時能從新頁面開始。

最終的 PDF 輸出文件會是什麼樣子？