1. IronPDF
  2. 教學
  3. 使用 Chrome 調試 HTML
如何在 .NET 8 中使用 C# 將 HTML 轉換為 PDF | IronPDF

如何在 Chrome 中調試 HTML 以在 C# 中創建像素級完美的 PDF

柯蒂斯·週
柯蒂斯·週
更新:
This article was translated from English: Does it need improvement?
Translated
View the article in English

身為 IronPDF 的開發者，我們深知 IronPDF 產生的 PDF 文件不僅要看起來完美無瑕，而且要完全符合客戶的預期。 要讓您的 PDF 檔案看起來像素完美，您需要開發優秀的 HTML 模板，或與 Web 開發人員合作完成這項工作。 IronPDF 提供多種選項，可將您的 PDF 文件渲染成與 HTML 文件像素完美匹配，並且由於採用了 Chrome 渲染器，其外觀與在 Chrome 瀏覽器中的顯示效果完全相同。

快速入門：使用 IronPDF 建立像素級完美 PDF

使用 IronPDF 強大的 Chrome 渲染器，輕鬆將 HTML 轉換為像素級完美的 PDF。 本快速指南可協助您利用 IronPDF 對 HTML5、CSS3 和 JavaScript 的全面支持，實現精確且可預測的 PDF 輸出。 只需幾行程式碼，即可將 HTML 內容完全按照 Chrome 中的顯示方式呈現，確保從網頁到 PDF 的無縫過渡。 非常適合希望在不犧牲易用性的前提下保持佈局精確性的開發人員。

Nuget Icon立即開始使用 NuGet 建立 PDF 檔案：

  1. 使用 NuGet 套件管理器安裝 IronPDF

    PM > Install-Package IronPdf

  2. 複製並運行這段程式碼。

    var Renderer = new IronPdf.ChromePdfRenderer();
Renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.列印;
Renderer.RenderHtmlAsPdf("<html&gt;Your HTML content here</html&gt;").SaveAs("output.pdf");

  3. 部署到您的生產環境進行測試

    立即開始在您的專案中使用 IronPDF，免費試用！
    arrow pointer

IronPDF 的 Chrome 渲染器是什麼？

這使得 IronPDF 與其他 .NET PDF 庫區分開來。

IronPDF 在市場上獨樹一幟，因為它採用了 Google Chromium 渲染器，這意味著您在 Chrome 瀏覽器中看到的 HTML 將與您在我們的 PDF 中看到的內容完全相同。 在本教學中，我們將引導您完成在 Chrome 和 IronPDF 中需要應用的一些設置，以實現此目的。

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

IronPDF 與競爭對手相比

<div class="competitors-sectionwrapper-even-1"> <div class="competitorscard"> <p class="competitorsheader">IronPDF</p> <img class="competitorsimage img-popup" src="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_ironpdf_p1.webp" alt="IronPDF" data-fullsize="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_ironpdf_p1.webp" > <p class="competitorsdownload-link"> <i class="fas fa-file-pdf"></i><a href="https://raw.githubusercontent.com/iron-software/iron-nuget-assets/main/IronPDF-Tutorial/Bootstrap_IronPDF.pdf">下載PDF</a> </p> </div> <div class="competitorscard"> <p class="competitorsheader">原版 Chrome</p> <img class="competitorsimage img-popup" src="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_chrome_p1.webp" alt="原版 Chrome" data-fullsize="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_chrome_p1.webp" > <p class="competitorsdownload-link"> <i class="fas fa-file-pdf"></i><a href="https://raw.githubusercontent.com/iron-software/iron-nuget-assets/main/IronPDF-Tutorial/Bootstrap_Chrome.pdf">下載PDF</a> </p> </div> </div> <div class="competitors-sectionwrapper"> <div class="competitorscard"> <p class="competitorsheader">Aspose.PDF</p> <img class="competitorsimage img-popup" src="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_aspose_p1.webp" alt="Aspose.PDF" data-fullsize="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_aspose_p1.webp" > <p class="competitorsdownload-link"> <i class="fas fa-file-pdf"></i><a href="https://raw.githubusercontent.com/iron-software/iron-nuget-assets/main/IronPDF-Tutorial/Bootstrap_Aspose.pdf">下載PDF</a> </p> </div> <div class="competitorscard"> <p class="competitorsheader">iText</p> <img class="competitorsimage img-popup" src="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_itext.webp" alt="iText" data-fullsize="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_itext.webp" > <p class="competitorsdownload-link"> <i class="fas fa-file-pdf"></i><a href="https://raw.githubusercontent.com/iron-software/iron-nuget-assets/main/IronPDF-Tutorial/Boostrap_iText.pdf">下載PDF</a> </p> </div> <div class="competitorscard"> <p class="competitorsheader">wkhtmltopdf</p> <img class="competitorsimage img-popup" src="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_wkhtmltopdf_p1.webp" alt="wkhtmltopdf" data-fullsize="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/bootstrap_wkhtmltopdf_p1.webp" > <p class="competitorsdownload-link"> <i class="fas fa-file-pdf"></i><a href="https://github.com/iron-software/iron-nuget-assets/blob/main/IronPDF-Tutorial/Bootstrap_wkhtmltopdf.pdf">下載PDF</a> </p> </div> </div>

