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

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

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 Renderer。

什么是 IronPDF 的 Chrome 渲染器？

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

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

需要明确的是，许多竞争对手声称的 "HTML 转 PDF "技术并不符合 W3C 标准，甚至不支持 HTML5、CSS3 或 JavaScript，而且使用的底层呈现器如C# 中的 wkhtmltopdf 比较.

IronPDF 与竞争对手的比较

IronPDF

IronPDF

下载 PDF

香草铬

香草Chrome

下载 PDF

Aspose.PDF

related to IronPDF 与竞争对手的比较 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

related to IronPDF 与竞争对手的比较 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

related to IronPDF 与竞争对手的比较 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

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

IronSoftware 库的功能 使用 IronPdf 的 Chrome 渲染引擎 Aspose 与 IronPDF 的对比分析 iText 与 IronPDF 对比

IronPdf 优化后的 Chrome 渲染器优于 Chrome 浏览器

IronPDF超越Chrome自身的两个例子。 使用 IronPDF 时，原本在 Chrome 浏览器中会被分割成两页的按钮和文本将保持原样。

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

在 Chrome 浏览器中关闭按钮，但在 IronPDF 中未关闭按钮

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

文本在 Chrome 浏览器中被截断，但在 IronPDF 中没有被截断

为什么使用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
VB   C#

重复表头

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

  • 在这种情况下，您只能使用Print CssMediaType。

  • 使用Screen指令可以让Chrome只打印一次头部。

屏幕和打印示例的比较

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

打印示例 1

屏幕 1 示例

2. 设置 Chrome

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

要渲染包含所有图像、图标和背景的像素完美PDF，通常在打印格式中省略，确保使用Screen CSS Media选项。 2a. 打开 DevTools 并在 Chrome 浏览器中设置启用仿真 CSS 媒体到屏幕/打印

  1. 要做到这一点，在Chrome中在 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;">

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

    转到显示渲染，然后查找 CSS 媒体类型
  2. 向下导航并找到Emulate CSS media的下拉菜单，然后选择Screen或Print选项。 如果您在网页上，您可能需要重新加载(Ctrl+R)设置才能生效。
    切换到 CSS 媒体类型 打印

    打印

    切换到 CSS 媒体类型屏幕

    屏幕

    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
VB   C#

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
VB   C#