如何使用C#将HTML转换为具有响应式CSS的PDF

How to use CSS with HTML

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

CSS 'screen' 媒体类型主要用于在计算机屏幕和类似设备上显示。 当为 'screen' 媒体类型定义样式时,它们会影响网页内容在屏幕上的呈现方式,强调视觉设计和交互性。

相比之下,CSS 'print' 媒体类型是为打印而设计的。 它决定了网页在打印时的外观,重点是优化打印页面的内容。 这种优化可能包括调整字体大小、边距,以及移除或隐藏在打印时不相关或不必要的元素。

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

使用IronPDF轻松将带有响应式CSS的HTML转换为精美的PDF。 只需几行代码,开发人员就可以确保他们的PDF在各设备上完美呈现,保持屏幕和打印样式的完整性。 本快速指南演示了如何使用IronPDF从现有HTML内容生成专业的PDF输出,简化流程以获得快速准确的结果。

Nuget IconGet started making PDFs with NuGet now:

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Copy and run this code snippet.

    new IronPdf.ChromePdfRenderer { RenderingOptions = { CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print } }
        .RenderUrlAsPdf("https://example.com")
        .SaveAs("responsive.pdf");
  3. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer
class="hsg-featured-snippet">

最简化工作流程(5步)

  1. 下载用于CSS和HTML集成的IronPDF C#库
  2. 准备HTML文件以转换为PDF
  3. 指定CSS媒体类型以实现最佳PDF格式化
  4. 为PDF中的重复表头设置CSS媒体类型 'Print'
  5. 配置视口尺寸以实现响应式设计


屏幕与打印CSS类型(CSS3)

IronPDF从C#中的HTML生成PDF,并且可以轻松默认将屏幕样式表渲染为PDF。 这很方便,因为打印样式表通常比屏幕样式表记录、使用或开发得少。

CSS3允许某些CSS样式仅在打印文档中呈现,而其他样式仅用于网页浏览器。 IronPDF可以编程以适用于任何一种情况。

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

很难说哪种CSS媒体类型更好,因为每种类型针对不同的使用案例。 通过反复试验值得尝试每种类型,以查看哪种适合您的需求。

打印示例1 屏幕示例1

<hr

重复表头

当处理跨越多个页面的HTML表格时,将CssMediaType属性设置为PdfCssMediaType.Print。 这确保表头在每个扩展页面的顶部重复。 相比之下,PdfCssMediaType.Screen命令Chrome只打印一次表头。

为了确保Chrome检测到表头,它应该被包裹在<thead>标签中。 Let's render the 'tableHeader.html example of repeating table headers' HTML file to PDF to see the effect.

: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

常见问题解答

如何使用响应式设计将HTML转换为PDF?

您可以通过首先下载IronPDF C#库来使用IronPDF将HTML转换为PDF。之后,准备您的HTML文件,指定适当的CSS媒体类型,并配置视口尺寸以确保PDF在不同设备上的响应性。

CSS 'screen'和'print'媒体类型有什么区别?

CSS的'screen'媒体类型用于在数字屏幕上显示内容,侧重视觉设计和交互性。相反,'print'媒体类型通过调整字体大小和边距等元素来优化打印材料的内容,使其适合于实际打印。

如何确保PDF中每页都重复表头?

要确保PDF中的每页都重复表头,设置CssMediaType属性为PdfCssMediaType.Print,并将表头包含在<thead>标签中。这确保了多个页面中的一致表头表示。

IronPDF可以处理屏幕和打印样式表吗?

是的,IronPDF可以处理屏幕和打印样式表。它允许从HTML中渲染PDF,无论是哪个媒体类型,确保根据输出是否用于数字屏幕或打印灵活性。

在将HTML转换为PDF时使用打印样式表有什么好处?

打印样式表在将HTML转换为PDF时是有益的,因为它确保内容对于打印得到优化。这包括对字体大小和边距的调整,确保PDF正确格式化以便于实际打印。

如何使用C#库在PDF中实现响应式CSS?

要在PDF中使用IronPDF实现响应式CSS,下载IronPDF C#库,准备您的HTML内容,指定所需的CSS媒体类型,并调整视口尺寸以确保PDF适应不同的设备。

为什么为PDF使用正确的CSS媒体类型很重要?

使用正确的CSS媒体类型对PDF很重要,因为它决定了内容如何呈现。'Screen'媒体类型适合数字显示,而'print'媒体类型确保内容为纸张优化,影响布局和可读性等元素。

IronPDF 是否支持 .NET 10?使用最新版本有哪些优势?

是的,IronPDF 支持 .NET 10。由于 .NET 10 是一个长期支持 (LTS) 版本,在性能、运行时和 SDK 方面都有显著改进——包括更好的 JIT 内联、硬件加速以及增强的 HTTP 和序列化 API——因此,将 .NET 10 与 IronPDF 结合使用可以实现更快、更高效的 PDF 生成,并确保长期稳定性。([devblogs.microsoft.com](https://devblogs.microsoft.com/dotnet/announcing-dotnet-10/?utm_source=openai))

Curtis Chau
技术作家

Curtis Chau 拥有卡尔顿大学的计算机科学学士学位,专注于前端开发,精通 Node.js、TypeScript、JavaScript 和 React。他热衷于打造直观且美观的用户界面,喜欢使用现代框架并创建结构良好、视觉吸引力强的手册。

除了开发之外,Curtis 对物联网 (IoT) 有浓厚的兴趣,探索将硬件和软件集成的新方法。在空闲时间,他喜欢玩游戏和构建 Discord 机器人,将他对技术的热爱与创造力相结合。

准备开始了吗?
Nuget 下载 16,154,058 | 版本: 2025.11 刚刚发布