1. IronPDF
  2. 如何
  3. CSS（螢幕與列印）
如何使用C#將HTML與響應式CSS轉換為PDF

在C#中如何使用CSS與HTML以生成具響應性的PDF

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

IronPDF允許C#開發者將HTML與CSS轉換為PDF，同時支持'screen'和'print'媒體型別，以保留響應式設計。列印模式優化佈局以供PDF輸出，並啟用跨頁重複表格標題等功能。

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

CSS的'print'媒體型別是為列印而設計的。 它決定了網頁在列印時的顯示方式，著重於優化內容以適合列印頁面。 這種優化可能包括調整字體大小、邊距，並移除在列印時不必要的元素。 列印樣式表通常會移除導航選單、邊欄和裝飾性元素，以集中於核心內容，使文件更易閱讀並節省墨水。

當使用IronPDF的Chrome PDF Rendering Engine時，開發者可以完全控制使用哪種型別的媒體，確保從HTML生成的PDF能保持預期的設計和功能。 這種靈活性對於同時需要數位分發和實體列印的文件非常有價值。

快速入門：使用響應式HTML和CSS生成PDF

使用IronPDF將您的HTML與響應式CSS轉換為PDF。 只需幾行程式碼，即可確保您的PDF在各裝置上完美呈現，保持screen和print樣式的完整性。 這個快速指南演示了如何使用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. 設定CSS媒體型別'Print'以便在PDF中重複表格標題
  5. 配置視口尺寸以實現響應式設計


在CSS3中Screen & Print CSS型別如何運作？

為何選擇正確的CSS媒體型別很重要？

IronPDF從C#中的HTML生成PDF，預設可以渲染screen樣式表為PDF。 這很方便，因為相比較而言，列印樣式表通常文獻較少、不常使用或不夠完善。 然而，了解這些媒體型別之間的區別對於生成專業品質的PDF至關重要。

在IronPDF中使用CSS（Screen & Print）時，screen和print媒體型別之間的選擇對最終的PDF輸出有顯著影響。 screen媒體型別保留互動元素和豐富的視覺設計，而print媒體型別則優化內容以便閱讀和紙張消耗。

CSS3允許某些CSS樣式專門在列印文件中顯示，而其他樣式則專為網頁瀏覽器所用。 IronPDF可以與任何一者搭配使用，讓您完全控制HTML內容如何被渲染到PDF中。 這種靈活性確保無論您在建立數位報告、可列印發票還是混合文件，您的PDF都能滿足其預定的使用案例的具體需求。

我應在何時使用Print還是Screen CSS媒體型別？

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

每種型別的CSS媒體型別針對不同的使用案例。 嘗試每一種型別，以看看哪一項適合您的需求。 考慮以下指導方針：

在以下情況使用Print CSS媒體型別：

  • 建立旨在實體列印的文件
  • 生成發票、報告或正式文件
  • 您需要跨頁的重複表格標題
  • 墨水節省是重點
  • 處理自訂紙張大小要求

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

  • 建立具有豐富視覺元素的互動式PDF
  • 在PDF中保留網頁設計美學
  • 包含背景圖像和顏色
  • PDF將主要在螢幕上查看
  • 處理與響應式HTML到PDF轉換

Screen和Print模式之間的視覺差異是什麼？

CSS print 與 screen 媒體型別的比較，顯示 Apple Mac 頁面在列印版本中隱藏影像 CSS媒體型別比較：列印佈局省去圖示，screen佈局包含MacBook規格圖示

上述範例顯示相同的HTML內容根據所選的CSS媒體型別如何不同地呈現。 請注意列印版如何移除裝飾性的圖像和圖示，以建立更乾淨、更適合列印的文件，而screen版則保持所有視覺元素以供數位查看。

我如何在PDF頁面間重複表格標題？

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

當處理跨多頁的HTML表格時，設置PdfCssMediaType.Print。 這可確保表格標題在每個延伸的頁面頂部重複。 相反地，PdfCssMediaType.Screen指示Chrome只列印一次表頭。 這種行為在建立含冗長資料表的PDF報告時尤其重要。