如需查看與其他產品的完整比較列表，請造訪我們的部落格。

[pFeatures related to IronPDF 與競爭對手相比功能] | IronPDF 的 Chrome 渲染器 | Aspose 與 IronPDF | iText 與 IronPDF 的比較

IronPDF 的最佳化版 Chrome 渲染器比 Chrome 好。

IronPDF 超越 Chrome 的兩個例子。 使用 Chrome 時會被分成兩頁顯示的按鈕和文字，在 IronPDF 中仍然保持完整。

Chrome瀏覽器中按鈕和文字被截斷的範例

！按鈕在 Chrome 瀏覽器中顯示不全，但在 IronPDF 中顯示正常。

Chrome 瀏覽器中文字被截斷的另一個例子

！文字在 Chrome 中被截斷，但在 IronPDF 中則不會。

為什麼要使用 HTML 轉 PDF？

開發人員喜歡 HTML 轉 PDF，因為它能提供可預測的結果，並且與現有的網站品牌形象相符。 設計採用文件完善的標準化 HTML、CSS 和 JavaScript 技術實作。

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

1. 決定使用 CSS 媒體類型"列印"還是"螢幕"。

IronPDF 的渲染器有兩種媒體渲染選項： 列印 （預設）和螢幕 。 如需進行直覺的並排比較，請參閱本教學課程末端的"螢幕和列印範例比較"部分。

  • CssMediaType.列印是預設的渲染選項，它優化了 HTML 以便在印表機上正常使用。 這意味著頁面上的一些背景圖像、圖示和其他耗墨元素可能會以不同的方式呈現，或者會被省略。 此選項適用於沒有背景圖像的文檔，並且是預設的列印預覽。
  • CssMediaType.螢幕是渲染選項，它可以讓你的 PDF 檔案在螢幕上看起來與在 Chrome 瀏覽器中顯示的效果完全一致。 您需要在 Chrome 瀏覽器中設定一些選項，才能讓列印預覽看起來與 IronPDF 在 HTML 偵錯時呈現的效果完全一致。
:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-1.cs
// Pixel Perfect HTML Formatting Settings
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print; // or Screen
$vbLabelText   $csharpLabel

重複的表格標題

如果您的 HTML 檔案中包含跨越多頁的表格，您可能會想要表格標題在每個 PDF 頁面上重複顯示。

在這種情況下，您只能使用列印 CssMediaType 。

  • 使用螢幕指示 Chrome 只列印一次標頭。

螢幕和列印範例的比較

許多圖片和圖示在列印模式下無法加載，但在螢幕模式下可以加載：

列印範例 1 螢幕 1 範例

2. 設定 Chrome 瀏覽器

IronPDF 很自豪地使用 Chrome 渲染引擎。請依照以下步驟操作，讓 IronPDF 將您的 HTML 程式碼渲染得與您在 Chrome 瀏覽器中看到的效果完全一致。 要在 Chrome 中實現此目的，需要事先執行以下步驟。

若要渲染包含所有影像、圖示和背景（通常在列印格式中會被省略）的像素完美 PDF，請務必使用螢幕 CSS 媒體選項。

style=";text-align:left;direction:ltr">2a. 在 Chrome 瀏覽器中開啟開發者工具，並將"啟用 CSS 媒體模擬"設定為"螢幕/列印"。

  1. 為此，請在 Chrome 中開啟 DevTools 。

    ！在 Chrome 瀏覽器中使用"檢查"功能

  2. 按 Command+Shift+P (Mac) 或 Control+Shift+P (Windows、Linux、ChromeOS) 開啟指令選單。 開始輸入渲染，選擇"顯示渲染"，然後按 Enter 鍵。 DevTools 會在 DevTools 視窗底部顯示"渲染"標籤。 更多協助。

前往"顯示渲染"，然後尋找 CSS 媒體類型

  1. 向下捲動找到Emulate CSS media下拉式選單，然後選擇螢幕或列印選項。 如果您正在瀏覽網頁，可能需要重新載入（Ctrl+R）才能使設定生效。

<div class="competitors-sectionwrapper-even-1"> <div class="competitorscard" style="width: 48%;"> <img src="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/view_css_print.gif" alt="Switch to CSS Media Type 列印" class="img-responsive add-shadow" style="margin-bottom: 30px;"> <p class="competitorsdownload-link" style="color: #181818; font-style: italic;"> 列印 </p> </div> <div class="competitorscard" style="width: 48%;"> <img src="/static-assets/pdf/tutorials/pixel-perfect-html-to-pdf/view_css_screen.gif" alt="Switch to CSS Media Type 螢幕" class="img-responsive add-shadow" style="margin-bottom: 30px;"> <p class="competitors__download-link" style="color: #181818; font-style: italic;"> 螢幕 </p> </div> </div>

