1. IronPDF
  2. 操作指南
  3. CSS (屏幕和打印)
如何用 C# 用響應式 CSS 將 HTML 轉換為 PDF

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

Curtis Chau
Curtis Chau
更新:
This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDF使 C# 開發人員能夠將包含 CSS 的 HTML 轉換為 PDF，同時支援"螢幕"和"列印"兩種媒體類型，從而保持響應式設計。列印模式可最佳化 PDF 輸出的版面配置，並支援跨頁重複表格標題等功能。

CSS 的"screen"媒體類型主要用於在電腦螢幕和類似裝置上顯示。 當為"螢幕"媒體類型定義樣式時，它們會影響網頁內容在螢幕上的顯示方式，強調視覺設計和互動性。 這包括懸停效果、動畫和背景圖像等元素，這些元素可以增強使用者在數位顯示器上的體驗。

CSS 的"print"媒體類型是為列印而設計的。 它決定網頁在列印時的外觀，重點在於優化列印頁面的內容。 這種最佳化可能包括調整字體大小、邊距，以及刪除列印時不必要的元素。 列印樣式表通常會移除導覽功能表、側邊欄和裝飾元素，以突出核心內容，使文件更易讀並節省墨水。

在使用 IronPDF 的Chrome PDF 渲染引擎時，開發人員可以完全控制要使用的媒體類型，從而確保從 HTML 產生的 PDF 保持預期的設計和功能。 這種靈活性在創建既需要用於數位分發又需要用於實體印刷的文件時非常有用。

快速入門：HTML轉PDF — 使用響應式 HTML 和 CSS 產生 PDF

使用IronPDF將帶有響應式 CSS 的 HTML 轉換為 PDF。 只需幾行程式碼，即可確保您的 PDF 檔案在各種裝置上完美呈現，並保持螢幕和列印樣式的完整性。 本快速指南示範如何使用IronPDF從現有的 HTML 內容產生專業的 PDF 輸出。

  1. 使用NuGet套件管理器安裝https://www.nuget.org/packages/IronPdf

    PM > Install-Package IronPdf

  2. 複製並運行這段程式碼。

    new IronPdf.ChromePdfRenderer { RenderingOptions = { CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print } }
    .RenderUrlAsPdf("https://example.com")
    .SaveAs("responsive.pdf");

  3. 部署到您的生產環境進行測試

    今天就在您的專案中開始使用免費試用IronPDF

    arrow pointer

最簡工作流程(5個步驟)

  1. 下載IronPDF C# 庫，用於 CSS 和 HTML 集成
  2. 準備 HTML 文件以轉換為 PDF
  3. 指定 CSS 媒體類型以獲得最佳 PDF 格式
  4. 將PDF中重複表格標題的CSS媒體類型設定為"列印"
  5. 配置視窗尺寸以實現響應式設計


CSS3 中的螢幕和列印 CSS 類型是如何運作的？

為什麼選擇正確的 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 的轉換

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

CSS 列印與螢幕媒體類型對比，展示蘋果 Mac 頁面，其中圖片在印刷版本中被隱藏 CSS 媒體類型比較：列印佈局省略圖標，螢幕佈局包含圖標(適用於 MacBook 規格)

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

如何在PDF頁面中重複顯示表格標題？

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

當處理跨越多個頁面的 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>
HTML

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

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

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

進階 CSS 媒體類型配置

處理複雜佈局時，請將 CSS 媒體類型與其他IronPDF功能結合使用。 例如，使用視窗和縮放設定時，您選擇的 CSS 媒體類型會影響響應式設計在最終 PDF 中的縮放方式。

以下範例示範了進階配置：

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Configure for print media type with custom settings
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;
renderer.RenderingOptions.PrintHtmlBackgrounds = true; // Override print defaults
renderer.RenderingOptions.MarginTop = 25;
renderer.RenderingOptions.MarginBottom = 25;

// Add custom CSS for print media
string customCss = @"
    @media print {
        .no-print { display: none; }
        body { font-size: 12pt; }
        h1 { page-break-after: avoid; }
    }
";

// Render with custom CSS injection
string htmlWithCss = $"<style>{customCss}</style>{yourHtmlContent}";
PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlWithCss);

pdf.SaveAs("advanced-print-layout.pdf");
using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Configure for print media type with custom settings
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;
renderer.RenderingOptions.PrintHtmlBackgrounds = true; // Override print defaults
renderer.RenderingOptions.MarginTop = 25;
renderer.RenderingOptions.MarginBottom = 25;

// Add custom CSS for print media
string customCss = @"
    @media print {
        .no-print { display: none; }
        body { font-size: 12pt; }
        h1 { page-break-after: avoid; }
    }
";

// Render with custom CSS injection
string htmlWithCss = $"<style>{customCss}</style>{yourHtmlContent}";
PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlWithCss);

pdf.SaveAs("advanced-print-layout.pdf");
Imports IronPdf
Imports IronPdf.Rendering

Dim renderer As New ChromePdfRenderer()

