如何在 Chrome 浏览器中调试 HTML 以创建像素完美的 PDF
作为 IronPDF 的开发者，我们深知用 IronPDF 制作的 PDF 文档不仅需要完美的外观，还需要符合客户的期望。要实现像素般完美的 PDF，您需要开发出色的 HTML 模板，或与网络开发人员合作为您创建模板。IronPDF 提供了将 PDF 像素完美地渲染到 HTML 的选项，通过我们的 Chrome 渲染器，确保 PDF 与在 Chrome 浏览器中的显示效果完全一致。
什么是 IronPDF 的 Chrome 渲染器？
它使 IronPDF 与其他 .NET PDF 库相比独一无二
IronPDF 在市场上与众不同，因为它使用了 Google Chromium 渲染器，这意味着您在 Chrome 浏览器中看到的 HTML 将与您在我们的 PDF 中看到的完全相同。在本指南中，我们将指导您在 Chrome 浏览器和 IronPDF 中应用一些设置来实现这一目标。
需要明确的是，许多竞争对手宣称的 "HTML 转 PDF "技术并不符合 W3C 标准，甚至不支持 HTML5、CSS3 或 JavaScript，它们使用的底层呈现器包括 wkhtmltopdf.
IronPDF 与竞争对手的比较
要查看与其他产品比较的完整列表，请参阅我们的 博客.
特点 IronPDF 的 Chrome 浏览器渲染器 Aspose 与 IronPDF iText 与 IronPDF
IronPDF 的优化 Chrome 渲染器优于 Chrome 浏览器
IronPDF 超越 Chrome 浏览器本身的两个例子。使用 Chrome 浏览器时，按钮和文本会被分割到两个页面上，而使用 IronPDF 时则保持不变。
在 Chrome 浏览器中按钮和文本被截断的示例：
Chrome 浏览器中文字被截断的另一个示例：
为何使用 HTML 转 PDF？
开发人员喜欢 HTML 转 PDF，因为它能提供与现有网络品牌相匹配的可预测结果。设计使用文档齐全的标准化 HTML、CSS 和 JavaScript 技术实现。
- 输出的布局和设计与网站完全匹配。
网站开发人员可以专注于绝对精确的设计。
- .NET 开发人员可以专注于应用程序逻辑而不是布局。后端开发人员可将布局和设计任务委托给网页设计师。
1.决定使用 CSS 媒体类型打印或屏幕
IronPDF 的渲染器有两种媒体渲染选项：打印(默认)** 和 "屏幕"。有关并排比较的视觉效果，请参阅 本节末.在 "屏幕与打印示例的比较 "部分。
CssMediaType.Print "是默认呈现选项，可优化 HTML，使其适合打印机的一般使用。这意味着页面上的一些背景图片、图标和其他油墨较多的元素可能会以不同的方式呈现或被省略。该选项适用于没有背景图像的文档，也是默认的打印预览。
- CssMediaType.Screen "是一种呈现选项，可让 PDF 文件在 Chrome 浏览器的屏幕上呈现出完全相同的效果。您需要在 Chrome 浏览器中设置一些选项，以使打印预览与 IronPDF 为 HTML 调试而呈现的效果完全一致。
:path=/static-assets/pdf/content-code-examples/how-to/pixel-perfect-html-to-pdf-1.cs// Pixel Perfect HTML Formatting Settings
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print; // or Screen' Pixel Perfect HTML Formatting Settings
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print ' or Screen重复表头
如果您的 HTML 包含一个跨页的表格，您可能希望表头在每个 PDF 页面上重复出现。
在这种情况下，您只能***使用
PrintCssMediaType。- 使用
Screen会指示 Chrome 浏览器只打印一次表头。
屏幕和打印示例的比较
许多图像和图标在 "打印 "模式下无法加载，而在 "屏幕 "模式下可以加载：
2.设置 Chrome 浏览器
IronPDF 荣幸地使用了 Chrome 浏览器渲染引擎。请按照以下步骤操作，以便 IronPDF 在 Chrome 浏览器中准确呈现您的 HTML。要实现这一点，需要事先在 Chrome 浏览器中完成以下几个步骤。
要呈现像素完美的 PDF 文件（包括打印格式中通常省略的所有图像、图标和背景），请确保使用 "屏幕 "CSS 媒体选项。
2a.打开 DevTools，在 Chrome 浏览器中将启用模拟 CSS 媒体设置为屏幕/打印
1.为此，请在 Chrome 浏览器中 打开 DevTools.
<img src="/static-assets/pdf/how-to/pixel-perfect-html-to-pdf/open_devtools.gif" alt="在 Chrome 浏览器中使用 "检查" class="img-responsive add-shadow" style="margin-bottom: 30px;">
- 按 Command+Shift+P (Mac) 或 Control+Shift+P (Windows、Linux、ChromeOS) 打开命令菜单。开始键入 rendering（渲染），选择 Show Rendering（显示渲染），然后按 Enter。DevTools 会在 DevTools 窗口底部显示 "渲染 "选项卡。 (更多帮助)
- 向下导航，找到 "Emulate CSS media "的下拉菜单，然后选择 "Screen"（屏幕）或 "Print"（打印）选项。如果您在网页上，可能需要重新加载 (Ctrl+R) 设置才能生效。
打印
屏幕
2b.打开打印预览窗口 (在 Windows 上按 Ctrl+P)
您可能需要更改纸张大小，并在 Chrome 浏览器打印对话框中启用 "打印背景图像"，以获得准确的显示效果。
2c.设置正确的打印预览设置
- 请选择您在 IronPDF 项目中使用的纸张尺寸，如 "A4 "或 "Letter"。
- 在 "页边距 "下拉菜单中选择 "自定义"，并将四边都设置为 (1") 一英寸边距。
- 启用 "背景图形 "复选框。
- 如果要输出横向文档，请确保将 "布局 "设置为 "横向"。
仅此而已。现在，您可以调试 HTML 并使用打印预览来查看 IronPDF 将如何呈现您的布局。
3.设置 IronPDF
3a.在 IronPDF 中设置 CSS 媒体类型
为了 100% 精确地匹配网页设计，我们必须在代码中选择与在 Chrome 浏览器中设置的相同的 CSS 媒体类型。
请记住，"PdfCssMediaType.Screen "包含背景和较大的图片，而 "PdfCssMediaType.Print "格式可能会省略这些内容。
:path=/static-assets/pdf/content-code-examples/how-to/pixel-perfect-html-to-pdf-2.cs// Example using PdfCssMediaType.Screen
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Screen; // or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = true;' Example using PdfCssMediaType.Screen
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Screen ' or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True3b.适当设置渲染延迟和渲染超时
IronPDF 的默认渲染超时时间为 60 秒。如果渲染过程超过这个时间，就会出现超时异常。要覆盖默认设置，需要调整 RenderingOptions.Timeout 选项。另一方面，渲染延迟值是 IronPDF 在开始渲染前应等待的时间。这个等待时间对于图片、字体和 JavaScript 代码等资产的正常执行至关重要。
请记住，如果没有设置超时或渲染延迟时间长于设置的超时，都会产生 "无法渲染 PDF"异常。因此，如果遇到这种错误，可能需要增加这些值。
:path=/static-assets/pdf/content-code-examples/how-to/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); // millisecondsIRON VB CONVERTER ERROR developers@ironsoftware.com- WaitFor 和 JavaScript (代码示例)
- 等待 (API文档)
