如何在 Chrome 中調試 HTML 以創建像素完美的 PDF
作為IronPDF的開發者，我們理解由IronPDF生成的PDF文件不僅需要看起來完美，還需要完全符合我們客戶的期望。 要實現像素完美的PDF，您將需要開發出色的HTML模板，或與網頁開發人員合作為您創建。 IronPDF提供了將您的PDF精確呈現為HTML的選項，確保它們在Chrome中的顯示效果與Chrome Renderer的渲染效果相同。
什麼是IronPDF的Chrome Renderer？
IronPDF與其他.NET PDF庫不同之處
IronPDF 在市場上獨具特色，因為它使用了 Google Chromium Renderer，這意味著您在 Chrome 瀏覽器中看到的 HTML 將與您在我們的 PDF 中看到的完全相同。 在本指南中，我們將引導您完成在 Chrome 和 IronPDF 中需要應用的一些設定。
需要注意的是，由競爭對手實現的許多所謂“HTML轉PDF”技術不符合W3C標準，甚至不支持HTML5、CSS3或JavaScript，並使用底層渲染器，例如C# 中的 wkhtmltopdf 比較.
IronPDF與競爭對手的比較
如需查看與其他產品的完整比較列表，請參閱我們的比較部落格.*
Iron Software 庫的功能 使用IronPDF的Chrome渲染引擎 Aspose 與 IronPDF 分析 iText 與 IronPDF 比較
IronPDF 的優化 Chrome 渲染器比 Chrome 更佳
兩個IronPDF超越Chrome本身的例子。 使用 Chrome 可能會分成兩頁的按鈕和文字，使用 IronPDF 時則會保持完整。
範例：按鈕和文字在 Chrome 中被截斷：
在 Chrome 中截斷文字的另一個例子：
為什麼要使用HTML轉PDF？
開發者喜歡將 HTML 轉換為 PDF，因為它能提供與現有網頁品牌相匹配的可預測結果。 設計是使用標準化的 HTML、CSS 和 JavaScript 技術並有良好文件化來實現的。
- 輸出的版面和設計與網站完全相符。
- 網站開發者可以專注於精確設計。
- .NET 開發者可以專注於應用程式邏輯而非佈局。 後端開發者可以將佈局和設計任務委派給網頁設計師。
1. 決定使用 CSS 媒體類型 Print 或 Screen
IronPDF 的渲染器具有兩種媒體渲染選項：Print(默認)** 和 螢幕。 請參見以進行視覺上的並排比較本節結束. "屏幕與印刷範例比較"章节。
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 準確無誤地渲染您在 Chrome 中看到的 HTML。 這些是事先需要在 Chrome 中完成的幾個步驟。
要渲染包括所有圖像、圖標和通常在列印格式中省略的背景的像素完美 PDF，請確保使用 Screen CSS Media 選項。 2a. 開啟開發者工具，並在 Chrome 中設置啟用模擬 CSS 媒體為螢幕/打印
- 要做到这一点，请在Chrome内在 Chrome 中開啟開發者工具.
按 Command+Shift+P(麦金塔)或 Control+Shift+P(Windows、Linux、ChromeOS)打開命令菜單。 開始輸入渲染，選擇顯示渲染，然後按 Enter 鍵。 DevTools在您的DevTools窗口底部顯示Rendering選項卡。 更多關於渲染設定的幫助
- 向下導航並找到
Emulate CSS media的下拉選單，選擇Screen或Print選項。 如果您在網頁上，可能需要重新載入(Ctrl+R)使設定生效。
列印
螢幕
2b.
打開列印預覽窗口(在 Windows 上按 Ctrl+P)
您可能需要在 Chrome 打印對話框中更改紙張大小並啟用「列印背景圖像」，以獲得準確的顯示。 2c. 設定正確的列印預覽設定
- 請選擇您在IronPDF項目中使用的紙張大小，例如
A4或Letter。 - 在
Margins下拉選單中選擇Custom，並將四邊設置為(1)一英寸邊距。 - 啟用「背景圖形」複選框。
確保如果您打算輸出橫向文件，將您的
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
