1. IronPDF
  2. 操作指南
  3. 使用 Chrome 調試 HTML
如何在Chrome瀏覽器中調試HTML程式碼以建立像素級完美的PDF文件

How to Debug HTML in Chrome to Create Pixel Perfect PDFs

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

作為 IronPDF 的開發者，我們瞭解到由 IronPDF 製作的 PDF 文件不僅需要看起來完美，還需要看起來完全符合我們客戶的期望。 要實現像素完美的 PDF，您需要開發出色的 HTML 模板，或者與網頁開發人員合作為您創建這些模板。 IronPDF 提供選項將您的 PDF 像素完美地渲染到您的 HTML，確保它們顯示在 Chrome 中的方式與我們的 Chrome 渲染器相同。

快速入門：使用 IronPDF 生成像素完美的 PDF

有了 IronPDF 的 Chrome Renderer，將 HTML 轉換為 PDF 變得輕而易舉。 本指南幫助開發人員製作像素完美的 PDF 文件，這些文件完全反映他們的 HTML 設計，正如它們在 Chrome 瀏覽器中顯示的一樣。 該過程確保完全支援 HTML5、CSS3 和 JavaScript 元素，這是許多競爭對手無法做到的。 按照以下步驟快速創建維護您網站品牌和設計完整性的 PDF。

Nuget IconGet started making PDFs with NuGet now:

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Copy and run this code snippet.

    IronPdf.ChromePdfRenderer.RenderHtmlAsPdf("<html><body>Hello World</body></html>").SaveAs("output.pdf");

  3. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer

什麼是 IronPDF 的 Chrome Renderer?

它使 IronPDF 與其他 .NET PDF 庫不同

IronPDF 在市場上表現出色，因為它利用了 Google Chromium 渲染器，這意味著您在 Chrome 瀏覽器中看到的 HTML 與您在我們的 PDF 中看到的內容完全相同。 在本指南中，我們將引導您進行一些設定，這些設定需要您在 Chrome 和 IronPDF 中應用以實現此效果。

需要明確的是，許多競爭對手所聲稱的 "HTML 轉 PDF" 技術不符合 W3C 標準，甚至不支援 HTML5、CSS3 或 JavaScript，並使用 wkhtmltopdf 與 C# 比較 等基礎渲染器。

IronPDF 與競爭對手比較

class="competitors-section__wrapper-even-1">
class="competitors__card">

class="competitors__header">IronPDF

IronPDF

class="competitors__download-link"> 下載 PDF

class="competitors__card">

class="competitors__header">Vanilla Chrome

Vanilla Chrome

class="competitors__download-link"> 下載 PDF

class="competitors-section__wrapper">
class="competitors__card">

class="competitors__header">Aspose.PDF

Aspose.PDF

class="competitors__download-link"> 下載 PDF

class="competitors__card">

class="competitors__header">iText

iText

class="competitors__download-link"> 下載 PDF

class="competitors__card">

class="competitors__header">wkhtmltopdf

wkhtmltopdf

class="competitors__download-link"> 下載 PDF

要查看與其他產品的完整比較列表，請參閱我們的 比較博客。

Features of Iron Software Libraries | Using IronPDF's Chrome Rendering Engine | Aspose vs IronPDF Analysis | iText vs IronPDF Comparison

IronPDF 的優化 Chrome 渲染器比 Chrome 更好

IronPDF 超越 Chrome 本身的兩個例子。 原本在 Chrome 中會分成兩頁的按鈕和文本在 IronPDF 中保持完整。

按鈕和文本在 Chrome 中被截斷的示例：

class="content-img-align-center">
class="center-image-wrapper"> Chrome 中被截斷的按鈕，但在 IronPDF 中不會

在 Chrome 中被截斷的文本的另一個示例：

class="content-img-align-center">
class="center-image-wrapper"> Chrome 中被截斷的文本，但在 IronPDF 中不會

為什麼使用 HTML 到 PDF？

