1. IronPDF
  2. 教程
  3. 使用 Chrome 调试 HTML
如何使用C#在.NET 8中将HTML转换为PDF | IronPDF

如何在 Chrome 中调试 HTML 以用 C# 创建像素完美的 PDF.

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

作为 IronPDF 的开发者，我们了解 IronPDF 制作的 PDF 文档不仅需要看起来完美，还需要精确符合我们客户的预期。 为了使您的 PDF 看起来像素完美，您需要开发优秀的 HTML 模板或与网页开发人员合作为您完成这项工作。 IronPDF 提供使您的 PDF 渲染为像素完美且与 HTML 匹配的选项，并由于我们使用的 Chrome 渲染器，使其在 Chrome 中的外观完全相同。

快速入门：使用 IronPDF 创建像素完美的 PDF

利用 IronPDF 强大的 Chrome 渲染器，毫不费力地将 HTML 转换为像素完美的 PDF。 本快速指南通过充分利用 IronPDF 对 HTML5、CSS3 和 JavaScript 的全面支持，帮助您实现精确可预测的 PDF 输出。 只需几行代码，您就可以准确地渲染出与 Chrome 中呈现的 HTML 内容一致的 PDF，确保从网页到 PDF 的无缝过渡。 非常适合旨在保持布局精确性同时保持易用性的开发者。

Nuget Icon立即开始使用 NuGet 创建 PDF 文件：

  1. 使用 NuGet 包管理器安装 IronPDF

    PM > Install-Package IronPdf

  2. 复制并运行这段代码。

    var Renderer = new IronPdf.ChromePdfRenderer();
Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.打印;
Renderer.RenderHtmlAsPdf("<html>Your HTML content here</html>").SaveAs("output.pdf");

  3. 部署到您的生产环境中进行测试

    立即开始在您的项目中使用 IronPDF，免费试用！
    arrow pointer

什么是 IronPDF 的 Chrome 渲染器？

它使 IronPDF 与其他 .NET PDF 库区别开来

IronPDF 能够在市场上脱颖而出，因为它使用了谷歌 Chromium 渲染器，这意味着您在 Chrome 浏览器中看到的 HTML 与您在我们的 PDF 中看到的内容完全相同。 在本教程中，我们将指导您如何在 Chrome 和 IronPDF 中应用一些设置以实现这一目标。

需要澄清的是，许多竞争对手声称的"HTML 到 PDF"技术既不符合 W3C 标准，也不支持 HTML5、CSS3 或 JavaScript，而是使用如 wkhtmltopdf 此类的底层渲染器。

IronPDF 与竞争对手的比较

IronPDF

IronPDF

下载 PDF

香草 Chrome

香草 Chrome

下载 PDF

Aspose.PDF

Aspose.PDF

下载 PDF

iText

iText

下载 PDF

wkhtmltopdf

wkhtmltopdf

下载 PDF

欲查看与其他产品的完整对比列表，请查阅我们的 博客。

[pFeatures related to IronPDF 与竞争对手的比较 功能]|IronPDF 的 Chrome 渲染器|Aspose 与 IronPDF 对比|iText 与 IronPDF 对比

IronPDF 优化的 Chrome 渲染器比 Chrome 更好

以下两个例子展示了 IronPDF 如何超越 Chrome。 在 Chrome 中分割到两页的按钮和文本在 IronPDF 中保持完整。

在 Chrome 中被切割的按钮和文本示例

在 Chrome 中被切割的按钮，但在 IronPDF 中没有

另一个在 Chrome 中被切割的文本示例

在 Chrome 中被切割的文本，但在 IronPDF 中没有

为什么使用 HTML 转 PDF？

开发者们热爱 HTML 转 PDF，因为它呈现出与现有网络品牌相匹配的可预测结果。 设计使用文档详尽的标准化 HTML、CSS 和 JavaScript 技术实现。

  • 输出的布局和设计与网站完全一致。
  • 网页开发人员可以专注于精准设计。
  • .NET 开发人员可以专注于应用程序逻辑而不是布局。 后端开发人员可以将布局和设计任务委托给网页设计师。

1. 决定使用 CSS 媒体类型 打印 或 屏幕

IronPDF 的渲染器具有两种媒体渲染选项：打印 （默认） 和 屏幕。 请在本教程结束时的"屏幕 和 打印 示例对比"部分查看直观的逐次比较。

  • CssMediaType.打印 是默认渲染选项，优化您的 HTML 以便与打印机一般使用。 这意味着页面上的某些背景图像、图标和其他耗墨元素可能会不同呈现或被省略。 此选项适用于无背景图像的文档，是默认的预览打印模式。
  • CssMediaType.屏幕 是允许您的 PDF 在屏幕上看起来与 Chrome 中完全一致的渲染选项。 您需要在 Chrome 浏览器中设置一些选项，以便预览打印看起来与 IronPDF 为 HTML 调试目的所渲染的效果完全一致。
:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-1.cs
// Pixel Perfect HTML Formatting Settings
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print; // or Screen
$vbLabelText   $csharpLabel

重复的表格标题

如果您的 HTML 含有一个跨页的表格，您可能会希望表格标题在每页 PDF 上重复。

  • 在这情况下，您 只能 使用 打印 CssMediaType。
  • 使用 屏幕 指示 Chrome 仅打印一次标题。

屏幕 和 打印 示例对比

许多图像和图标在 打印 模式下不会加载，但在 屏幕 模式下加载：

打印 示例 1 屏幕 示例 1

2. 设置 Chrome

