如何在Chrome中調試HTML以創建像素完美的PDF
作為IronPDF的開發者，我們明白由IronPDF生成的PDF文件不僅需要外觀完美，還需要完全符合我們客戶的期望。為了實現像素完美的PDF，您需要製作出色的HTML模板或與網頁開發人員合作來為您創建這些模板。IronPDF提供了選項，可以將您的PDF渲染得像素完美，與您的HTML一致，確保它們在我們的Chrome渲染器下顯示出與Chrome中完全相同的效果。
什麼是IronPDF的Chrome Renderer？
這使得 IronPDF 在其他 .NET PDF 庫中獨樹一幟
IronPDF 在市場上獨樹一幟，因為它使用了 Google Chromium 渲染器，這意味著你在 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。如需視覺上的並排比較，請參見 本節結束在“螢幕與列印範例比較”部分下。
CssMediaType.Print是預設的渲染選項，將您的 HTML 優化為適合一般打印機使用。這意味著頁面上的一些背景圖片、圖標和其他墨水密集的元素可能會以不同方式呈現或被省略。此選項適合沒有背景圖片的文件，並且是預設的打印預覽。CssMediaType.Screen是允許您的 PDF 看起來與在螢幕上的 Chrome 瀏覽器中完全相同的渲染選項。您需要在 Chrome 瀏覽器中設置一些選項，以使打印預覽看起來與 IronPDF 渲染 HTML 調試時一樣。
: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重複表格標題
如果您的 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/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 = True3b. 適當地設置渲染延遲和渲染超時
IronPDF的默認渲染超時時間為60秒。如果渲染過程超過此時間，將會拋出超時異常。要覆蓋默認設置，您需要調整RenderingOptions.Timeout選項。另一方面，渲染延遲值是IronPDF在開始渲染之前應等待的時間。此等待時間對於圖像、字體和JavaScript代碼等資產的正常執行至關重要。
請記住，如果沒有設置超時或渲染延遲超過您設置的超時時間，將會產生“無法渲染PDF”異常。因此，如果遇到此錯誤，您可能需要增加這些值。
: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); // millisecondsIRON VB CONVERTER ERROR developers@ironsoftware.com- 等待和JavaScript (範例程式碼)
- 等待 (API 參考文獻)
