在 Chrome 浏览器中调试 HTML，使用 C# 实现像素完美的 HTML 转 PDF

在 Chrome 浏览器中按钮被切断时会发生什么？

在 Chrome 浏览器中文本被截断时会发生什么？

何时应使用重复表头？

对于跨多个页面、标题重复的表格：

• 仅使用 打印 CssMediaType
• 屏幕 模式仅打印一次标头

确保使用此 HTML 结构正确呈现表格：

:path=/static-assets/pdf/content-code-examples/how-to/pixel-perfect-html-to-pdf-table-example.html

// 该代码片段不可用！

屏幕模式和打印模式在视觉上有什么区别？

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

如何在 Chrome DevTools 中启用 CSS 媒体模拟？

1.在 Chrome 浏览器中，在 Chrome 浏览器中打开 DevTools。

2. 按Command+Shift+P(Mac)或Control+Shift+P(Windows, Linux, ChromeOS)以打开命令菜单。 输入 rendering，选择 Show Rendering，然后按 Enter。 DevTools 在底部显示 "渲染 "选项卡。 更多渲染设置的帮助

3. 导航到"模拟 CSS 媒体"下拉菜单，然后选择 屏幕 或 打印。 如果在网页上，请重新加载 (Ctrl+R) 以使设置生效。

打印

屏幕

如何访问打印预览窗口？

在 Chrome 打印对话框中更改纸张大小并启用 "打印背景图片"，以便准确显示。 有关自定义纸张尺寸，请参阅 自定义纸张尺寸指南。

我应该使用哪些打印预览设置？

• 选择IronPDF项目中使用的纸张尺寸(A4 或 Letter)
• 在 Margins 下，选择 Custom 并将所有边长设置为 1 英寸
• 启用 Background Graphics 复选框
• 将 Layout 设置为 Landscape 以用于横向文档

这些设置可通过打印预览调试 HTML，准确显示 IronPDF 如何渲染布局。

如何在 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

为什么渲染延迟和渲染超时很重要？

IronPDF 的默认渲染超时为 60 秒。 当渲染时间较长时，会出现超时异常。 通过调整 RenderingOptions.Timeout 来覆盖默认值。 渲染延迟可为图片、字体和 JavaScript 等资产的正常加载留出时间。 对于 JavaScript 较多的页面，请参阅 JavaScript(自定义渲染延迟) 指南。

: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

未设置超时或渲染延迟超过超时会产生"无法渲染 PDF"异常。 如果遇到此错误，请增加这些值。

• WaitFor 和 JavaScript 代码示例。 -使用 WaitFor 延迟 PDF 渲染以实现高级定时控制