style=";text-align:left;direction:ltr">2b. 開啟列印預覽視窗（Windows 系統按 Ctrl+P）

為了獲得準確的顯示效果，您可能需要在 Chrome 列印對話方塊中變更紙張尺寸並啟用"列印背景圖片"。

2c.。 設定正確的列印預覽設定

  • 請選擇您在 IronPDF 項目中使用的紙張尺寸，例如A4或Letter 。
  • 在Margins下拉式選單中選擇Custom ，並將所有四邊設為 (1") 一英吋邊距。
  • 啟用Background Graphics複選框。
  • 如果您打算輸出橫向文檔，請確保將佈局Layout Landscape 。

就這些了。 現在您可以偵錯 HTML 程式碼，並使用列印預覽來查看 IronPDF 將如何渲染您的佈局。

3. 設定 IronPDF

3a. 在 IronPDF 設定 CSS 媒體類型

為了100%精確地匹配網頁設計，我們必須在程式碼中選擇與Chrome中設定的相同的CSS媒體類型。

請注意， PdfCssMediaType.螢幕包含背景和較大的影像，而PdfCssMediaType.列印格式（預設格式，旨在為印表機節省墨水）可能會省略這些背景和較大的影像。

:path=/static-assets/pdf/content-code-examples/tutorials/pixel-perfect-html-to-pdf-2.cs
// Example using PdfCssMediaType.Screen
IronPdf.ChromePdfRenderer renderer = new IronPdf.ChromePdfRenderer();
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen; // or Print
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
$vbLabelText   $csharpLabel

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

IronPDF 的預設渲染逾時時間為 60 秒。 任何處理時間超過此限制的內容，如果不修改渲染選項，將無法渲染。 要覆蓋預設設置，您需要調整RenderingOptions.Timeout選項。

請記住，如果沒有設定逾時或渲染延遲超過您設定的逾時時間，將會產生 無法渲染 PDF 異常。 因此，如果您遇到此錯誤，可能需要增加這些值。

:path=/static-assets/pdf/content-code-examples/tutorials/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
$vbLabelText   $csharpLabel

準備好看看您還能做些什麼嗎？ 請造訪我們的教學頁面：附加功能

常見問題解答

如何從 HTML 實現像素級完美的 PDF 渲染？

要實現從 HTML 到 PDF 的像素級完美渲染，您可以使用 IronPDF 的 Chrome 渲染器，它可以確保在 Chrome 瀏覽器中顯示的 HTML 內容與生成的 PDF 完全相同。

使用 IronPDF 進行 HTML 轉 PDF 轉換有哪些好處？

IronPDF 允許開發人員產生與 HTML 內容在 Web 瀏覽器中的視覺外觀相符的 PDF，支援 HTML5、CSS3 和 JavaScript，這與許多其他程式庫不同。

如何在IronPDF中配置CSS媒體類型？

您可以透過選擇「列印」來配置 IronPDF 中的 CSS 媒體類型，以匹配沒有背景的文件或選擇「螢幕」來匹配螢幕上的外觀，從而確保 PDF 輸出符合您的需求。

我應該按照哪些步驟設定Chrome瀏覽器以渲染PDF檔案？

要設定 Chrome 以渲染 PDF，請開啟 DevTools，將“模擬 CSS 媒體”設定為“螢幕/列印”，並調整列印預覽設置，以確保 PDF 與所需的佈局相符。

如何解決IronPDF的渲染問題？

如果遇到渲染問題，例如「無法渲染 PDF」異常，請嘗試在 IronPDF 的選項中增加渲染延遲或渲染逾時設置，以獲得更好的效果。

我可以使用 IronPDF 來渲染與網頁設計風格相符的 PDF 檔案嗎？

是的，IronPDF 可以使用 Google Chromium 渲染器渲染與您的網頁設計完全匹配的 PDF 文件，並支援所有現代網路技術。

IronPDF 為什麼要使用 Google Chromium 渲染器？

IronPDF 使用 Google Chromium 渲染器，以確保在 Chrome 瀏覽器中顯示的 HTML 與建立的 PDF 看起來完全一致，從而提供一致且高品質的輸出。

IronPDF 與 .NET 10 相容嗎？我可以在新的 .NET 10 專案中使用它嗎？

是的。 IronPDF 明確支援 .NET 10（以及 .NET 9、.NET 8 及更早版本），並且開箱即用。您可以在專案中以 .NET 10 為目標平台，並使用 IronPDF 的 HTML 轉 PDF、渲染、編輯和簽署 API，無需任何特殊設定。

柯蒂斯·週
柯蒂斯·週
  現在就和工程團隊聊天吧
技術撰稿人

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

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

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