1. IronPDF
2. 教程
3. 使用 Chrome 调试 HTML

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

作为IronPDF的开发者，我们明白用IronPDF制作的PDF文件不仅需要看起来完美，而且还需要完全符合我们客户的期望。 要使您的PDF看起来像素完美，您需要开发出色的HTML模板，或者与网页开发人员合作为您完成。 IronPDF具有将PDF渲染为与您的HTML像素完美对应的选项，并且由于我们的Chrome渲染器，使其看起来与在Chrome中的显示完全相同。

什么是 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/tutorials/pixel-perfect-html-to-pdf/bootstrap_aspose_p1.webp" alt="Aspose.PDF" data-fullsize="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_aspose_p1.webp" >

下载 PDF

iText

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

下载 PDF

wkhtmltopdf

class="competitors__image img-popup" src="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_wkhtmltopdf_p1.webp" alt="wkhtmltopdf" data-fullsize="/static-assets/pdf/tutorials/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/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

' Pixel Perfect HTML Formatting Settings
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print ' or Screen

重复表头

如果您有包含表格的HTML，且表格将跨越多页，您可能希望表格标题在每个PDF页面上重复显示。

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

屏幕和打印示例的比较

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

2. 设置 Chrome

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

要渲染包含所有通常在打印格式中省略的图片、图标和背景的像素完美PDF，请务必使用Screen CSS媒体选项。 2a. 打开 DevTools 并在 Chrome 中设置启用模拟 CSS 媒体为屏幕/打印

1. 要做到这一点，在Chrome中打开 DevTools. <img src="/static-assets/pdf/tutorials/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/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;

' Example using PdfCssMediaType.Screen
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen ' or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

• 渲染延迟和 JavaScript (代码示例)
• 渲染延迟 (API文档)
• 超时 (API文档)