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擁有卡爾頓大學電腦科學學士學位,專長於前端開發,精通Node.js、TypeScript、JavaScript和React。他熱衷於打造直覺美觀的使用者介面,喜歡使用現代框架,並擅長撰寫結構清晰、視覺效果出色的使用者手冊。

除了開發工作之外,柯蒂斯對物聯網 (IoT) 也抱有濃厚的興趣,致力於探索硬體和軟體整合的創新方法。閒暇時,他喜歡玩遊戲和製作 Discord 機器人,將他對科技的熱愛與創造力結合。

準備好開始了嗎?
Nuget 下載 17,012,929 | 版本: 2025.12 剛剛發布