開發人員喜愛 HTML 到 PDF，因為它提供了可預測的結果，符合現有的網頁品牌。 設計使用有良好記錄的標準化 HTML、CSS 和 JavaScript 技術實施。

  • 輸出的佈局和設計與網站完全匹配。
  • 網頁開發人員可以專注於絕對精確的設計。
  • .NET 開發人員可以專注於應用程式邏輯而不是佈局。 後端開發人員可以將佈局和設計任務委託給網頁設計師。

1. 決定使用 CSS 媒體類型為 Print 或 Screen

IronPDF 的渲染器有兩個媒體渲染選項：Print (預設) 和 Screen。 關於視覺上的並排比較，請參閱本節末尾。 "螢幕和打印示例比較" 部分。

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

重複的表頭

如果您有一個 HTML，包含一個將跨越多頁的表格，您大概希望在每個 PDF 頁面上重複表格頭。

  • 在這種情況下，您只能使用 Print CssMediaType。
  • 使用 Screen 將引導 Chrome 只打印一次標題。

屏幕和打印示例的比較

許多圖像和圖標將不會在Print模式中加載，而在Screen模式中加載。

打印示例 1 螢幕示例 1

2. 設置 Chrome

IronPDF 驕傲地使用了 Chrome 渲染引擎。遵循以下步驟，使 IronPDF 渲染您的 HTML 與您在 Chrome 中看到的一模一樣。 在這之前，有幾步需要在 Chrome 中完成。

要渲染像素完美的 PDF，這些 PDF 通常包括打印格式中省略的所有圖像、圖標和背景，請使用Screen CSS 媒體選項。

2a. 打開 DevTools 並在 Chrome 中設置啟用模擬 CSS 媒體為 Screen/Print

  1. 要做到這一點，在 Chrome 中在 Chrome 中打開 DevTools。
在 Chrome 中使用檢查
  1. 按 Command+Shift+P (Mac) 或 Control+Shift+P (Windows, Linux, ChromeOS) 打開 命令菜單。 開始輸入 rendering，選擇顯示 Rendering，然後按 Enter。 DevTools 在 DevTools 窗口底部顯示 Rendering 標籤。 有關渲染設置的更多幫助
轉到顯示渲染，然後查找 CSS 媒體類型
  1. 向下瀏覽並找到Emulate CSS 媒體的下拉選項，並選擇Screen或Print選項。 如果您在網頁上，可能需要重新加載 (Ctrl+R) 來使設置生效。
class="competitors-section__wrapper-even-1">
切換到 CSS 媒體類型 Print

Print

切換到 CSS 媒體類型 Screen

Screen

2b. 打開打印預覽窗口 (Windows 上為 Ctrl+P)

您可能需要在 Chrome 打印對話框中更改紙張大小並啟用"打印背景圖片"以獲得準確的顯示。

2c. 設置正確的打印預覽設置

  • 請選擇您在 IronPDF 專案中使用的紙張大小，例如A4或Letter。
  • 在邊距下拉選單中選擇自定義，四邊均設置為（1"）一英寸邊距。
  • 啟用背景圖形複選框。
  • 如果您打算輸出橫向文檔，確保將版面設計設置為橫向。

就是這麼簡單。 您現在可以調試您的 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 = True
$vbLabelText   $csharpLabel

3b. 適當設定渲染延遲和渲染超時

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); // milliseconds
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

因此如果您遇到此錯誤，您可能需要增加這些值。 - WaitFor 和 JavaScript 代碼示例

  • WaitFor API 應用程序
    請注意Aspose, iText, wkhtmltopdf 和 PuppeteerSharp 是其各自擁有者的註冊商標。

本網站不與 Aspose、iText、wkhtmltopdf 或 Puppeteer 相關聯，也未經這些公司確認或贊助。 所有產品名稱、標識和品牌均屬其各自所有者的財產。 比較僅供信息目的提供，並基於寫作時公開可用的信息。