How to Use CSS with HTML in C# for Responsive PDFs 如何在 C# 中使用 CSS 與 HTML 來製作回應式 PDF

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

IronPDF 能以 C# 從 HTML 生成 PDF，並預設能將畫面樣式表呈現為 PDF。 這很方便，因為與螢幕樣式表相比，列印樣式表的文件、使用或開發通常都不夠完善。 然而，了解這些媒體類型之間的區別，對製作專業品質的 PDF 是至關重要的。

在 IronPDF 中使用 CSS (螢幕與列印) 時，螢幕與列印媒體類型的選擇會顯著影響您最終的 PDF 輸出。 螢幕媒體類型會保留互動元素和豐富的視覺設計，而印刷媒體類型則會優化內容的可讀性和紙本消費。

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

何時應該使用列印與螢幕 CSS 媒體類型？

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

每種 CSS 媒體類型都針對不同的使用情況。 試試看哪一個適合您的要求。 請考慮這些準則：

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

• 製作擬用於實體印刷的文件
• 產生發票、報告或正式文件
• 您需要在各頁中重複使用表格標題
• 節省墨水是優先考量
• 使用 自訂紙張尺寸的需求工作

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

• 以豐富的視覺元素建立互動式 PDF
• 在 PDF 中保留網頁設計美學
• 包括背景圖片和顏色
• PDF 主要會在螢幕上觀看
• 處理回應式 HTML 至 PDF 的轉換

螢幕模式與列印模式的視覺差異為何？

。 。

上面的範例展示了相同的 HTML 內容如何根據 CSS 媒體類型的選擇以不同的方式呈現。 請注意印刷版本如何移除裝飾性圖片和圖示，以建立更乾淨、更適合列印的文件，而螢幕版本則保留所有視覺元素，以利數位檢視。

Why Do Table Headers Only Appear Once in Screen Mode?

當處理跨越多頁的 HTML 表格時，請將 CssMediaType 屬性設定為 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 輸出是什麼樣子？