1. IronPDF
  2. 操作指南
  3. using Chrome 除錯 HTML
如何在 Chrome 中除錯 HTML 以建立像素級精準的 PDF

Debug HTML in Chrome for Pixel-Perfect PDFs with C

Curtis Chau
Curtis Chau
更新:
This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDF 的 Chrome 渲染器使開發人員可以創建與 Chrome 中顯示的 HTML 設計完全一致的像素級精確的 PDF，支援 HTML5、CSS3 和 JavaScript 用於精準的文件生成。

IronPDF 可確保 PDF 的外觀與預期完全一致。 要達到像素般完美的效果，需要優異的 HTML 範本或與網頁開發人員合作建立範本。 IronPDF 透過其 Chrome Renderer 將 PDF 譯成與 Chrome 瀏覽器顯示相同的 PDF。 如需全面的入門文件，請造訪 快速入門指南。

快速入門：使用IronPDF生成像素完美的PDF

IronPDF 的 Chrome 渲染器使 HTML 到 PDF 的轉換變得簡單。 本指南可幫助開發人員製作像素完美的 PDF 文件，這些文件可完全鏡射 HTML 設計，如同在 Chrome 中顯示的一樣。 過程中確保對 HTML5、CSS3 和 JavaScript 元素的完全支援。 請遵循以下步驟來建立 PDF，以維持網頁品牌與設計的完整性。 如需更多 HTML 至 PDF 的轉換技巧，請查看 HTML 至 PDF 教程。

  1. using NuGet 套件管理員安裝 https://www.nuget.org/packages/IronPdf

    PM > Install-Package IronPdf

  2. 請複製並執行此程式碼片段。

    // Initialize Chrome PDF renderer with IronPDF
IronPdf.ChromePdfRenderer.RenderHtmlAsPdf("<html><body>Hello World</body></html>").SaveAs("output.pdf");

  3. 部署至您的生產環境進行測試

    立即透過免費試用，在您的專案中開始使用 IronPDF

    arrow pointer

IronPDF 的 Chrome 渲染器是什麼？

為什麼 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

IronPDF rendering of Bootstrap components showing pixel-perfect HTML to PDF conversion

下載PDF

原版 Chrome

Chrome browser's native PDF rendering of Bootstrap components for comparison

下載PDF

Aspose.PDF

Aspose.PDF rendering showing limited Bootstrap component support

下載PDF

iText

iText PDF rendering demonstrating incomplete HTML/CSS support

下載PDF

wkhtmltopdf

wkhtmltopdf rendering showing outdated WebKit engine limitations

下載PDF

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

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

IronPDF 的 Chrome 渲染器如何超越標準 Chrome？

IronPDF 在兩個關鍵領域超越 Chrome。 使用 IronPDF 時，Chrome 會分割頁面的按鈕和文字保持不變。 優異的渲染效果來自最佳化的列印演算法和先進的分頁處理。 如需管理分頁符的詳細資訊，請參閱 Page Breaks Guide。

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

IronPDF 與 Chrome 的渲染：IronPDF 保留了完整的按鈕，而 Chrome 則在分頁時截斷元素

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

IronPDF 與 Chrome 瀏覽器的渲染比較，顯示 IronPDF 的完整文字顯示與 Chrome 瀏覽器的文字截斷比較

開發人員為何要使用 HTML to PDF？

HTML to PDF 可提供與現有網路品牌相匹配的可預期結果。 設計使用標準化的 HTML、CSS 及 JavaScript 技術。 若要從頭開始建立 PDF，請探索 Create New PDFs 文件。

  • 樣式和設計完全匹配網站
  • 網頁開發人員可以做到絕對精確
  • 後端開發人員專注於邏輯而非佈局

如何選擇 CSS 媒體類型"列印"或"螢幕"？

IronPDF 的渲染器提供兩種媒體渲染選項：列印（預設）與 螢幕。 如需直觀的比較，請參閱 本節末。 關於響應式 CSS 處理，請參閱 CSS (螢幕 & 列印) 指南。

  • CssMediaType.列印 會針對列印需求優化 HTML 格式，可能省略背景圖片、圖示及耗墨量大的元素。 適合沒有背景圖片的文件。
  • CssMediaType.螢幕 能精確呈現 PDF 文件在 Chrome 中的顯示效果。 需要特定的 Chrome 瀏覽器設定，以進行精確的列印預覽除錯。
: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
$vbLabelText   $csharpLabel

何時應該使用重複表頭？

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

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

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

:path=/static-assets/pdf/content-code-examples/how-to/pixel-perfect-html-to-pdf-table-example.html
// 此程式碼片段無法顯示！
HTML

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

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

CSS PRINT 與螢幕媒體類型的比較，展示 Mac 網頁的純文字列印版面與圖像豐富的螢幕版面
MacBook Pro 規格比較圖，展示 CSS PRINT 與螢幕媒體類型在佈局及圖示顯示上的差異

如何設定 Chrome 瀏覽器以進行像素完美的除錯？

