1. IronPDF
  2. 教程
  3. 用 Chrome 調試 HTML
如何使用 C# 在 .NET 8 中將 HTML 轉換為 PDF | IronPDF

How to Debug HTML in Chrome to Create Pixel Perfect PDFs in C

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

身為IronPDF的開發者，我們深知IronPDF產生的 PDF 文件不僅要看起來完美無瑕，還要完全符合客戶的預期。 要讓您的 PDF 檔案看起來像素完美，您需要開發優秀的 HTML 模板，或與 Web 開發人員合作完成這項工作。 IronPDF提供多種選項，可將您的 PDF 文件渲染成與 HTML 文件像素完美匹配，並且由於採用了 Chrome 渲染器，其外觀與在 Chrome 瀏覽器中的顯示效果完全相同。

快速入門：使用IronPDF建立像素級完美 PDF

使用 IronPDF 強大的 Chrome 渲染器，輕鬆將 HTML 轉換為像素級完美的 PDF。 本快速指南可協助您利用 IronPDF 對 HTML5、CSS3 和JavaScript的全面支持，實現精確且可預測的 PDF 輸出。 只需幾行程式碼，即可將 HTML 內容完全按照 Chrome 中的顯示方式呈現，確保從網頁到 PDF 的無縫過渡。 非常適合希望在不犧牲易用性的前提下保持佈局精確性的開發人員。

  1. 使用NuGet套件管理器安裝https://www.nuget.org/packages/IronPdf

    PM > Install-Package IronPdf

  2. 複製並運行這段程式碼。

    var Renderer = new IronPdf.ChromePdfRenderer();
Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
Renderer.RenderHtmlAsPdf("<html>Your HTML content here</html>").SaveAs("output.pdf");

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

    今天就在您的專案中開始使用免費試用IronPDF

    arrow pointer

IronPDF 的 Chrome 渲染器是什麼？

這使得IronPDF與其他.NET PDF 庫區分開來

IronPDF在市場上獨樹一幟，因為它採用了 Google Chromium 渲染器，這意味著您在 Chrome 瀏覽器中看到的 HTML 與您在我們的 PDF 中看到的 HTML 完全一樣。 在本教學中，我們將引導您完成在 Chrome 和IronPDF中需要應用的一些設置，以實現此目的。

需要明確的是，許多競爭對手聲稱的"HTML 轉 PDF"技術並不符合 W3C 標準，甚至不支援 HTML5、CSS3 或JavaScript，並且使用wkhtmltopdf等底層渲染器。

IronPDF與競爭對手相比

IronPDF

IronPDF

下載PDF

原版 Chrome

原版 Chrome

下載PDF

Aspose.PDF

Aspose.PDF

下載PDF

iText

iText

下載PDF

wkhtmltopdf

wkhtmltopdf

下載PDF

如需查看與其他產品的完整比較列表，請造訪我們的部落格。

[pFeatures related to IronPDF與競爭對手相比功能] | IronPDF 的 Chrome 渲染器 | Aspose 與IronPDF | iText 與IronPDF對比

IronPDF 的最佳化版 Chrome 渲染器比 Chrome 好

IronPDF超越 Chrome 的兩個例子。 使用 Chrome 時會被分成兩頁顯示的按鈕和文本，在IronPDF中仍然保持完整。

Chrome瀏覽器中按鈕和文字被截斷的範例

按鈕在 Chrome 中被截斷，但在IronPDF中沒有被截斷

Chrome 瀏覽器中文字被截斷的另一個例子

Chrome 中文字被截斷，但在IronPDF中沒有被截斷

為什麼要使用 HTML 轉 PDF？

開發人員喜歡 HTML 轉 PDF，因為它能提供可預測的結果，並且與現有的網站品牌形象相符。 設計採用文件完善的標準化 HTML、CSS 和JavaScript技術實作。

  • 輸出檔案的佈局和設計與網站完全一致。
  • 網站開發人員可以專注於進行絕對精確的設計。
  • .NET開發人員可以專注於應用程式邏輯，而不是佈局。 後端開發人員可以將佈局和設計任務委託給網頁設計師。

1. 決定使用 CSS 媒體類型"列印"還是"螢幕"

IronPDF 的渲染器有兩種媒體渲染選項： 列印 (預設)和 螢幕。 如需進行直覺的並排比較，請參閱本教學課程末端的"螢幕和列印範例比較"部分。

  • CssMediaType.Print 是預設的渲染選項，可最佳化 HTML 以便在印表機上正常使用。 這意味著頁面上的一些背景圖像、圖示和其他耗墨元素可能會以不同的方式呈現，或者會被省略。 此選項適用於沒有背景圖像的文檔，並且是預設的列印預覽。
  • CssMediaType.Screen 是渲染選項，它可以讓你的 PDF 檔案在螢幕上看起來與在 Chrome 瀏覽器中顯示的效果完全一致。 您需要在 Chrome 瀏覽器中設定一些選項，才能讓列印預覽看起來與IronPDF在 HTML 偵錯時呈現的效果完全一致。
: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
$vbLabelText   $csharpLabel

重複的表格標題

如果您的 HTML 檔案中包含跨越多頁的表格，您可能會想要表格標題在每個 PDF 頁面上重複顯示。

  • 在這種情況下，您只能使用 列印 CssMediaType。
  • 使用 螢幕 指示 Chrome 只列印一次標頭。

螢幕和列印範例的比較

許多圖片和圖示在列印模式下無法加載，但在螢幕模式下可以加載：

列印範例 1 畫面 1 範例

2. 設定 Chrome 瀏覽器

