如何在 C# 中使用 CSS 和 HTML 實作響應式 PDF

為什麼選擇正確的 CSS 媒體類型很重要？

IronPDF可以用 C# 從 HTML 產生 PDF，並且預設可以將螢幕樣式表渲染為 PDF。 這很方便，因為與螢幕樣式表相比，列印樣式表的文件、使用或開發通常都不太完善。 然而，了解這些媒體類型之間的差異對於製作專業品質的 PDF 檔案至關重要。

在IronPDF中使用CSS(螢幕和列印)時，螢幕和列印媒體類型的選擇會對最終的 PDF 輸出產生重大影響。 螢幕媒體類型保留了互動元素和豐富的視覺設計，而印刷媒體類型則優化了內容，使其更易於閱讀和紙質閱讀。

CSS3 允許某些 CSS 樣式僅在列印文件中呈現，而其他樣式則用於 Web 瀏覽器。 IronPDF可以與這兩種格式搭配使用，讓您可以完全掌控HTML 內容如何呈現為 PDF 。 這種靈活性確保無論您是建立數位報告、可列印發票還是混合文檔，您的 PDF 都能滿足其預期使用情境的特定要求。

何時應該使用 Print 類型，何時應該使用 Screen 類型？ CSS 媒體類型何時應該使用 Screen 類型？

建立並套用HTML列印樣式表：學習如何建立和套用完美的列印樣式表。

每種 CSS 媒體類型都針對不同的使用情境。 逐一嘗試，看看哪一個最符合您的需求。 請參考以下準則：

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

• 建立用於實體印刷的文檔 產生發票、報告或正式文件
• 你需要跨頁面重複使用表格標題 節約墨水是首要任務。
• 處理自訂紙張尺寸要求

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

• 建立具有豐富視覺元素的互動式 PDF
• 在PDF中保留網頁設計美感
• 包括背景圖片和顏色
• 該PDF檔案主要在螢幕上檢視。
• 處理響應式 HTML 到 PDF 的轉換

螢幕顯示模式和列印模式在視覺上有什麼區別？

以上範例示範了相同的 HTML 內容如何根據 CSS 媒體類型的選擇而呈現不同的效果。 請注意，列印版本刪除了裝飾性圖像和圖標，以創建更簡潔、更適合列印的文檔，而螢幕版本則保留了所有視覺元素，以便進行數位檢視。

為什麼在螢幕模式下表格標題只顯示一次？

當處理跨越多個頁面的 HTML 表格時，將PdfCssMediaType.Print 。 這樣可以確保表格標題在每個擴充頁面的頂部重複出現。 相反， PdfCssMediaType.Screen指示 Chrome 只列印一次標頭。 在建立包含大量資料表的PDF 報告時，這種行為尤其重要。

印刷媒體類型會啟動瀏覽器用於分頁的特定 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");

如需更進階的表格格式設定選項，請探索自訂邊距來控製表格周圍的間距，或實施分頁符號以確保表格在需要時從新頁面開始。

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