列印媒體型別激活特定的CSS規則，瀏覽器用以進行分頁，其中包含允許標題重複的thead {display: table-header-group;}屬性。 這個功能對於在讀者翻閱多頁文件時保持上下文至關重要。

重複標題需要什麼HTML結構？

為了確保Chrome能檢測到表頭，需將其封裝在<thead>標籤中。 讓我們將'tableHeader.html重複表格標題範例'的HTML文件渲染為PDF來查看效果。

以下是推薦的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輸出結果是怎樣的？

Icon Quote related to 最終的PDF輸出結果是怎樣的？

我最喜歡的程式庫是IronPDF。它允許快速高效地操作PDF文件。它還有許多有價值的功能，例如導出到PDF/A格式和數位簽署PDF文件。

Milan Jovanovic related to 最終的PDF輸出結果是怎樣的？

Milan Jovanovic

Microsoft MVP

查看案例研究
Icon Quote related to 最終的PDF輸出結果是怎樣的？

IronOCR意味著我們每年可以從手動處理中節省$40,000，同時提高生產力，釋放資源以進行高影響的任務。我會強烈推薦它。

Brent Matzelle related to 最終的PDF輸出結果是怎樣的？

Brent Matzelle

首席技術官，OPYN

查看案例研究
Icon Quote related to 最終的PDF輸出結果是怎樣的？

IronSuite在我們的運營中扮演著至關重要的角色。這些工具增加了包括建立平面圖和改善庫存管理在內的業務效率。

David Jones related to 最終的PDF輸出結果是怎樣的？

David Jones

首席軟體工程師，Agorus Build

查看案例研究

進階CSS媒體型別配置

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

這裡有一個範例展示了進階配置：

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-4.cs
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. 測試兩種媒體型別：總是用screen和print兩種媒體型別測試您的HTML，以確定哪一種能為您的特定使用案例提供最佳結果。

  2. 文件使用列印模式：在建立正式文件、發票或報告時，列印媒體型別通常能提供更乾淨、更專業的結果。

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

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

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

通過掌握IronPDF中的CSS媒體型別，您可以建立完美符合要求的PDF，無論是為數位分發還是實體列印而設計。

常見問題

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

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

生成PDF時“螢幕”和“列印”CSS媒體型別之間有什麼區別？

IronPDF支持兩種CSS媒體型別。“螢幕”媒體型別顯示內容就像在數位螢幕上看到的那樣，具有懸停效果和動畫，而“列印”媒體型別則透過調整字體、邊距和去除例如導航選單等不必要元素來優化列印頁面的內容。IronPDF的Chrome PDF渲染引擎讓您完全控制使用哪種媒體型別。

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

要在PDF頁面上啟用重複的表頭，請在IronPDF中將CSS媒體型別設置為“列印”。這可以通過在RenderingOptions中設置CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print來完成。列印媒體型別包括優化，如重複表頭，使多頁文件更易於閱讀。

我可以直接將線上網站URL轉換為具有響應式設計的PDF嗎？

可以，IronPDF允許您直接將線上網站轉換為PDF，同時保持響應式設計。使用RenderUrlAsPdf方法與ChromePdfRenderer類。您可以指定使用螢幕還是列印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擁有Carleton大學的電腦科學學士學位，專精於前端開發，擁有Node.js、TypeScript、JavaScript和React的專業知識。Curtis熱衷於建立直觀且美觀的使用者介面，喜愛使用現代框架並建立結構良好、視覺吸引力的手冊。

除了開發，Curtis對物聯網（IoT）有濃厚的興趣，探索創新的方法來整合硬體和軟體。在空閒時間，他喜歡玩遊戲和建立Discord機器人，結合他對技術的熱愛與創造力。

準備開始了嗎？
Nuget 下載 20,296,129 | 版本： 2026.7 剛剛發布
Still Scrolling Icon

還在捲動嗎？

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