IRONSOFTWAREHOME
IRONSUITE所有10個程式庫只需支付2個的價格
聯絡銷售
按公司

如何將HTML元素和部分頁面區段轉換為PDF（使用C#）

Curtis Chau
Curtis Chau
Updated: 2026年3月11日

IronPDF不提供內建的SelectCss方法來針對特定HTML元素。 ChromePdfRenderer呈現完整的HTML文件——一整頁、一個完整的URL、一個完整的HTML字串。 要從頁面的特定區段生成PDF，我們會在渲染之前使用四種方法中的一種隔離目標元素：JavaScript DOM操作、CSS注入、伺服器端HTML片段提取或JS定位的URL渲染。

每種方法適合不同的限制條件。 當渲染URL或完整頁面但需要剝除除目標以外的所有內容時，JavaScript DOM隔離方法可用。 CSS注入不改變DOM結構來隱藏不需要的內容。 伺服器端提取在我們能存取原始HTML時提供最乾淨的結果。 URL渲染與JS目標定位處理無法存取源HTML的實時控制台和第三方頁面。

開始免費30天試用以測試這四種方法。

快速入門：將特定HTML元素提取為PDF

使用JavaScript DOM隔離和WaitFor可以通過CSS選擇器來定位任何元素，然後只對那個片段進行PDF渲染。

  1. 1Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

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

    using IronPdf;

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.EnableJavaScript = true;
renderer.RenderingOptions.JavaScript = @"
    var target = document.querySelector('#invoice-summary');
    document.body.innerHTML = target.outerHTML;
";
renderer.RenderingOptions.WaitFor.HtmlQuerySelector("#invoice-summary", 10000);

var pdf = renderer.RenderHtmlAsPdf(fullPageHtml);
pdf.SaveAs("invoice-summary.pdf");
    C#

  3. 3部署以在您的實時環境中測試

    今天就開始在您的專案中使用IronPDF，透過免費試用
    arrow pointer

最小工作流程（3步）

  1. 通過NuGet安裝Install-Package IronPdf
  2. 配置ChromePdfRenderOptions.JavaScript來隔離目標元素，並WaitFor確保它存在
  3. 調用RenderHtmlAsPdf()或RenderUrlAsPdf()——PDF僅包含被隔離的內容

如何使用JavaScript DOM操作隔離元素？

ChromePdfRenderOptions.JavaScript屬性接受一個JavaScript字串，這在HTML載入後但在PDF呈現之前執行。 通過將outerHTML，我們剝去了渲染頁面的其他所有內容。 這是最通用的方法——適用於RenderUrlAsPdf()。

WaitFor.HtmlQuerySelector()方法確保目標元素在JavaScript執行之前存在於DOM中。 這對於有非同步內容的頁面至關重要——如React組件、Angular模板或API驅動的資料在初始頁面載入後填充。

using IronPdf;

string fullPageHtml = @"
<html>
<body>
    <header><h1>Acme Corp Invoice</h1></header>
    <nav>Navigation links...</nav>
    <div id='invoice-summary'>
        <h2>Invoice #12345</h2>
        <table>
            <tr><td>Widget A</td><td>$49.99</td></tr>
            <tr><td>Widget B</td><td>$29.99</td></tr>
            <tr><td><strong>Total</strong></td><td><strong>$79.98</strong></td></tr>
        </table>
    </div>
    <footer>Footer content...</footer>
</body>
</html>";

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.EnableJavaScript = true;

// Replace the body with only the target element
renderer.RenderingOptions.Javascript = @"
    var el = document.querySelector('#invoice-summary');
    if (el) {
        document.body.innerHTML = el.outerHTML;
    }
";

// Wait for the target element to exist before JS executes
renderer.RenderingOptions.WaitFor.HtmlQuerySelector("#invoice-summary", 10000);

PdfDocument pdf = renderer.RenderHtmlAsPdf(fullPageHtml);
pdf.SaveAs("invoice-summary-only.pdf");

