如何在 Chrome 中調試 HTML 以創建像素完美的 PDF
作為 IronPDF 的開發者，我們理解由 IronPDF 製作的 PDF 文件不僅需要看起來完美，還要完全符合客戶的期望。要讓您的 PDF 看起來像素完美，您需要開發出優秀的 HTML 模板，或者與網頁開發人員合作來完成。IronPDF 提供選項，可以將您的 PDF 渲染得像素完美，使其與在 Chrome 中顯示的完全相同，這是因為我們的 Chrome Renderer。
什麼是IronPDF的Chrome Renderer？
這使 IronPDF 從其他 .NET PDF 函式庫中脫穎而出
IronPDF 的獨特之處在於它使用了 Google Chromium Renderer，這意味著您在 Chrome 瀏覽器中看到的 HTML 將與您在我們的 PDF 中看到的完全一樣。在本教程中，我們將逐步介紹您需要在 Chrome 和 IronPDF 中應用的一些設置，以實現此目標。
需要明確的是，許多競爭對手聲稱的“HTML 轉 PDF”技術並不符合 W3C 標準，甚至不支持 HTML5、CSS3 或 JavaScript，而是使用底層渲染器，例如 wkhtmltopdf.
IronPDF與競爭對手的比較
如需查看與其他產品的完整比較列表，請參閱我們的 博客.*
功能 IronPDF 的 Chrome 渲染器 Aspose vs IronPDF iText vs IronPDF
IronPDF 的優化 Chrome 渲染器比 Chrome 更好
以下是 IronPDF 超越 Chrome 自身的兩個例子。使用 Chrome 時，按鈕和文字會被分割到兩個頁面，但是使用 IronPDF 時，它們保持完整。
範例：按鈕和文字在 Chrome 中被截斷：
在 Chrome 中截斷文字的另一個例子：
為什麼使用HTML轉PDF？
開發人員喜歡HTML轉PDF，因為它能夠提供可預測的結果，與現有的網頁品牌相符。設計是使用有良好文檔記錄的標準化HTML、CSS和JavaScript技術實現的。
- 輸出的佈局和設計完全匹配網站。
- 網頁開發人員可以專注於精確設計。
- .NET開發人員可以專注於應用邏輯而不是佈局。後端開發人員可以將佈局和設計任務委託給網頁設計師。
1. 決定使用 CSS 媒體類型列印或螢幕
IronPDF 的渲染器有兩種媒體渲染選項：Print(默認)** 和 Screen。請參見本教程結尾的 "Comparison of Screen and Print Example" 部分以進行視覺並排比較。
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' 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 只打印一次標題。
屏幕和打印範例的比較
許多圖像和圖標在屏幕模式下會加載，但在打印模式下不會加載：
2. 設置Chrome
IronPDF自豪地使用Chrome渲染引擎。請按照以下步驟進行操作，以使IronPDF能夠準確地渲染您的HTML，就像您在Chrome中看到的一樣。為了達到這一目標，需要在Chrome中先完成以下幾個步驟。
要渲染包含所有圖像、圖標和背景的像素完美PDF，這些通常在打印格式時會被省略，請務必使用Screen CSS媒體選項。
2a. 在 Chrome 中開啟開發者工具並設定啟用模擬 CSS 媒體為「螢幕/列印」
- 要做到這一點，在 Chrome 中 開啟開發者工具.
- 按 Command+Shift+P (麦金塔) 或 Control+Shift+P (Windows、Linux、ChromeOS) 打開 命令選單。開始輸入 rendering，選擇 Show Rendering，然後按 Enter。開發者工具會在您的開發者工具視窗底部顯示 Rendering 分頁。(更多幫助)
- 向下導航並找到
模擬 CSS 媒體的下拉選單，選擇螢幕或打印選項。如果您在網頁上，可能需要重新載入 (Ctrl+R) 使設定生效。
列印
螢幕
2b. 打開列印預覽視窗 (在 Windows 上按 Ctrl+P)
您可能需要在 Chrome 列印對話框中更改紙張大小並啟用「列印背景圖片」以獲得準確的顯示。
2c. 設定正確的列印預覽設定
- 請選擇您在 IronPDF 專案中使用的紙張大小，例如
A4或Letter。 - 在
邊界下拉選單中選擇自訂並將四個邊的位置設為 (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;' 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); // millisecondsIRON VB CONVERTER ERROR developers@ironsoftware.com- 渲染延遲和JavaScript (範例程式碼)
- 渲染延遲 (API 參考文獻)
- 超時 (API 參考文獻)