' Configure for print media type with custom settings
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True ' Override print defaults
renderer.RenderingOptions.MarginTop = 25
renderer.RenderingOptions.MarginBottom = 25

' Add custom CSS for print media
Dim customCss As String = "
    @media print {
        .no-print { display: none; }
        body { font-size: 12pt; }
        h1 { page-break-after: avoid; }
    }
"

' Render with custom CSS injection
Dim htmlWithCss As String = $"<style>{customCss}</style>{yourHtmlContent}"
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(htmlWithCss)

pdf.SaveAs("advanced-print-layout.pdf")
$vbLabelText   $csharpLabel

對於需要像素級精確度的項目，可以考慮使用Chrome 的 HTML 偵錯功能來預覽 CSS 媒體類型在產生最終 PDF 之前將如何呈現。

IronPDF中 CSS 媒體類型的最佳實踐

1.測試兩種媒體類型：請務必使用螢幕和列印媒體類型測試您的 HTML，以確定哪種媒體類型最適合您的特定使用情況。

2.使用列印方式製作文件：在建立正式文件、發票或報告時，列印媒體類型通常能提供更清晰、更專業的列印效果。

3.利用媒體查詢：利用 CSS 媒體查詢來微調佈局，以適應不同的輸出場景。

4.考慮效能：列印樣式表通常渲染速度較快，因為它們排除了不必要的視覺元素。

5.驗證您的 CSS ：使用HTML 渲染設定來確保您的 CSS 在 PDF 產生期間正確應用。

透過掌握IronPDF中的 CSS 媒體類型，您可以建立完全符合您要求的 PDF，無論它們是為數位分發還是實體印刷而設計的。

常見問題解答

如何在 C# 中將具有回應式 CSS 的 HTML 轉換為 PDF？

IronPDF 提供了一種簡單的方法，可以用 C# 將具有回應 CSS 的 HTML 轉換為 PDF。您可以使用 ChromePdfRenderer 類別，並透過 RenderingOptions 屬性指定 CSS 媒體類型（螢幕或列印）。只需幾行程式碼，IronPDF 就能保留您的回應式設計，並確保在不同裝置上完美呈現。

在產生 PDF 時，「螢幕」與「列印」CSS 媒體類型有何差異？

IronPDF 支援兩種 CSS 媒體類型。螢幕」媒體類型會顯示內容在數位螢幕上的顯示效果，並帶有螢幕懸停效果和動畫；而「列印」媒體類型則透過調整字型、頁邊距以及移除不必要的元素（如導航功能表），將內容針對列印頁面進行最佳化。IronPDF 的 Chrome PDF 渲染引擎可讓您完全控制使用哪種媒體類型。

如何在 PDF 頁面上啟用重複表頭？

若要在 PDF 中跨頁重複使用表頭，請在 IronPDF 中將 CSS 媒體類型設為「Print」。這可透過在 RenderingOptions 中設定 CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print 來實現。列印媒體類型包含重複標題等優化功能，可讓多頁文件更具可讀性。

我可以將實時網站的 URL 直接轉換成具有回應式設計的 PDF 嗎？

是的，IronPDF 可讓您直接將實時網站轉換為 PDF，同時維持回應式設計。使用 ChromePdfRenderer 類的 RenderUrlAsPdf 方法。您可以指定使用螢幕或列印 CSS 媒體類型，以確保 PDF 依您的需求渲染。

函式庫使用何種渲染引擎進行 HTML 至 PDF 的轉換？

IronPDF 使用 Chrome PDF 渲染引擎，可提供準確的 HTML 至 PDF 轉換，並完全支援現代 CSS3 功能、JavaScript 和回應式設計。此引擎可確保您的 PDF 能維持原始 HTML 內容的預期設計與功能。

如何設定回應式 PDF 設計的視埠尺寸？

IronPDF 允許您透過 ChromePdfRenderer 的 RenderingOptions 屬性來設定視埠尺寸。這可確保您的回應式 CSS 媒體查詢在 HTML 轉換為 PDF 時能正確運作，讓您能控制內容在不同視埠尺寸下的顯示方式。

Curtis Chau
Curtis Chau
  立即與工程團隊聊天
技術作家

Curtis Chau 擁有卡爾頓大學計算機科學學士學位，專注於前端開發，擅長於 Node.js、TypeScript、JavaScript 和 React。Curtis 熱衷於創建直觀且美觀的用戶界面，喜歡使用現代框架並打造結構良好、視覺吸引人的手冊。

除了開發之外，Curtis 對物聯網 (IoT) 有著濃厚的興趣，探索將硬體和軟體結合的創新方式。在閒暇時間，他喜愛遊戲並構建 Discord 機器人，結合科技與創意的樂趣。

準備好開始了嗎？
Nuget 下載 18,560,885 | 版本： 2026.4 剛剛發布
Still Scrolling Icon

還在捲動嗎？

想要快速證明？ PM > Install-Package IronPdf
執行範例 觀看您的 HTML 變成 PDF。