IronPDF 的像素完美 HTML 格式化

2022年1月19日
已更新 2024年10月20日
分享:
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 文件。

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
renderer.RenderingOptions.PrintHtmlBackgrounds = true;

進階 HTML 開發

進階的 Chrome 使用者開發人員可以通過使用 IronPDF 的默認設置並啟用「模擬 CSS 媒體 > 屏幕」來實現 100% 的精確度。https://developer.chrome.com/docs/devtools/css/print-preview/

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;
renderer.RenderingOptions.PrintHtmlBackgrounds = true;

2. 比較結果

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

注意:將任何HTML字符串和資源導出到獨立的HTML文件中並手動編輯它們,或者請求網頁開發人員協助。

File QHUUeuiG91 related to 2. 比較結果

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

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

File 9xs8GDjzqz related to 3. 打開列印預覽窗口(Windows 上的 Ctrl+P)

4. 選擇「另存為PDF」選項

只要在Chrome中打印至PDF完美無缺 - IronPDF將與之匹配。

File 00sfd2abQl related to 4. 選擇「另存為PDF」選項

5. 運行 IronPDF

現在HTML已經完美了,透過IronPDF運行,它將看起來完全相同。 使用{佔位符}合併客戶數據。 程式碼範例在

https://ironpdf.com/examples/using-html-to-create-a-pdf/ 將會非常有幫助!

如果本教學無法解決您的問題,請聯絡工程支援,我們將調整和改進我們的文件來進一步幫助您。