Debug HTML in Chrome for Pixel-Perfect PDFs with C

為什麼 IronPDF 與其他 .NET PDF 函式庫不同？

IronPDF 使用 Google Chrome 渲染器，確保 HTML 在 PDF 中的顯示與在 Chrome 瀏覽器中一模一樣。 本指南涵蓋了在 Chrome 和 IronPDF 中為達到此效果所需的設定。 進一步了解 Chrome PDF 渲染引擎，以瞭解其進階功能。

許多競爭對手的"HTML 到 PDF"技術不符合 W3C 標準或不支援 HTML5、CSS3 或 JavaScript，使用的基本渲染器像 C# 中 wkhtmltopdf 的比較。 如需詳細的效能比較，請參閱 iText vs IronPDF 分析。

IronPDF 與競爭對手相比如何？

IronPDF

下載PDF

原版 Chrome

下載PDF

Aspose.PDF

下載PDF

iText

下載PDF

wkhtmltopdf

下載PDF

若要查看與其他產品比較的完整清單，請參閱 比較部落格.。

Iron Software 程式庫功能 | 使用 IronPDF 的 Chrome 渲染引擎 | Aspose vs IronPDF 分析 | iText vs IronPDF 比較

在 Chrome 瀏覽器中按鈕被切掉時會發生什麼事？

當文字在 Chrome 瀏覽器中被切掉時會發生什麼事？

何時應該使用重複表頭？

適用於橫跨多頁且具有重複標題的表格：

• 請僅使用 列印 CssMediaType
• 螢幕 模式僅列印一次標題

使用此 HTML 結構可確保正確的表格呈現：

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

<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Widget A</td>
            <td>10</td>
            <td>$25.00</td>
        </tr>
        <tr>
            <td>Widget B</td>
            <td>5</td>
            <td>$40.00</td>
        </tr>
        <!-- Additional rows spanning multiple pages.
             The <thead> header row repeats automatically at the top of each page. -->
    </tbody>
</table>

螢幕模式與列印模式的視覺差異為何？

許多圖片和圖示在 螢幕 模式下可正常載入，但在 列印 模式下則無法載入：

如何在 Chrome DevTools 中啟用 CSS 媒體模擬？

1.在 Chrome 內，在 Chrome 中開啟 DevTools。

2. 按 Command+Shift+P (Mac) 或 Control+Shift+P (Windows、Linux、ChromeOS) 開啟指令選單。 輸入 rendering，選擇"顯示渲染"，然後按下 Enter 鍵。 DevTools 在底部顯示 Rendering 選項卡。 有關渲染設置的更多資訊

3. 前往"模擬 CSS 媒體"下拉選單，並選擇 螢幕 或 列印。 如果在網頁上，請重新載入 (Ctrl+R) 以使設定生效。

列印

螢幕

如何存取"列印預覽"視窗？

更改紙張大小，並在 Chrome 列印對話框中啟用"列印背景圖片"，以獲得準確的顯示效果。 有關自訂紙張尺寸，請參閱 自訂紙張尺寸指南。

我應該使用何種列印預覽設定？

• 選擇您 IronPDF 專案中使用的紙張尺寸 (A4 或 Letter)
• 在 Margins 下選取 Custom，並將所有邊距設定為 1 英吋
• 啟用 Background Graphics 核取方塊
• 若文件為橫向排版，請將 Layout 設定為 Landscape

這些設定可透過列印預覽除錯 HTML，準確顯示 IronPDF 如何渲染版面。

如何在 IronPDF 中匹配 CSS 媒體型別？

要 100% 精確地匹配網頁設計，請在 Chrome 瀏覽器中選擇相同的 CSS 媒體型別集。

請注意，PdfCssMediaType.螢幕 格式包含 PdfCssMediaType.列印 格式中省略的背景與較大圖片，後者是為節省印表機墨水而設計的。

: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 秒。 當 rendering 需要較長時間時，會發生超時異常。 透過調整 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 渲染以進行進階時間控制