JavaScript用#invoice-summary div的outerHTML替換整個body。 生成的PDF僅包含發票表——沒有頭部、導航或頁腳。 WaitFor.HtmlElementById()方法在以ID為目標時提供了更簡單的替代方案：

// Alternative: wait by ID directly
renderer.RenderingOptions.WaitFor.HtmlElementById("invoice-summary", 10000);

對於複雜選擇器（類名、資料屬性、巢狀元素），document.querySelector()也能接受。 附加的HtmlQuerySelector()但在程式碼中提供了更明確的意圖。

當目標元素取決於來自父容器的繼承樣式時，outerHTML替換可能會丟失依賴於祖先選擇器的CSS規則（例如，.dashboard .widget table { ... }）。 要保留這些，將相關的<head>複製到JS隔離中：

renderer.RenderingOptions.JavaScript = @"
    var el = document.querySelector('#invoice-summary');
    if (el) {
        var head = document.head.innerHTML;
        document.body.innerHTML = el.outerHTML;
        document.head.innerHTML = head;
    }
";

這會保留原始<head>內容（樣式表、字體、meta標籤），同時僅替換body。 JavaScript到PDF如何操作指南和WaitFor如何操作指南涵蓋了其他配置選項，包括NetworkIdle0()用於具有多個非同步資料源的頁面。

如何使用CSS注入隔離元素？

ChromePdfRenderOptions.CustomCssUrl屬性接受IronPDF在渲染前應用的樣式表的文件路徑或URL。 我們使用CSS display: none隱藏除目標元素以外的所有內容，而不是操作DOM。 這保留了原始DOM結構並完全避免JavaScript執行。

using IronPdf;

// Create a CSS file that hides everything except #invoice-summary
string cssContent = @"
body > *:not(#invoice-summary) {
    display: none !important;
}
#invoice-summary {
    display: block !important;
    margin: 0;
    padding: 20px;
}
";
File.WriteAllText("isolate-element.css", cssContent);

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.CustomCssUrl = "isolate-element.css";

PdfDocument pdf = renderer.RenderHtmlAsPdf(fullPageHtml);
pdf.SaveAs("invoice-css-isolated.pdf");

注意：RenderHtmlAsPdf()共用時有效。 對於URL渲染，將CSS注入嵌入到JavaScript屬性中：

renderer.RenderingOptions.JavaScript = @"
    var style = document.createElement('style');
    style.textContent = 'body > *:not(#invoice-summary) { display: none !important; }';
    document.head.appendChild(style);
";

當我們控制HTML來源時，@media print規則提供了最輕量化的替代品——無外部依賴，無運行時注入：

@media print {
    header, nav, footer, .sidebar { display: none !important; }
    #invoice-summary { width: 100%; margin: 0; }
}
Text

在渲染器上設置PdfCssMediaType.Print以激活這些規則：

renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

這對於應用程式已經定義了@media print規則的表單部分列印場景理想，或者當表單HTML是在伺服器端組裝時的方法3。

CSS方法有一個重要的限制：如果display: none在錯誤的指定層次上使用，那些被隱藏的元素仍然占據文件流中的空間。 始終使用!important覆寫可能會在某些斷點處重新顯示元素的框架樣式（Bootstrap, Tailwind）。 對於深度巢狀的目標，更精確的選擇器避免連帶隱藏：

