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# 开发人员能够将带有 CSS 的 HTML 转换为 PDF，同时通过支持 "屏幕 "和 "打印 "媒体类型来保留响应式设计。打印模式可优化 PDF 输出布局，并支持跨页重复表头等功能。

CSS 的 "screen "媒体类型主要用于在计算机屏幕和类似设备上显示。 当为 "屏幕 "媒体类型定义样式时，它们会影响网页内容在屏幕上的显示效果，强调视觉设计和交互性。 这包括悬停效果、动画和背景图片等元素，以增强数字显示屏上的用户体验。

CSS 的 "打印 "媒体类型是为打印而设计的。 它决定了网页在打印时的显示效果，重点是为打印页面优化内容。 这种优化可能包括调整字体大小、页边距以及删除打印时不必要的元素。 打印样式表通常会移除导航菜单、边栏和装饰元素，将注意力集中在核心内容上，从而使文档更具可读性并节省油墨。

在使用IronPDF的Chrome PDF 渲染引擎时，开发人员可以完全控制使用哪种媒体类型，以确保从HTML生成的PDF保持预期的设计和功能。 在创建需要同时满足数字分发和实体印刷目的的文件时，这种灵活性非常宝贵。

快速入门：使用响应式 HTML 和 CSS 生成 PDF

using 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. 下载用于 CSS 和 HTML 集成的 IronPDF C# 库。
  2. 准备要转换为PDF的HTML文件
  3. 为优化PDF格式指定CSS媒体类型
  4. 为PDF中的重复表头设置CSS媒体类型'Print'
  5. 配置视口尺寸以实现响应式设计


在 CSS3 中，屏幕和打印 CSS 类型如何工作？

为什么选择正确的 CSS 媒体类型很重要？

IronPDF 可使用 C# 从 HTML 生成 PDF，默认情况下可将屏幕样式表渲染为 PDF。 这很方便，因为打印样式表通常比屏幕样式表记录、使用或开发得少。 然而，了解这些媒体类型之间的区别对于制作专业品质的 PDF 至关重要。

在 IronPDF 中使用 CSS（屏幕和打印） 时，屏幕和打印媒体类型的选择会对您的最终 PDF 输出产生重大影响。 屏幕媒体类型要保留互动元素和丰富的视觉设计，而印刷媒体类型则要优化内容的可读性和纸质阅读。

CSS3允许某些CSS样式仅在打印文档中呈现，而其他样式仅用于网页浏览器。 IronPDF 可与二者配合使用，让您完全控制HTML 内容如何呈现为 PDF 。 这种灵活性确保了无论您是创建数字报告、可打印发票还是混合文档，您的 PDF 都能满足其预期使用情况的特定要求。

何时应使用打印与屏幕 CSS 媒体类型？

创建并应用打印样式表到您的HTML：学习如何创建并应用完美的打印样式表。

每种 CSS 媒体类型都针对不同的使用情况。 尝试每一种，看看哪种适合您的要求。 请考虑以下指导原则：

在以下情况下使用打印 CSS 媒体类型：

  • 创建用于实际印刷的文件
  • 生成发票、报告或正式文件
  • 您需要在各页中重复使用表头
  • 节约墨水是首要任务
  • 使用 自定义纸张尺寸的要求工作

在以下情况下使用屏幕 CSS 媒体类型：

  • 创建具有丰富视觉元素的交互式 PDF
  • 在 PDF 中保留网页设计美感
  • 包括背景图片和颜色
  • PDF 将主要在屏幕上阅读
  • 使用响应式 HTML 转换为 PDF

屏幕模式和打印模式的视觉差异是什么？

CSS print 与 screen 媒体类型对比，显示打印版本中隐藏图像的 Apple Mac 页面 CSS媒体类型比较：打印布局省略图标，屏幕布局包括MacBook规格图标

上面的例子展示了相同的 HTML 内容如何根据 CSS 媒体类型的选择而呈现出不同的效果。 请注意，印刷版删除了装饰性图像和图标，以创建更简洁、更便于打印的文档，而屏幕版则保留了所有视觉元素，以方便数字浏览。

如何在 PDF 页面中重复表头？

为什么表头在屏幕模式下只显示一次？

处理跨越多页的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

如需更多高级表格格式选项，请探索 Custom Margins 以控制表格周围的间距，或实施 Page Breaks 以确保表格在需要时从新页面开始。

最终的 PDF 输出是什么样的？

Icon Quote related to 最终的 PDF 输出是什么样的？

我最喜欢的这种库是 IronPDF。它允许快速高效地操作 PDF 文件。它还具有许多有价值的功能，比如导出为 PDF/A 格式和数字签名 PDF 文档。

Milan Jovanovic related to 最终的 PDF 输出是什么样的？

Milan Jovanovic

微软MVP

查看案例研究
Icon Quote related to 最终的 PDF 输出是什么样的？

IronOCR 意味着我们每年可以节省 $40,000 的人工处理成本，同时提高生产力，并释放资源用于高影响任务。我强烈推荐它。

Brent Matzelle related to 最终的 PDF 输出是什么样的？

Brent Matzelle

首席技术官，OPYN

查看案例研究
Icon Quote related to 最终的 PDF 输出是什么样的？

Iron Suite 在我们的运营中起着至关重要的作用。这些工具提高了业务各方面的效率，包括创建平面图和改善库存管理。

David Jones related to 最终的 PDF 输出是什么样的？

David Jones

首席软件工程师，Agorus Build

查看案例研究

高级 CSS 媒体类型配置

在处理复杂布局时，将 CSS 媒体类型与 IronPDF 的其他功能结合起来。 例如，在使用 Viewport & Zoom 设置时，您选择的 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

对于要求精确到像素的项目，可以考虑使用 Debug HTML with Chrome 功能，在生成最终 PDF 之前准确预览 CSS 媒体类型的呈现效果。

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 媒体类型设置为 "打印"。这可以通过在 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 对物联网 (IoT) 有浓厚的兴趣，探索将硬件和软件集成的新方法。在空闲时间，他喜欢玩游戏和构建 Discord 机器人，将他对技术的热爱与创造力相结合。

准备开始了吗？
Nuget 下载 20,296,129 | 版本: 2026.7 刚刚发布
Still Scrolling Icon

还在滚动吗？

想快速获得证据？ PM > Install-Package IronPdf
运行示例看着你的HTML代码变成PDF文件。