IronPDF自豪地使用 Chrome 渲染引擎。請依照以下步驟操作，讓IronPDF將您的 HTML 程式碼渲染得與您在 Chrome 瀏覽器中看到的效果完全一致。 要在 Chrome 中實現此目的，需要事先執行以下步驟。

若要渲染包含所有圖像、圖示和背景(通常在列印格式中省略)的像素完美 PDF，請務必使用 螢幕 CSS 媒體選項。

2a. 在 Chrome 瀏覽器中開啟開發者工具，並將"啟用 CSS 媒體模擬"設定為"螢幕/列印"

  1. 為此，請在 Chrome 中開啟 DevTools 。

    使用 Chrome 的

  2. 按 Command+Shift+P (Mac) 或 Control+Shift+P (Windows、Linux、ChromeOS) 開啟指令選單。 開始輸入渲染，選擇"顯示渲染"，然後按 Enter 鍵。 DevTools 會在 DevTools 視窗底部顯示"渲染"標籤。 更多幫助

前往

  1. 向下捲動找到 Emulate CSS media 的下拉式選單，然後選擇 螢幕 或 列印 選項。 如果您正在瀏覽網頁，可能需要重新載入(Ctrl+R)才能使設定生效。
Switch to CSS Media Type 列印

列印

Switch to CSS Media Type 螢幕

螢幕

2b. 開啟列印預覽視窗(Windows 系統按 Ctrl+P)

為了獲得準確的顯示效果，您可能需要在 Chrome 列印對話方塊中變更紙張尺寸並啟用"列印背景圖片"。

2c. 設定正確的列印預覽設定

  • 請選擇您在IronPDF專案中使用的紙張尺寸，例如 A4 或 Letter。
  • 在 Margins 下拉選單中選擇 Custom，並將所有四邊設為 (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;
$vbLabelText   $csharpLabel

3b. 適當設定渲染延遲和渲染超時時間

IronPDF 的預設渲染逾時時間為 60 秒。 任何處理時間超過此限制的內容，如果不修改渲染選項，將無法渲染。 要覆蓋預設設置，您需要調整 RenderingOptions.Timeout 選項。

請記住，如果未設定逾時或渲染延遲超過您設定的逾時時間，則會產生 Unable to Render 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
$vbLabelText   $csharpLabel

準備好要看看你還能做什麼了嗎？ 請造訪我們的教學頁面：附加功能

常見問題解答

如何從 HTML 獲得像素完美的 PDF 渲染？

要從 HTML 獲得像素完美的 PDF 渲染，您可以使用 IronPDF 的 Chrome 渲染器，這確保在 Chrome 瀏覽器中顯示的 HTML 內容與生成的 PDF 完全相同。

使用 IronPDF 進行 HTML 至 PDF 轉換的好處是什麼？

IronPDF 允許開發人員生成與 Web 瀏覽器中 HTML 內容的視覺外觀匹配的 PDF，支持 HTML5、CSS3 和 JavaScript，這與許多其他庫不同。

如何在 IronPDF 中配置 CSS 媒體類型？

您可以通過選擇“打印”來配置 IronPDF 中的 CSS 媒體類型，以適用於無背景的文檔，或“屏幕”來匹配屏幕顯示，以確保 PDF 輸出符合您的需求。

設置 Chrome 以進行 PDF 渲染需要遵循哪些步驟？

要設置 Chrome 進行 PDF 渲染，請打開開發者工具，啟用“模擬 CSS 媒體”為“屏幕/打印”，並調整打印預覽設置，以確保 PDF 符合所需的佈局。

如何解決 IronPDF 的渲染問題？

如果您遇到渲染問題，例如“無法渲染 PDF”異常，請嘗試在 IronPDF 的選項中增加渲染延遲或渲染超時設置以獲得更好的結果。

我可以使用 IronPDF 渲染與網頁設計相匹配的 PDF 嗎？

可以，IronPDF 允許您使用 Google Chromium 渲染器渲染與您的網頁設計完全匹配的 PDF，提供對所有現代 Web 技術的支持。

為什麼 IronPDF 使用 Google Chromium 渲染器？

IronPDF 使用 Google Chromium 渲染器以確保在 Chrome 瀏覽器中顯示的 HTML 與創建的 PDF 相同，提供一致且高質量的輸出。

IronPDF 與 .NET 10 相容嗎？我可以在新的 .NET 10 專案中使用 IronPDF 嗎？

是的，IronPDF 明確支援 .NET10（以及 .NET9、.NET8 和更早版本），開箱即相容。您可以在您的專案中以 .NET 10 為目標，使用 IronPDF 的 HTML-to-PDF、渲染、編輯和簽署 API，而不需要特別的變通。

Curtis Chau
Curtis Chau
  立即與工程團隊聊天
技術作家

Curtis Chau 擁有卡爾頓大學計算機科學學士學位，專注於前端開發，擅長於 Node.js、TypeScript、JavaScript 和 React。Curtis 熱衷於創建直觀且美觀的用戶界面，喜歡使用現代框架並打造結構良好、視覺吸引人的手冊。

除了開發之外，Curtis 對物聯網 (IoT) 有著濃厚的興趣，探索將硬體和軟體結合的創新方式。在閒暇時間，他喜愛遊戲並構建 Discord 機器人，結合科技與創意的樂趣。

準備好開始了嗎？
Nuget 下載 17,803,474 | 版本： 2026.3 剛剛發布
Still Scrolling Icon

還在滾動嗎？

想快速取得證據？ PM > Install-Package IronPdf
運行範例看著你的HTML程式碼變成PDF檔。