How to Debug HTML in Chrome to Create Pixel Perfect PDFs in C
身為 IronPDF 的開發團隊，我們深知由 IronPDF 產生的 PDF 文件不僅需要外觀完美，更必須完全符合客戶的預期。 若要讓您的 PDF 檔案呈現像素級的精準效果，您需要開發出色的 HTML 範本，或與網頁開發人員合作代為處理。 IronPDF 提供將 PDF 渲染為與 HTML 像素完美對齊的選項，並透過我們的 Chrome 渲染器，使其顯示效果與 Chrome 瀏覽器中的樣式完全一致。
快速入門：使用 IronPDF 建立像素級精準的 PDF 檔案
利用 IronPDF 強大的 Chrome 渲染器，輕鬆將您的 HTML 轉換為像素級精準的 PDF 檔案。 本快速指南將協助您透過 IronPDF 對 HTML5、CSS3 及 JavaScript 的全面支援，生成精準且可預期的 PDF 輸出。 只需幾行程式碼，即可將 HTML 內容精確地呈現為 Chrome 中的顯示樣式，確保從網頁到 PDF 的無縫轉換。 非常適合希望在維持版面精準度的同時，不犧牲使用便利性的開發者。
-
使用NuGet套件管理器安裝https://www.nuget.org/packages/IronPdf
-
複製並運行這段程式碼片段。
var Renderer = new IronPdf.ChromePdfRenderer(); Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print; Renderer.RenderHtmlAsPdf("<html>Your HTML content here</html>").SaveAs("output.pdf"); -
部署以在您的實時環境中測試
今天就開始在您的專案中使用IronPDF，透過免費試用
什麼是 IronPDF 的 Chrome 渲染器？
這正是 IronPDF 區別於其他 .NET PDF 函式庫之處
IronPDF 在市場上獨樹一幟，因其採用 Google Chrome 渲染引擎，這意味著您在 Chrome 瀏覽器中看到的 HTML 內容，將與您在我們的 PDF 文件中看到的完全一致。 在本教學中，我們將引導您逐步設定 Chrome 和 IronPDF 中的相關選項，以達成此目標。
需要說明的是，許多競爭對手所宣稱的"HTML 轉 PDF"技術，並未遵循 W3C 標準，甚至不支援 HTML5、CSS3 或 JavaScript，而是採用 wkhtmltopdf 等底層渲染器。
IronPDF 與競爭對手的比較
如需查看與其他產品的完整比較清單，請參閱我們的部落格。
[p 功能] | IronPDF 的 Chrome 渲染器 | Aspose 與 IronPDF 比較 | iText 與 IronPDF
IronPDF 的最佳化 Chrome 渲染器比 Chrome 更出色
以下是 IronPDF 超越 Chrome 本身的兩個實例。 在 Chrome 中原本會被分割成兩頁的按鈕和文字，使用 IronPDF 時將保持完整。
Chrome 瀏覽器中按鈕與文字被截斷的範例
Chrome 中文字被截斷的另一個範例
為何要使用 HTML 轉 PDF/A？
開發者青睞 HTML 轉 PDF 功能，因為它能提供符合既有網頁品牌形象且可預期的輸出結果。 設計採用文件完備且標準化的 HTML、CSS 及 JavaScript 技術實現。
- 輸出內容的版面配置與設計須與網站完全一致。
- 網頁開發人員可以專注於以絕對精準度進行設計。
- .NET 開發人員可以專注於應用程式邏輯，而非版面配置。 後端開發人員可將版面配置與設計任務委派給網頁設計師。
1. 決定使用 CSS 媒體型別 PRINT 或 畫面
IronPDF 的渲染器提供兩種媒體渲染選項：Print（預設）與 Screen。 如需視覺化的並列比較，請參閱本教學指南末尾的"螢幕與PRINT範例比較"章節。
CssMediaType.Print是預設的渲染選項，可針對一般列印用途優化您的 HTML 內容。 這意味著頁面上的某些背景圖片、圖示及其他大量使用墨水（ink-heavy）的元素，可能會呈現不同樣式或被省略。 此選項適用於無背景圖像的文件，且為預設的列印預覽模式。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' Pixel Perfect HTML Formatting Settings
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print ' or Screen重複的表格標題
若您的 HTML 文件包含跨頁的表格，您可能希望表格標題在每頁 PDF 中重複顯示。
- 在此情況下，您只能使用
PrintCssMediaType。 - 使用
Screen可指示 Chrome 僅列印一次頁首。
螢幕與PRINT範例之比較
許多圖片和圖示在"PRINT模式"下無法載入，但在"螢幕模式"下則可正常顯示：
2. 設定 Chrome
IronPDF 自豪地採用 Chrome 渲染引擎。請依照以下步驟操作，讓 IronPDF 將您的 HTML 渲染成與您在 Chrome 中所見完全一致的樣式。 以下是在 Chrome 中預先執行以達成此目標的幾個步驟。
若要生成包含所有圖片、圖示及背景的像素完美 PDF（這些元素在 PRINT 格式中通常會被省略），請務必使用 Screen CSS 媒體選項。
2a. 開啟 DevTools，並在 Chrome 中將"啟用模擬 CSS 媒體"設定為"螢幕/PRINT"
-
為此，請在 Chrome 中開啟開發人員工具。
- 按下 Command+Shift+P（Mac）或 Control+Shift+P（Windows、Linux、ChromeOS）以開啟命令選單。 開始輸入"rendering"，選取"顯示渲染"，然後按下 Enter 鍵。 開發人員工具會在開發人員工具視窗底部顯示"渲染"分頁。 更多協助
- 向下滾動並找到
Emulate CSS media的下拉選單，選擇Screen或Print選項。 若您正在瀏覽網頁，可能需要重新載入（Ctrl+R）以使設定生效。
畫面
2b. 開啟"列印預覽"視窗（Windows 系統請按 Ctrl+P）
您可能需要變更紙張尺寸，並在 Chrome 的"PRINT"對話方塊中啟用"PRINT 背景圖片"功能，以獲得準確的顯示效果。
2c. 設定正確的"列印預覽"設定
- 請選擇您在 IronPDF 專案中使用的紙張尺寸，例如
A4或Letter。 - 在
Margins下拉選單中選擇Custom，並將四邊邊距均設為 (1") 一英吋。 - 勾選
Background Graphics核取方塊。 - 若您打算輸出橫向排版的文件，請務必將
Layout設定為Landscape。
以上。 現在您可以對 HTML 進行除錯，並使用列印預覽功能，精確查看 IronPDF 將如何呈現您的版面配置。
3. 設定 IronPDF
3a. 在 IronPDF 中設定 CSS 媒體型別
為了使網頁設計與原始版面完全一致，我們必須在程式碼中選用與 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;' Example using PdfCssMediaType.Screen
Dim renderer As New IronPdf.ChromePdfRenderer()
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen ' or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = True3b. 適當設定渲染延遲與渲染超時
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- RenderDelay 與 JavaScript（程式碼範例）
- RenderDelay (API 參考)
- 超時 (API 參考)
準備好探索更多可能性了嗎？ 請點此查看我們的教學頁面：其他功能
常見問題
如何從 HTML 獲得像素完美的 PDF 渲染？
要從 HTML 獲得像素完美的 PDF 渲染，您可以使用 IronPDF 的 Chrome 渲染器，它確保在 Chrome 瀏覽器中顯示的 HTML 內容與生成的 PDF 相同。
using IronPDF 進行 HTML 到 PDF 轉換有哪些好處？
IronPDF 允許開發者生成的 PDF 與網頁瀏覽器中 HTML 內容的視覺效果匹配，支援 HTML5、CSS3 和 JavaScript，這是其他許多程式庫做不到的。
如何在 IronPDF 中配置 CSS 媒體型別？
您可以在 IronPDF 中配置 CSS 媒體型別，選擇 'Print' 用於不含背景的文件，或 'Screen' 以匹配螢幕上的外觀，確保 PDF 輸出符合您的需求。
設置 Chrome 進行 PDF 渲染的步驟是什麼？
要設置 Chrome 進行 PDF 渲染，開啟 DevTools，啟用 '模擬 CSS 媒體' 選擇 'Screen/Print'，並調整列印預覽設置以確保 PDF 與所需佈局匹配。
如何解決 IronPDF 的渲染問題？
如果您遇到渲染問題，例如 '無法渲染 PDF' 異常，可嘗試增加渲染延遲或 IronPDF 選項中的渲染超時設置，以獲得更好的結果。
我可以使用 IronPDF 渲染與網頁設計匹配的 PDF 嗎？
可以，IronPDF 允許您使用 Google Chromium 渲染器精確渲染與網頁設計匹配的 PDF，提供所有現代網路技術的支援。
IronPDF 為什麼使用 Google Chromium 渲染器？
IronPDF 使用 Google Chromium 渲染器，以確保在 Chrome 瀏覽器中顯示的 HTML 與建立的 PDF 完全相同，提供一致且高質量的輸出。
IronPDF 與 .NET 10 相容嗎，我可以在新的 .NET 10 專案中使用它嗎？
是的。IronPDF 明確支援 .NET 10（以及 .NET 9、.NET 8 和更早版本），並且開箱即用。您可以在專案中指定 .NET 10 並使用 IronPDF 的 HTML 到 PDF、渲染、編輯和簽名 API，而無需特殊的變通辦法。
還在捲動嗎？
想快速獲得證明嗎？ PM > Install-Package IronPdf
執行範例 看您的HTML變成PDF。
免費開始
免費開始
預訂免費直播演示