铁PDF自豪地使用Chrome渲染引擎。请按照这些步骤，让IronPDF按您在Chrome中看到的方式准确渲染您的HTML。 在 Chrome 中需要提前完成的步骤屈指可数。

要渲染像素完美的 PDF 以包含通常在打印格式下省略的所有图像、图标和背景，请务必使用 屏幕 CSS 媒体选项。

2a. 打开开发者工具并在 Chrome 中设置启用模拟 CSS 媒体为 屏幕/打印

  1. 要做到这一点，在 Chrome 中打开开发者工具。

在 Chrome 中使用检查

  1. 按下 Command+Shift+P（Mac）或 Control+Shift+P（Windows、Linux、ChromeOS）以打开命令菜单。 开始输入渲染，选择显示渲染并按 Enter。 开发者工具在您开发者工具窗口的底部显示渲染选项卡。 更多帮助

转到显示渲染，然后找到 CSS 媒体类型

  1. 向下滑动并找到 模拟 CSS 媒体 的下拉菜单，选择 屏幕 或 打印 选项。 如果您处于网页上，您可能需要重新加载 (Ctrl+R) 让设置生效。
Switch to CSS Media Type 打印

打印

Switch to CSS Media Type 屏幕

屏幕

2b. 打开打印预览窗口（Windows 上为 Ctrl+P）

您可能需要更改纸张尺寸，并在 Chrome 打印对话框中启用"打印背景图像"以获得准确显示。

2c. 设置正确的打印预览设置

  • 请选择您在 IronPDF 项目中使用的纸张尺寸，例如 A4 或 Letter。
  • 在 边距 下拉菜单中选择 自定义 并设置所有四个边（1 英寸）一英寸的边距。
  • 启用 背景图形 复选框。
  • 如果您打算输出横向文档，请确保设置您的 布局 为 横向。

这就是全部。 您现在可以调试您的 HTML 并使用打印预览查看 IronPDF 如何渲染您的布局。

3. 设置 IronPDF

3a. 在 IronPDF 中设置 CSS 媒体类型

为了以 100% 的精确度匹配网页设计，我们必须在代码中选择我们在 Chrome 中设置的相同 CSS 媒体类型。

请记住，PdfCssMediaType.屏幕 包括背景以及在 PdfCssMediaType.打印 格式中可能被省略的较大图像，而此格式默认用于打印，以节省墨水。

:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-2.cs
// Example using PdfCssMediaType.Screen
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen; // or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
$vbLabelText   $csharpLabel

3b. 适当地设置渲染延迟和渲染超时

IronPDF 的默认渲染超时为 60 秒。 任何超过此时间进行处理的内容，在不编辑渲染选项的情况下不会被渲染。 要覆盖默认设置，您需要调整RenderingOptions.Timeout选项。

请记住，未设置超时或渲染延迟时间超过您设置的超时时间将产生 无法渲染 PDF 异常。 因此，如果您遇到此错误，可能需要增加这些值。

:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-3.cs
// Example of setting Timeout and RenderDelay options
renderer.RenderingOptions.Timeout = 90; // seconds (default is 60)
renderer.RenderingOptions.WaitFor.RenderDelay(30000); // milliseconds
$vbLabelText   $csharpLabel

准备好看看您还能做些什么吗？ 查看我们的教程页面：额外功能

常见问题解答

如何实现从HTML到像素完美的PDF渲染？

要实现从HTML到像素完美的PDF渲染，您可以使用IronPDF的Chrome Renderer，确保在Chrome浏览器中显示的HTML内容与生成的PDF一致。

使用 IronPDF 进行 HTML 到 PDF 转换的好处是什么？

IronPDF允许开发人员生成与网页浏览器中HTML内容视觉外观一致的PDF，支持HTML5、CSS3和JavaScript，与许多其他库不同。

如何在IronPDF中配置CSS媒体类型？

您可以在IronPDF中配置CSS媒体类型，通过选择‘打印’用于无背景的文档或‘屏幕’以匹配屏幕上的外观，确保PDF输出符合您的需求。

设置Chrome用于PDF渲染需要遵循哪些步骤？

要设置Chrome用于PDF渲染，打开DevTools，启用‘模拟CSS媒体’为‘屏幕/打印’，并调整打印预览设置以确保PDF与所需布局一致。

如何解决IronPDF的渲染问题？

如果遇到渲染问题，如‘无法渲染PDF’异常，请尝试增加IronPDF选项中的Render Delay或Render Timeout设置以改善结果。

我可以使用IronPDF渲染与网页设计匹配的PDF吗？

是的，IronPDF可以通过使用Google Chromium Renderer来渲染与网页设计精确匹配的PDF，支持所有现代网页技术。

为什么IronPDF使用Google Chromium Renderer？

IronPDF使用Google Chromium Renderer来确保在Chrome浏览器中显示的HTML与创建的PDF看起来完全一致，提供一致和高质量的输出。

IronPDF 与 .NET 10 兼容吗？我可以在新的 .NET 10 项目中使用它吗？

是的。IronPDF 明确支持 .NET 10（以及 .NET 9、.NET 8 及更早版本），并且开箱即用。您可以在项目中以 .NET 10 为目标平台，并使用 IronPDF 的 HTML 转 PDF、渲染、编辑和签名 API，无需任何特殊设置。

Curtis Chau
Curtis Chau
  立即与工程团队聊天
技术作家

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

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

准备开始了吗？
Nuget 下载 17,012,929 | 版本: 2025.12 刚刚发布