IronPDF 使用 Chrome 渲染引擎。按照以下步驟，IronPDF 將完全按照 Chrome 瀏覽器中的顯示方式渲染 HTML。 如需其他渲染自訂功能，請參閱 Rendering Options 文件。

若要渲染像素級精準的 PDF 檔案（包含通常在 PRINT 格式中被省略的所有圖片、圖示及背景），請使用 螢幕 CSS 媒體選項。

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

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

Chrome browser showing how to access Developer Tools for PDF debugging
  1. 按 Command+Shift+P (Mac) 或 Control+Shift+P (Windows、Linux、ChromeOS) 開啟指令選單。 輸入 rendering，選擇"顯示渲染"，然後按下 Enter 鍵。 DevTools 在底部顯示 Rendering 選項卡。 有關渲染設置的更多信息
Chrome DevTools showing how to access Rendering panel for CSS media emulation
  1. 前往"模擬 CSS 媒體"下拉選單，並選擇 螢幕 或 列印。 如果在網頁上，請重新載入 (Ctrl+R) 以使設定生效。
Chrome DevTools showing CSS 列印 media type emulation settings

列印

Chrome DevTools Rendering panel showing CSS media emulation options with dropdowns set to No emulation

螢幕

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

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

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

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

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

如何配置 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
$vbLabelText   $csharpLabel

為什麼渲染延遲和渲染逾時很重要？

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
$vbLabelText   $csharpLabel

未設定逾時或渲染延遲超過逾時會產生"無法渲染 PDF"異常。 如果遇到此錯誤，請增加這些值。

請注意Aspose、iText、wkhtmltopdf和PuppeteerSharp是其各自所有者的註冊商標。 本網站與 Aspose、iText、wkhtmltopdf 或 Puppeteer 沒有任何關聯，也未獲得其認可或贊助。 所有產品名稱、標誌和品牌均為其各自擁有者的財產。 比較的提供僅供參考，根據撰寫時可公開獲得的信息。）}]

常見問題

為何使用 C# 建立的 PDF 檔案外觀與 Chrome 瀏覽器中的顯示效果完全一致？

IronPDF 採用 Google Chrome 渲染引擎，確保 PDF 中的 HTML 顯示效果與 Chrome 瀏覽器完全一致。此 Chrome 渲染引擎全面支援 HTML5、CSS3 及 JavaScript，可生成像素級精準的 PDF 檔案，完美呈現您的網頁設計。

如何使用 C# 快速將 HTML 轉為 PDF？

您只需一行程式碼，即可使用 IronPDF 的 Chrome 渲染器建立 PDF 檔案：IronPdf.ChromePdfRenderer.RenderHtmlAsPdf("Hello World").SaveAs("output.pdf")。此簡易方法利用 Chrome 渲染引擎，能立即產生像素級精準的 PDF 檔案。

為何某些 HTML 轉 PDF 函式庫產生的結果與預期不同？

許多競爭對手的 HTML 轉 PDF 技術未能符合 W3C 標準，或缺乏對 HTML5、CSS3 或 JavaScript 的支援。IronPDF 的 Chrome 渲染器可確保您的 PDF 文件與 Chrome 瀏覽器中的顯示效果完全一致，這點有別於使用過時渲染器（如 wkhtmltopdf）的函式庫。

PDF 生成功能支援哪些 HTML 和 CSS 特性？

IronPDF 的 Chrome 渲染器支援完整的現代網頁技術，包括 HTML5、CSS3 和 JavaScript。這種全面的支援確保複雜的版面配置、動畫、響應式設計以及互動元素都能在您的 PDF 文件中精確呈現。

如何確保我的 PDF 文件能維持網站的品牌形象與設計一致性？

IronPDF 透過其 Chrome Renderer，能以與 Chrome 瀏覽器完全一致的方式呈現 PDF 文件。若您先在 Chrome 中對 HTML 範本進行除錯，再使用 IronPDF 進行轉換，即可完全維持設計的一致性，並確保 PDF 文件能精確保留所有品牌元素，完全符合預期效果。

Curtis Chau
Curtis Chau
  立即與工程團隊聯繫
技術撰稿人

Curtis Chau 擁有卡爾頓大學（Carleton University）的電腦科學學士學位，專精於前端開發，並精通 Node.js、TypeScript、JavaScript 及 React。他熱衷於打造直觀且美觀的用戶介面，喜歡運用現代框架，並創建結構完善、視覺上吸引人的手冊。

除了開發工作之外，Curtis 對物聯網（IoT）抱有濃厚興趣，致力於探索整合硬體與軟體的創新方法。閒暇時，他喜歡玩遊戲和開發 Discord 機器人，將對科技的熱愛與創意相結合。

準備開始了嗎？
Nuget 下載 19,014,616 | 版本： 2026.5 just released
Still Scrolling Icon

還在往下捲動嗎？

想要快速確認成果嗎？ PM > Install-Package IronPdf
執行範例 觀看您的 HTML 轉為 PDF。