1. IronPDF
  2. 故障排除
  3. 像素完美 HTML 格式化

IronPDF 中的完美像素 HTML 格式化

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

要讓您的 PDF 看起來完美，您需要開發出色的 HTML 模板或請一位網頁開發人員幫您完成。 這篇故障排除文章摘自完整的除錯 HTML 教程。

1. 除錯並測試您的 HTML

您可以在 Chrome 或類似的桌面瀏覽器中除錯您的 HTML、CSS 和 JS。 然後，當您知道它完美運行時，將其連接到 IronPDF，它將顯示得和在 Chrome 中一模一樣。

基本用法

此程式碼範例將呈現與最新的 Chrome 桌面瀏覽器一致的完美像素 PDF。

// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
' Create a new ChromePdfRenderer instance
Dim renderer As New ChromePdfRenderer()

' Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print

' Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

高級 HTML 開發

進階的 Chrome 使用者開發人員可以通過使用 IronPDF 的預設設置並啟用 'Emulate CSS media > Screen' 選項來達到 100% 的精確度。 更多資訊可以在這裡找到。

// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
' Create a new ChromePdfRenderer instance
Dim renderer As New ChromePdfRenderer()

' Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen

' Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

2. 比較結果

要比較結果，請在 Chrome 桌面網頁瀏覽器中打開您的 HTML。

注意：將任何 HTML 字串和資產匯出成為獨立的 HTML 文件並手動編輯它們，或者請網頁開發人員協助。

PDF結果的比較

3. 打開列印預覽視窗 (Windows 上的 Ctrl+P)

您可能需要在 Chrome 列印對話框中更改紙張大小並啟用列印背景圖片。

列印預覽視窗

4. 選擇"另存為 PDF"選項

一旦 Chrome 的列印為 PDF 完美，IronPDF 將與其匹配。

另存為 PDF 選項

5. 執行 IronPDF

現在 HTML 已經完美，通過 IronPDF 執行它，結果將完全一致。 使用 {PlaceHolders} 合併客戶資料。 IronPDF 範例中的程式碼範例將非常有幫助！

如果本教程未能解決您的問題，請聯繫技術支援，我們將調整並改進我們的文件進一步協助您。

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

Curtis Chau擁有Carleton大學的電腦科學學士學位，專精於前端開發，擁有Node.js、TypeScript、JavaScript和React的專業知識。Curtis熱衷於建立直觀且美觀的使用者介面，喜愛使用現代框架並建立結構良好、視覺吸引力的手冊。

除了開發，Curtis對物聯網（IoT）有濃厚的興趣，探索創新的方法來整合硬體和軟體。在空閒時間，他喜歡玩遊戲和建立Discord機器人，結合他對技術的熱愛與創造力。

準備開始了嗎？
Nuget 下載 20,296,129 | 版本： 2026.7 剛剛發布
Still Scrolling Icon

還在捲動嗎？

想快速獲得證明嗎？ PM > Install-Package IronPdf
執行範例 看您的HTML變成PDF。