1. IronPDF
2. 操作指南
3. 使用 Chrome 调试 HTML

如何在 Chrome 浏览器中调试 HTML 以创建像素完美的 PDF

作为IronPDF的开发者，我们了解由IronPDF创建的PDF文档不仅需要看起来完美，而且需要完全符合我们客户的期望。 要实现像素级完美的PDF文件，您需要开发出色的HTML模板，或与网页开发人员合作为您创建。 IronPDF提供了将您的PDF像素级完美呈现为HTML的选项，确保它们的显示效果与在Chrome中的显示完全相同，这得益于我们的Chrome Renderer。

什么是 IronPDF 的 Chrome 渲染器？

它使IronPDF不同于其他.NET PDF库

IronPDF在市场上独树一帜，因为它使用了Google Chromium渲染器，这意味着您在Chrome浏览器中看到的HTML与您在我们的PDF中看到的完全相同。 在本指南中，我们将引导您完成在Chrome和IronPDF中需要应用的一些设置。

为了明确，许多竞争对手实现的所谓“HTML转PDF”技术并不符合W3C标准，甚至不支持HTML5、CSS3或JavaScript，并使用诸如此类的基础渲染器。 wkhtmltopdf.

IronPDF 与竞争对手的比较

IronPDF

下载 PDF

香草铬

下载 PDF

Aspose.PDF

class="competitors__image img-popup" src="/static-assets/pdf/how-to/pixel-perfect-html-to-pdf/bootstrap_aspose_p1.webp" alt="Aspose.PDF" data-fullsize="/static-assets/pdf/how-to/pixel-perfect-html-to-pdf/bootstrap_aspose_p1.webp" >

下载 PDF

iText

class="competitors__image img-popup" src="/static-assets/pdf/how-to/pixel-perfect-html-to-pdf/bootstrap_itext.webp" alt="iText" data-fullsize="/static-assets/pdf/how-to/pixel-perfect-html-to-pdf/bootstrap_itext.webp" >

下载 PDF

wkhtmltopdf

class="competitors__image img-popup" src="/static-assets/pdf/how-to/pixel-perfect-html-to-pdf/bootstrap_wkhtmltopdf_p1.webp" alt="wkhtmltopdf" data-fullsize="/static-assets/pdf/how-to/pixel-perfect-html-to-pdf/bootstrap_wkhtmltopdf_p1.webp" >

下载 PDF

要查看与其他产品比较的完整列表，请参阅我们的博客.

特点 IronPDF 的 Chrome 浏览器渲染器 Aspose 与 IronPDF iText 与 IronPDF

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

IronPDF超越Chrome自身的两个例子。 使用IronPDF，原本会在Chrome上分为两页显示的按钮和文本可以完整保留。

在 Chrome 浏览器中按钮和文本被截断的示例：

Chrome 浏览器中文字被截断的另一个示例：

为什么使用HTML转PDF？

开发者喜欢HTML转PDF，因为它提供了与现有网页品牌相匹配的可预测结果。 设计采用了文档齐全的标准化HTML、CSS和JavaScript技术实现。

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

1. 决定使用 CSS 媒体类型 Print 或 Screen

IronPDF的渲染器有两种媒体渲染选项：Print(默认)和Screen。 有关并排比较的视觉效果，请参见本节末. 根据“屏幕与打印示例对比”部分。

• CssMediaType.Print 是默认的渲染选项，它将您的 HTML 优化为通用打印机使用。 这意味着页面上的一些背景图片、图标和其他墨迹浓重的元素可能会有不同的渲染效果或被省略。 此选项适用于没有背景图片的文档，并且是默认的打印预览设置。
• CssMediaType.Screen是一种渲染选项，可以让您的PDF文件在屏幕上的显示效果与在Chrome中的显示效果完全一致。 您需要在Chrome浏览器中设置一些选项，以便启用打印预览，使其在HTML调试时的显示效果与IronPDF渲染的效果完全相同。

: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页面上重复显示。

• 在这种情况下，您只能使用Print CssMediaType。
• 使用Screen指令可以让Chrome只打印一次头部。

屏幕和打印示例的比较

在“打印”模式下，许多图像和图标无法加载，但在“屏幕”模式下可以加载。

2. 设置 Chrome

IronPDF 自豪地使用 Chrome 渲染引擎。按照以下步骤，让 IronPDF 能够像在 Chrome 中一样精确渲染您的 HTML。 这是在 Chrome 中需要预先执行的几个步骤，以实现这一目标。

要渲染包含所有图像、图标和背景的像素完美PDF，通常在打印格式中省略，确保使用Screen CSS Media选项。 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;">

2. 按 Command+Shift+P(Mac)或 Control+Shift+P(Windows、Linux、ChromeOS)打开命令菜单。 开始键入渲染，选择显示渲染，然后按回车键。 DevTools在您的DevTools窗口底部显示渲染选项卡。 (更多帮助）

   
3. 向下导航并找到Emulate CSS media的下拉菜单，然后选择Screen或Print选项。 如果您在网页上，您可能需要重新加载(Ctrl+R)设置才能生效。
   

   打印

   

   屏幕

   2b. 打开打印预览窗口(在 Windows 上按 Ctrl+P)

您可能需要在 Chrome 打印对话框中更改纸张大小并启用“打印背景图像”以获得准确的显示。 2c. 设置正确的打印预览设置

• 请选择您在IronPDF项目中使用的纸张大小，例如A4或Letter。
• 在“边距”下拉菜单中选择“自定义”，并将四边都设置为(1")一英寸边距。
• 启用Background Graphics复选框。

• 确保如果您打算输出横向文档，将您的Layout设置为Landscape。

  这就是全部。 您现在可以调试您的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 = True

3b.

设置渲染延迟和渲染超时时间 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); // milliseconds

IRON VB CONVERTER ERROR developers@ironsoftware.com

• WaitFor 和 JavaScript (代码示例)
• 等待 (API文档)