IronPDF 中的像素級完美 HTML 格式

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;
$vbLabelText   $csharpLabel

進階 HTML 開發

高級 Chrome 用戶開發者可以透過使用 IronPDF 的預設設定並啟用"模擬 CSS 媒體 > 螢幕"來實現 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;
$vbLabelText   $csharpLabel

2. 比較結果

若要比較結果,請在 Chrome 桌面瀏覽器中開啟 HTML 檔案。

注意:將所有 HTML 字串和資源匯出到獨立的 HTML 檔案並手動編輯,或請 Web 開發人員幫忙。

PDF結果比較

3. 開啟列印預覽視窗(Windows 系統下按 Ctrl+P)

您可能需要在 Chrome 列印對話方塊中變更紙張尺寸並啟用列印背景圖片。

列印預覽視窗

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

Chrome 的"列印到 PDF"功能完美無缺,IronPDF 也能做到同樣出色。

! 另存為PDF選項

5. 運行 IronPDF

現在HTML程式碼完美無缺,用IronPDF處理一下,看起來就完全一樣了。 使用{PlaceHolders}合併客戶資料。 IronPDF Examples中的程式碼範例真的很有幫助!

如果本教學未能解決您的問題,請聯絡工程支援部門,我們將調整和改進我們的文檔,以便更好地為您提供協助。

Curtis Chau
技術撰稿人

Curtis Chau 擁有電腦科學學士學位(卡爾頓大學),專長於前端開發,精通 Node.js、TypeScript、JavaScript 和 React。Curtis 對製作直覺且美觀的使用者介面充滿熱情,他喜歡使用現代化的架構,並製作結構良好且視覺上吸引人的手冊。

除了開發之外,Curtis 對物聯網 (IoT) 也有濃厚的興趣,他喜歡探索整合硬體與軟體的創新方式。在空閒時間,他喜歡玩遊戲和建立 Discord bots,將他對技術的熱愛與創意結合。

準備好開始了嗎?
Nuget 下載 17,570,948 | 版本: 2026.2 剛剛發布