body > *:not(#target),
body > *:not(#target) ~ * {
    display: none !important;
}
Text

如何伺服器端提取HTML片段？

當我們能存取原始HTML——從文件、資料庫、CMS或HTTP響應中讀取時，最乾淨的方法是使用HTML解析器伺服器端提取目標元素，然後將片段傳遞給RenderHtmlAsPdf()。 無JavaScript，無CSS注入，無運行時DOM操作。

AngleSharp是此模式的標準.NET HTML解析器：

using IronPdf;
using AngleSharp;
using AngleSharp.Html.Parser;

string fullPageHtml = @"
<html>
<head>
    <style>
        table { border-collapse: collapse; width: 100%; }
        td, th { border: 1px solid #ddd; padding: 8px; text-align: left; }
    </style>
</head>
<body>
    <header><h1>Dashboard</h1></header>
    <div id='revenue-widget'>
        <h3>Q4 Revenue</h3>
        <table>
            <tr><th>Month</th><th>Revenue</th></tr>
            <tr><td>October</td><td>$1.2M</td></tr>
            <tr><td>November</td><td>$1.5M</td></tr>
            <tr><td>December</td><td>$1.8M</td></tr>
        </table>
    </div>
    <div id='other-content'>Other widgets...</div>
</body>
</html>";

// Parse and extract the target element
var parser = new HtmlParser();
var document = parser.ParseDocument(fullPageHtml);
var targetElement = document.QuerySelector("#revenue-widget");

if (targetElement is null)
{
    Console.WriteLine("Target element not found.");
    return;
}

// Wrap the fragment in a minimal HTML document to preserve styles
string fragmentHtml = $@"
<html>
<head>
    <style>
        table {{ border-collapse: collapse; width: 100%; }}
        td, th {{ border: 1px solid #ddd; padding: 8px; text-align: left; }}
    </style>
</head>
<body>
    {targetElement.OuterHtml}
</body>
</html>";

var renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf(fragmentHtml);
pdf.SaveAs("revenue-widget.pdf");

關鍵細節是將提取的片段封裝在帶有相關<link>標籤的完整HTML文件中。 沒有這個包裝器，內聯樣式會正確呈現，但外部樣式表和繼承的CSS規則會丟失。對於電子郵件模板預覽渲染——模板HTML已經以字串形式儲存——此提取模式提供像素級精確的結果，因為我們控制著所呈現內容的每一個方面。

同樣的模式也適用於使用HtmlAgilityPack作為替代解析器：

using HtmlAgilityPack;
using IronPdf;

var htmlDoc = new HtmlDocument();
htmlDoc.LoadHtml(fullPageHtml);

var targetNode = htmlDoc.DocumentNode.SelectSingleNode("//*[@id='revenue-widget']");
if (targetNode is null)
{
    Console.WriteLine("Target element not found.");
    return;
}

string fragmentHtml = $"<html><body>{targetNode.OuterHtml}</body></html>";

var renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf(fragmentHtml);
pdf.SaveAs("revenue-widget-hap.pdf");
PdfDocument pdf = renderer.RenderHtmlAsPdf(fragmentHtml, @"C:\templates\assets\");

在AngleSharp和HtmlAgilityPack之間的選擇大多數是一種偏好。 AngleSharp使用CSS選擇器（QuerySelector），這與前端開發者的思維模式一致。 HtmlAgilityPack使用XPath（SelectSingleNode），在XML密集的.NET程式碼庫中更為熟悉。

對於電子郵件模板預覽渲染——在發送之前生成HTML電子郵件模板的PDF預覽——則單純是的方法3情況。 模板HTML是儲存的字串，外部資源（圖像、字體）托管在已知URL上，而RenderHtmlAsPdf()上解決了所有相對路徑。

當HTML包含<div id="app"></div>由React或Vue應用程式在運行時填充時，提取的片段會是空的。 在這些情況下，使用方法1或4。

我最喜歡的程式庫是IronPDF。它允許快速高效地操作PDF文件。它還有許多有價值的功能，例如導出到PDF/A格式和數位簽署PDF文件。

Milan Jovanovic

Microsoft MVP

查看案例研究

IronOCR意味著我們每年可以從手動處理中節省$40,000，同時提高生產力，釋放資源以進行高影響的任務。我會強烈推薦它。

Brent Matzelle

首席技術官，OPYN

查看案例研究

IronSuite在我們的運營中扮演著至關重要的角色。這些工具增加了包括建立平面圖和改善庫存管理在內的業務效率。

David Jones

首席軟體工程師，Agorus Build

查看案例研究

如何在渲染實時URL時定位元素？

對於無法存取源HTML的實時URL——第三方控制台、外部報告、托管應用程式——我們將WaitFor結合，在頁面載入後隔離特定區段。

這是儀表板小部件導出場景：一個BI工具在網頁上呈現圖表和表格，我們需要將單個小部件作為PDF導出以供利益相關方分發。

using IronPdf;

var renderer = new ChromePdfRenderer();
renderer.RenderingOptions.EnableJavaScript = true;

// Wait for the dashboard widget to render (async content)
renderer.RenderingOptions.WaitFor.HtmlQuerySelector("[data-widget='revenue-chart']", 15000);

// Isolate the widget after it renders
renderer.RenderingOptions.Javascript = @"
    var widget = document.querySelector('[data-widget=""revenue-chart""]');
    if (widget) {
        // Preserve computed styles by cloning into a clean body
        document.body.innerHTML = '';
        document.body.appendChild(widget);
    }
";

PdfDocument pdf = renderer.RenderUrlAsPdf("https://dashboard.example.com/q4-report");
pdf.SaveAs("revenue-chart-export.pdf");

WaitFor.HtmlQuerySelector()調用確保小部件在JavaScript執行之前存在於DOM中。 15秒超時可以容納較慢的API調用以填充儀表板資料。 然後JavaScript將頁面精簡為僅有的小部件。

對於具有複雜CSS依賴的頁面，outerHTML）保留了更多計算樣式，因為元素保留了其在CSSOM中的位置。 方法1中的innerHTML替換方法更簡單，但可能丟失依賴於祖先選擇器的樣式。

當目標頁面需要身份驗證時，請在調用RenderUrlAsPdf()之前在渲染器上配置cookies：

renderer.RenderingOptions.CustomCookies = new Dictionary<string, string>
{
    { "session_id", "abc123" },
    { "auth_token", "bearer-xyz" }
};
HtmlQuerySelector()之外的附加等待策略。 NetworkIdle0()直到所有網路請求完成而沒有未解決的連接——這對於從多個API端點載入資料的儀表板非常有用。 NetworkIdle2()容忍最多兩個未解決的連接，這可以處理具有持續WebSocket連接或長輪詢的頁面。 window.ironpdf.notifyRender()——當我們控制目標頁面並且可以明確地發信號在所有資料載入和動畫完成後準備渲染時，這是最準確的選擇。

對於定期儀表板導出（例如，夜間PDF生成以便於利益相關方電子郵件分發），將渲染包裝在一個捕捉超時異常的重試迴圈中。 如果maxWaitTime，IronPDF將繼續渲染當前可用的內容——可能不完整。 增加超時或切換到NetworkIdle0()通常可以解決較慢網路的間歇性故障。

四種方法的比較

方法最佳用途需要源HTMLJS依賴複雜性
JavaScript DOM隔離通用的從任何來源提取元素否是中等
CSS注入不改變DOM結構的隱藏區段； @media print 佈局部分（CustomCssUrl需要RenderHtmlAsPdf）否（除非通過JS為URL注入）低
伺服器端片段提取CMS內容、儲存模板、電子郵件預覽是否低到中等
URL渲染和JS定位實時儀表板、第三方頁面、SPA小部件否是中到高

選擇正確的方法

決策取決於兩個因素：我們是否可以存取原始HTML，以及目標內容是否需要JavaScript才能渲染。

Invoice行項目提取是最常見的用例。 當發票HTML在伺服器端生成時（Razor視圖、Handlebars模板、儲存的HTML字串），方法3（伺服器端提取）以零運行時開銷提供最乾淨的結果。 提取#line-items表格，將其包裝在一個有樣式的HTML殼中，然後渲染。

Dashboard 小部件導出需要JavaScript執行，因為小部件內容在初始頁面載入後由API調用填充。 當儀表板在本地運行或需要身份驗證時，方法1（JS DOM隔離）可處理這個情況。 當儀表板是第三方托管應用程式而我們只有URL時，方法4（URL渲染和JS定位）是必需的。

Form 部分列印——提取多步驟表單的特定部分以便使用者檢查或合規存檔——如果應用程式已經定義了@media print規則，會自然地映射到方法2（CSS注入），或者在表單HTML在伺服器端組裝時的第3種方法。

Email模板預覽渲染——在發送前生成HTML電子郵件模板的PDF預覽——是一種純粹的第3種情況。 模板HTML是儲存的字串，外部資源（圖像、字體）托管在已知URL上，而在RenderHtmlAsPdf()解決所有相對路徑。

對於需要支持多個場景的應用程式，將渲染邏輯封裝在一個服務接口後面，該接口接受一個策略參數：

public enum ElementExtractionStrategy
{
    JavaScriptIsolation,
    CssInjection,
    ServerSideExtraction,
    UrlWithJsTargeting
}

這使調用程式碼能根據輸入型別選擇適當的方法，而不必重複渲染器配置。

下一步

IronPDF中的HTML元素隔離是渲染時的考慮，不是內建API功能。 上述四種方法涵蓋了全譜——從伺服器端模板提取（零JS，最乾淨的輸出）到實時URL定位（完全JS執行，處理SPAs和非同步內容）。 比較表提供了快速參考，實際場景將常見業務需求映射為適當的策略。

對於生產部署有一些附加考慮：

性能：伺服器端提取（方法3）是最快的，因為它完全跳過JavaScript執行。 基於JavaScript的方法（1和4）增加了與頁面複雜性和WaitFor超時成比例的開銷。 對於批量處理（例如，生成500份發票PDF），伺服器端提取與ChromePdfRenderer實例提供了最佳的吞吐量。

除錯：當PDF輸出為空或缺少內容時，啟用WaitFor超時。 如果目標元素依賴於非同步資料，RenderDelay更可靠。 渲染選項指南涵蓋影響佈局的viewport寬度和紙張適配配置。

結合方法：沒有什麼能阻止混合策略。 我們可以使用伺服器端提取來從多個片段（從一個來源的頭部，從另一個的資料表，從第三個的圖表SVG）構建複合HTML文件，然後將組裝的文件作為單個PDF渲染。 RenderHtmlAsPdf(string Html, string BaseUrlOrPath)方法從基URL解析相對資產路徑，從異構來源組合文件變得直截了當。

探索JavaScript到PDF如何操作指南以獲取進階JS執行模式，WaitFor文件以了解所有可用的等待策略，渲染選項指南用於完整的ChromePdfRenderOptions表面，和自定義JavaScript程式碼範例以獲得現成運行的片段。

查看許可選項從$999開始。 ChromePdfRenderOptions API參考和WaitFor API參考記錄了所有屬性和方法。

常見問題

轉換HTML元素為PDF的主要方法是什麼？

主要方法包括JS隔離、CSS隱藏、伺服器端提取和實時URL目標，這些都可以使用IronPDF實現。

在HTML到PDF轉換中，JS隔離如何運作？

JS隔離涉及運行JavaScript以動態操作HTML文件然後再將其轉換為PDF。這可以通過IronPDF實現，以確保僅渲染特定元素。

CSS隱藏是什麼，以及它如何用於PDF轉換？

CSS隱藏涉及使用CSS樣式隱藏不應出現在PDF中的元素。IronPDF透過允許開發人員在轉換過程中指定樣式表或樣式規則來支持這一點。

IronPDF可以在伺服器端提取特定的HTML元素用於PDF生成嗎？

是的，IronPDF可以在伺服器端提取特定的HTML元素，精確控制網頁的哪些部分被轉換為PDF。

在HTML到PDF轉換中，實時URL目標有什麼優勢？

實時URL目標允許IronPDF直接將實時網頁URL中的元素轉換為PDF，確保捕獲最新的內容，無需本地HTML文件。

使用IronPDF是否可以將僅一部分網頁轉換為PDF？

是的，IronPDF提供將網頁的特定區段或元素轉換為PDF的功能，輕鬆專注於相關內容。

IronPDF如何在HTML到PDF轉換過程中處理動態內容？

IronPDF可以在轉換過程中執行JavaScript以渲染動態內容，確保依賴於客戶端腳本的元素在PDF中準確呈現。

How do I maintain CSS styles when isolating HTML elements for PDF?

Preserve CSS styles by copying necessary `