Wie man HTML-Elemente und Teilseitenabschnitte in PDF in C# konvertiert

Aktualisiert:10. März 2026

Translated

View the article in English

IronPDF bietet keine integrierte SelectElement oder SelectCss Methode an, um gezielt bestimmte HTML-Elemente anzusprechen. Der ChromePdfRenderer rendert komplette HTML-Dokumente — eine vollständige Seite, eine vollständige URL, einen vollständigen HTML-String. Um ein PDF aus einem bestimmten Abschnitt einer Seite zu erstellen, isolieren wir das Ziel-Element vor dem Rendern mit einer von vier Ansätzen: JavaScript-DOM-Manipulation, CSS-Injektion, serverseitige HTML-Fragmentextraktion oder URL-Rendering mit JS-Targeting.

Jeder Ansatz passt zu unterschiedlichen Rahmenbedingungen. JavaScript-DOM-Isolation funktioniert beim Rendern von URLs oder vollständigen Seiten, bei denen wir alles außer dem Ziel entfernen müssen. CSS-Injektion verbirgt unerwünschte Inhalte, ohne den DOM zu ändern. Serverseitige Extraktion bietet das sauberste Ergebnis, wenn wir Zugriff auf das rohe HTML haben. URL-Rendering mit JS-Targeting behandelt Live-Dashboards und Drittanbieter-Seiten, bei denen das Quell-HTML nicht verfügbar ist.

Starten Sie eine kostenlose 30-Tage-Testversion, um alle vier Ansätze zu testen.

Quickstart: Extrahieren Sie ein bestimmtes HTML-Element als PDF

Zielen Sie auf jedes Element anhand eines CSS-Selectors mit JavaScript DOM-Isolation und WaitFor ab, und rendern Sie dann nur dieses Fragment in PDF.

Installieren Sie IronPDF mit NuGet Package Manager
PM > Install-Package IronPdf

Kopieren Sie diesen Codeausschnitt und führen Sie ihn aus.

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");

Bereitstellen zum Testen in Ihrer Live-Umgebung

Beginnen Sie noch heute, IronPDF in Ihrem Projekt zu verwenden, mit einer kostenlosen Testversion

Minimal Workflow (3 Schritte)

Installieren Sie IronPdf über NuGet: Install-Package IronPdf
Konfigurieren Sie ChromePdfRenderOptions.JavaScript, um das Zielelement zu isolieren, und WaitFor, um sicherzustellen, dass es existiert.
Call RenderHtmlAsPdf() or RenderUrlAsPdf() — the PDF contains only the isolated content

Wie isoliert man Elemente mit JavaScript-DOM-Manipulation?

Die ChromePdfRenderOptions.JavaScript Eigenschaft akzeptiert einen JavaScript-String, der ausgeführt wird, nachdem HTML geladen ist, aber bevor das PDF gerendert wird. Indem wir document.body.innerHTML durch den outerHTML des Zielelements ersetzen, entfernen wir alles andere von der gerenderten Seite. Dies ist der vielseitigste Ansatz — er funktioniert sowohl mit RenderHtmlAsPdf() als auch mit RenderUrlAsPdf().

Die WaitFor.HtmlQuerySelector() Methode stellt sicher, dass das Zielelement im DOM vorhanden ist, bevor JavaScript ausgeführt wird. Dies ist entscheidend für Seiten mit asynchronen Inhalten — React-Komponenten, Angular-Templates oder von APIs getriebene Daten, die nach dem ersten Laden der Seite geladen werden.

:path=/static-assets/pdf/content-code-examples/how-to/html-element-to-pdf-2.cs

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");

Imports IronPdf

Dim fullPageHtml As String = "
<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>"

Dim renderer As 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)

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

$vbLabelText $csharpLabel

Das JavaScript ersetzt den gesamten Body durch den #invoice-summary des div's outerHTML. Das resultierende PDF enthält nur die Rechnungstabelle — kein Kopf, keine Navigation, kein Fuß. Die WaitFor.HtmlElementById() Methode bietet eine einfachere Alternative, wenn nach ID gezielt wird:

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

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

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

$vbLabelText $csharpLabel

Für komplexe Selektoren (Klassennamen, Datenattribute, verschachtelte Elemente) akzeptiert HtmlQuerySelector() jeden gültigen CSS-Selektor-String, den document.querySelector() akzeptieren würde. Weitere WaitFor Erleichterungsmethoden umfassen HtmlElementByClassName(), HtmlElementByName() und HtmlElementByTagName() — jede delegiert intern an HtmlQuerySelector(), bietet jedoch eine klarere Absicht im Code.

Wenn das Zielelement von geerbten Stilen von übergeordneten Containern abhängt, kann der outerHTML Ersatz CSS-Regeln verlieren, die von Ahnen-Selektoren abhängen (z.B. .dashboard .widget table { ... }). Um diese zu bewahren, kopieren Sie die relevanten <style> und <link /> Tags aus der <head> in die JS-Isolation:

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;
    }
";

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;
    }
";

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;
    }
"

$vbLabelText $csharpLabel

Dies behält den ursprünglichen <head> Inhalt bei (Stylesheets, Schriftarten, Metatags) und ersetzt nur den Body. Das JavaScript zu PDF How-to und das WaitFor How-to deckt zusätzliche Konfigurationsoptionen ab, einschließlich NetworkIdle0() für Seiten mit mehreren asynchronen Datenquellen.

Wie isoliert man Elemente mit CSS-Injektion?

Die ChromePdfRenderOptions.CustomCssUrl Eigenschaft akzeptiert einen Dateipfad oder eine URL zu einem Stylesheet, das IronPDF vor dem Rendern anwendet. Anstatt den DOM zu manipulieren, verstecken wir alles außer dem Zielelement mit CSS display: none. Dies bewahrt die ursprüngliche DOM-Struktur und vermeidet die Ausführung von JavaScript vollständig.

:path=/static-assets/pdf/content-code-examples/how-to/html-element-to-pdf-5.cs

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");

Imports IronPdf

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

Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.CustomCssUrl = "isolate-element.css"

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

$vbLabelText $csharpLabel

Hinweis: Die CustomCssUrl Eigenschaft funktioniert nur mit RenderHtmlAsPdf(), wenn aus HTML-Strings gerendert wird. Für die URL-Wiedergabe binden Sie die CSS-Injektion stattdessen in die JavaScript Eigenschaft ein:

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

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

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

$vbLabelText $csharpLabel

Wenn wir die Quell-HTML kontrollieren, bieten @media print Regeln die leichteste Alternative — keine externen Abhängigkeiten, keine Laufzeiteinspritzung:

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

Setzen Sie CssMediaType auf PdfCssMediaType.Print im Renderer, um diese Regeln zu aktivieren:

:path=/static-assets/pdf/content-code-examples/how-to/html-element-to-pdf-8.cs

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

Imports IronPdf.Rendering

renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print

$vbLabelText $csharpLabel

Dies ist ideal für Druckszenarien von Formularabschnitten, in denen die Anwendung bereits @media print Regeln definiert, oder Ansatz 3, wenn das Formular-HTML serverseitig zusammengesetzt wird.

Der CSS-Ansatz hat eine wichtige Einschränkung: Versteckte Elemente beanspruchen weiterhin Platz im Dokumentfluss, wenn display: none auf der falschen Spezifitätsebene verwendet wird. Verwenden Sie immer !important, um Framework-Stile (Bootstrap, Tailwind) zu überschreiben, die Elemente möglicherweise bei bestimmten Breakpoints wieder anzeigen. Für tief verschachtelte Ziele sorgt ein präziserer Selektor für eine genauere Ausblendung:

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

Meine Lieblingsbibliothek dieser Art ist IronPDF. Es ermöglicht eine schnelle und effiziente Bearbeitung von PDF-Dateien. Es verfügt auch über viele wertvolle Funktionen, wie das Exportieren in das PDF/A-Format und das digitale Signieren von PDF-Dokumenten.

Milan Jovanovic

Microsoft MVP

Fallstudie ansehen

IronOCR bedeutet, dass wir jährlich 40.000 $ durch manuelle Verarbeitung einsparen können, während die Produktivität gesteigert wird und Ressourcen für wichtige Aufgaben freigesetzt werden. Ich würde es sehr empfehlen.

Brent Matzelle

Technischer Leiter, OPYN

Fallstudie ansehen

Wie extrahiert man HTML-Fragmente serverseitig?

Wenn wir Zugriff auf das Roh-HTML haben — es aus einer Datei, einer Datenbank, einem CMS oder einer HTTP-Antwort lesen — ist der sauberste Ansatz, das Zielelement serverseitig mit einem HTML-Parser zu extrahieren und dann das Fragment an RenderHtmlAsPdf() zu übergeben. Kein JavaScript, keine CSS-Injektion, keine Laufzeit-DOM-Manipulation.

AngleSharp ist der Standard- .NET-HTML-Parser für dieses Muster:

:path=/static-assets/pdf/content-code-examples/how-to/html-element-to-pdf-10.cs

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");

Imports IronPdf
Imports AngleSharp
Imports AngleSharp.Html.Parser

Dim fullPageHtml As String = "
<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
Dim parser As New HtmlParser()
Dim document = parser.ParseDocument(fullPageHtml)
Dim targetElement = document.QuerySelector("#revenue-widget")

If targetElement Is Nothing Then
    Console.WriteLine("Target element not found.")
    Return
End If

' Wrap the fragment in a minimal HTML document to preserve styles
Dim fragmentHtml As String = $"
<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>"

Dim renderer As New ChromePdfRenderer()
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(fragmentHtml)
pdf.SaveAs("revenue-widget.pdf")

$vbLabelText $csharpLabel

Der entscheidende Punkt ist, das extrahierte Fragment in ein vollständiges HTML-Dokument mit den relevanten <style> oder <link> Tags zu wickeln. Ohne diesen Wrapper werden Inline-Stile korrekt gerendert, aber externe Stylesheets und vererbte CSS-Regeln gehen verloren. Für das Rendering einer E-Mail-Vorlagenvorschau - bei der das Vorlagen-HTML bereits als String gespeichert ist - liefert dieses Extraktionsmuster pixelgenaue Ergebnisse, da wir jeden Aspekt des gerenderten Inhalts kontrollieren.

Das gleiche Muster funktioniert mit HtmlAgilityPack als alternativen Parser:

:path=/static-assets/pdf/content-code-examples/how-to/html-element-to-pdf-11.cs

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");

Imports HtmlAgilityPack
Imports IronPdf

Dim htmlDoc As New HtmlDocument()
htmlDoc.LoadHtml(fullPageHtml)

Dim targetNode = htmlDoc.DocumentNode.SelectSingleNode("//*[@id='revenue-widget']")
If targetNode Is Nothing Then
    Console.WriteLine("Target element not found.")
    Return
End If

Dim fragmentHtml As String = $"<html><body>{targetNode.OuterHtml}</body></html>"

Dim renderer As New ChromePdfRenderer()
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(fragmentHtml)
pdf.SaveAs("revenue-widget-hap.pdf")

$vbLabelText $csharpLabel

:path=/static-assets/pdf/content-code-examples/how-to/html-element-to-pdf-12.cs

PdfDocument pdf = renderer.RenderHtmlAsPdf(fragmentHtml, @"C:\templates\assets\");

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(fragmentHtml, "C:\templates\assets\")

$vbLabelText $csharpLabel

Die Wahl zwischen AngleSharp und HtmlAgilityPack ist überwiegend eine Frage der Präferenz. AngleSharp verwendet CSS-Selektoren (QuerySelector), was sich mit den mentalen Modellen von Frontend-Entwicklern deckt. HtmlAgilityPack verwendet XPath (SelectSingleNode), was in XML-belasteten .NET-Codebasen vertrauter ist.

Für die Vorschau-Renderung von E-Mail-Vorlagen – das Generieren einer PDF-Vorschau einer HTML-E-Mail-Vorlage vor dem Senden – ist ein reines Ansatz-3-Szenario. Das Vorlagen-HTML ist ein gespeicherter String, externe Ressourcen (Bilder, Schriftarten) sind unter bekannten URLs gehostet, und der RenderHtmlAsPdf(string Html, string BaseUrlOrPath) Parameter auf RenderHtmlAsPdf() löst alle relativen Pfade auf.

Wenn das HTML <div id="app"></div> enthält, die eine React- oder Vue-Anwendung zur Laufzeit füllt, bleibt das extrahierte Fragment leer. Für diese Fälle verwenden Sie Ansatz 1 oder 4.

Wie zielt man auf Elemente beim Rendern von Live-URLs ab?

Für Live-URLs, bei denen wir keinen Zugriff auf das Quell-HTML haben — Dashboards von Drittanbietern, externe Berichte, gehostete Anwendungen — kombinieren wir RenderUrlAsPdf() mit der JavaScript Eigenschaft und WaitFor, um einen bestimmten Abschnitt zu isolieren, nachdem die Seite geladen ist.

Dies ist das Dashboard-Widget-Export-Szenario: Ein BI-Tool rendert Charts und Tabellen auf einer Webseite, und wir müssen ein einzelnes Widget als PDF zur Verteilung an Stakeholder exportieren.

:path=/static-assets/pdf/content-code-examples/how-to/html-element-to-pdf-13.cs

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");

Imports IronPdf

Dim renderer As 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);
    }
"

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

$vbLabelText $csharpLabel

Der WaitFor.HtmlQuerySelector() Aufruf stellt sicher, dass das Widget im DOM existiert, bevor das JavaScript ausgeführt wird. Das 15-Sekunden-Timeout berücksichtigt langsamere API-Aufrufe, die Dashboard-Daten füllen. Das JavaScript reduziert dann die Seite auf nur das Widget.

Für Seiten mit komplexen CSS-Abhängigkeiten bewahrt der appendChild Ansatz (Verschieben des Nodes anstatt Kopieren seiner outerHTML) mehr berechnete Stile, da das Element seine Position im CSSOM behält. Der innerHTML Ersatzansatz aus Ansatz 1 ist einfacher, kann jedoch Stile verlieren, die von Ahnen-Selektoren abhängen.

Wenn die Zielseite eine Authentifizierung erfordert, konfigurieren Sie Cookies auf dem Renderer, bevor Sie RenderUrlAsPdf() aufrufen:

renderer.RenderingOptions.CustomCookies = new Dictionary<string, string>
{
    { "session_id", "abc123" },
    { "auth_token", "bearer-xyz" }
};

renderer.RenderingOptions.CustomCookies = new Dictionary<string, string>
{
    { "session_id", "abc123" },
    { "auth_token", "bearer-xyz" }
};

Imports System.Collections.Generic

renderer.RenderingOptions.CustomCookies = New Dictionary(Of String, String) From {
    {"session_id", "abc123"},
    {"auth_token", "bearer-xyz"}
}

$vbLabelText $csharpLabel

Die WaitFor Klasse bietet zusätzliche Warte-Strategien über HtmlQuerySelector() hinaus. NetworkIdle0() wartet, bis alle Netzwerk-Anfragen beendet sind, ohne offene Verbindungen — nützlich für Dashboards, die Daten von mehreren API-Endpunkten laden. NetworkIdle2() toleriert bis zu zwei offene Verbindungen, was Seiten mit dauerhaften WebSocket-Verbindungen oder Long-Polling behandelt. JavaScript() wartet darauf, dass die Seite window.ironpdf.notifyRender() aufruft — die präziseste Option, wenn wir die Zielseite kontrollieren und die Render-Bereitschaft ausdrücklich signalisieren können, nachdem alle Daten geladen sind und Animationen abgeschlossen sind.

Für wiederkehrende Dashboard-Exporte (z. B. nächtliche PDF-Erzeugung zur Verteilung von Stakeholder-Mails) betten Sie das Rendering in eine Wiederholungsschleife ein, die Timeout-Exceptions abfängt. Wenn WaitFor seine maxWaitTime überschreitet, fährt IronPDF mit dem Rendern des verfügbaren Inhalts fort — der möglicherweise unvollständig ist. Das Erhöhen des Timeouts oder der Wechsel zu NetworkIdle0() löst typischerweise sporadische Ausfälle in langsameren Netzwerken.

Vergleich aller vier Ansätze

Ansatz	Am besten für	Benötigt Quell-HTML	JS-Abhängigkeit	Komplexität
JavaScript-DOM-Isolierung	Allzweck-Elementextraktion aus jeder Quelle	Nein	Ja	Medium
CSS-Injektion	Abschnitte ohne DOM-Änderungen ausblenden; `@media print` Layouts	Teilweise (CustomCssUrl benötigt `RenderHtmlAsPdf`)	Nein (außer Injektion über JS für URLs)	Niedrig
Serverseitige Fragmentextraktion	CMS-Inhalte, gespeicherte Vorlagen, E-Mail-Vorschauen	Ja	Nein	Niedrig–Mittel
URL-Rendering mit JS-Zielsetzung	Live-Dashboards, Drittanbieter-Seiten, SPA-Widgets	Nein	Ja	Mittel–Hoch

Wahl des richtigen Ansatzes

Die Entscheidung hängt von zwei Faktoren ab: ob wir Zugang zum rohen HTML haben und ob der Zielinhalt JavaScript zum Rendern benötigt.

Invoice Zeilenartikel-Extraktion ist der häufigste Anwendungsfall. Wenn das Rechnungs-HTML serverseitig generiert wird (Razor-Ansichten, Handlebars-Vorlagen, gespeicherte HTML-Strings), liefert Ansatz 3 (serverseitige Extraktion) das sauberste Ergebnis ohne Laufzeit-Overhead. Extrahieren Sie die #line-items Tabelle, wickeln Sie sie in eine stilisierte HTML-Hülle ein und rendern Sie.

Dashboard Widget-Export erfordert die Ausführung von JavaScript, da der Widget-Inhalt nach dem ersten Laden der Seite durch API-Aufrufe befüllt wird. Ansatz 1 (JS-DOM-Isolierung) bewältigt dies, wenn das Dashboard lokal oder hinter einer Authentifizierung ausgeführt wird. Ansatz 4 (URL-Rendering mit JS-Zielsetzung) ist erforderlich, wenn das Dashboard eine Drittanbieter-gehostete Anwendung ist, bei der wir nur die URL haben.

Form Abschnittsdrucken — das Extrahieren eines bestimmten Abschnitts eines mehrstufigen Formulars zur Benutzerüberprüfung oder zum Archivieren für die Einhaltung — entspricht natürlich Ansatz 2 (CSS-Injektion), wenn die Anwendung bereits @media print Regeln definiert, oder Ansatz 3, wenn das Formular-HTML serverseitig zusammengestellt wird.

Email Vorlagenvorschau-Rendering — das Erstellen einer PDF-Vorschau einer HTML-E-Mail-Vorlage, bevor sie gesendet wird — ist ein reiner Ansatz 3-Anwendungsfall. Das Vorlagen-HTML ist ein gespeicherter String, externe Ressourcen (Bilder, Schriftarten) sind unter bekannten URLs gehostet, und der BaseUrlOrPath Parameter auf RenderHtmlAsPdf() löst alle relativen Pfade auf.

Für Anwendungen, die mehrere Szenarien unterstützen müssen, kapseln Sie die Rendering-Logik hinter einer Service-Schnittstelle, die einen Strategie-Parameter akzeptiert:

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

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

Public Enum ElementExtractionStrategy
    JavaScriptIsolation
    CssInjection
    ServerSideExtraction
    UrlWithJsTargeting
End Enum

$vbLabelText $csharpLabel

Dies erlaubt es dem aufrufenden Code, den entsprechenden Ansatz basierend auf dem Eingabetyp auszuwählen, ohne die Renderer-Konfiguration zu duplizieren.

Nächste Schritte

Die Isolation von HTML-Elementen in IronPDF ist eine Rendering-Zeit-Angelegenheit, keine in die API eingebaute Funktion. Die vier oben genannten Ansätze decken das volle Spektrum ab - von der serverseitigen Vorlagenextraktion (kein JS, sauberste Ausgabe) bis zur Live-URL-Zielsetzung (vollständige JS-Ausführung, handhabt SPAs und asynchrone Inhalte). Die Vergleichstabelle bietet eine schnelle Referenz, und die realen Szenarien ordnen gängige Geschäftsanforderungen der entsprechenden Strategie zu.

Einige zusätzliche Überlegungen für Produktionsbereitstellungen:

Leistung: Serverseitige Extraktion (Ansatz 3) ist die schnellste, da sie die JavaScript-Ausführung vollständig überspringt. JavaScript-basierte Ansätze (1 und 4) erhöhen die Belastung proportional zur Komplexität der Seite und dem WaitFor Timeout. Für die Stapelverarbeitung (z.B. das Erzeugen von 500 Rechnungs-PDFs) bietet die serverseitige Extraktion mit Parallel.ForEach und mehreren ChromePdfRenderer Instanzen den besten Durchsatz.

Debugging: Wenn die PDF-Ausgabe leer ist oder Inhalte fehlen, aktivieren Sie EnableJavaScript = true und erhöhen Sie das WaitFor Timeout. Wenn das Zielelement von asynchronen Daten abhängt, ist WaitFor.NetworkIdle0() zuverlässiger als ein festes RenderDelay. Der Rendering-Optionen-Leitfaden behandelt Konfigurationen für die Viewport-Breite und Papieranpassung, die Auswirkungen auf das Layout haben.

Kombination von Ansätzen: Nichts hindert daran, Strategien zu mischen. Wir können die serverseitige Extraktion verwenden, um ein zusammengesetztes HTML-Dokument aus mehreren Fragmenten zu erstellen (Kopfzeile von einer Quelle, Datentabelle von einer anderen, Chart-SVG von einer dritten), dann das zusammengesetzte Dokument als ein einziges PDF rendern. Die RenderHtmlAsPdf(string Html, string BaseUrlOrPath) Methode löst relative Asset-Pfade von der Basis-URL aus auf, was es einfach macht, Dokumente aus heterogenen Quellen zu erstellen.

Erkunden Sie das JavaScript zu PDF How-to für fortgeschrittene JS-Ausführungsmuster, die WaitFor-Dokumentation für alle verfügbaren Warten-Strategien, den Rendering-Optionen-Leitfaden für die komplette ChromePdfRenderOptions Oberfläche und das Beispiel für benutzerdefinierten JavaScript-Code für einsatzbereite Snippets.

Sehen Sie sich die Lizenzierungsmöglichkeiten beginnend bei $999 an. The ChromePdfRenderOptions API reference and WaitFor API reference document every property and method.

Häufig gestellte Fragen

Was sind die Hauptansätze zur Konvertierung von HTML-Elementen zu PDF in C#?

Die Hauptansätze umfassen JS-Isolation, CSS-Verdeckung, serverseitige Extraktion und Live-URL-Zielansteuerung, die alle mit IronPDF implementiert werden können.

Wie funktioniert die JS-Isolation im Kontext der HTML-zu-PDF-Konvertierung?

JS-Isolation umfasst das Ausführen von JavaScript zur dynamischen Manipulation des HTML-Dokuments, bevor es in PDF umgewandelt wird. Dies kann mit IronPDF erreicht werden, um sicherzustellen, dass nur bestimmte Elemente gerendert werden.

Was ist CSS-Verdeckung und wie wird sie in der PDF-Konvertierung verwendet?

CSS-Verdeckung umfasst die Verwendung von CSS-Stilen, um Elemente auszublenden, die nicht im PDF erscheinen sollen. IronPDF unterstützt dies, indem es Entwicklern erlaubt, Stylesheets oder Stilregeln während des Konvertierungsprozesses zu spezifizieren.

Kann IronPDF spezifische HTML-Elemente serverseitig für die PDF-Erstellung extrahieren?

Ja, IronPDF kann spezifische HTML-Elemente serverseitig extrahieren, was eine präzise Kontrolle darüber ermöglicht, welche Teile einer Webseite in ein PDF umgewandelt werden.

Was ist der Vorteil der Live-URL-Zielansteuerung bei der HTML-zu-PDF-Konvertierung?

Die Live-URL-Zielansteuerung ermöglicht es IronPDF, Elemente einer Live-Webseite-URL direkt in PDF umzuwandeln, was sicherstellt, dass der aktuellste Inhalt erfasst wird, ohne lokale HTML-Dateien zu benötigen.

Ist es möglich, nur einen Abschnitt einer Webseite in PDF zu konvertieren, indem IronPDF verwendet wird?

Ja, IronPDF bietet Funktionen, um spezifische Abschnitte oder Elemente einer Webseite in PDF zu konvertieren, was es einfach macht, sich auf relevanten Inhalt zu konzentrieren.

Wie kann IronPDF mit dynamischen Inhalten während der HTML-zu-PDF-Konvertierung umgehen?

IronPDF kann dynamische Inhalte rendern, indem JavaScript während der Konvertierung ausgeführt wird, um sicherzustellen, dass Elemente, die auf Clientskripte angewiesen sind, genau im PDF dargestellt werden.

Curtis Chau

Jetzt mit dem Ingenieurteam chatten

Technischer Autor

Curtis Chau hat einen Bachelor-Abschluss in Informatik von der Carleton University und ist spezialisiert auf Frontend-Entwicklung mit Expertise in Node.js, TypeScript, JavaScript und React. Leidenschaftlich widmet er sich der Erstellung intuitiver und ästhetisch ansprechender Benutzerschnittstellen und arbeitet gerne mit modernen Frameworks sowie der Erstellung gut strukturierter, optisch ansprechender ...

Bereit anzufangen?

Nuget Downloads 20,088,359 | Version: 2026.7 gerade veröffentlicht

Lizenzen anzeigen

Scrollst du immer noch?

Sie brauchen schnell einen Beweis? PM > Install-Package IronPdf
Führen Sie eine Probe aus Sehen Sie zu, wie Ihr HTML-Code in eine PDF-Datei umgewandelt wird.

Lizenzen anzeigen

Kunden-Highlight:

Entwickler im Rampenlicht:

Webinare:

Starten Sie jetzt Ihre kostenlose 30-Tage-Testphase

Auf dieser Seite

Wie man HTML-Elemente und Teilseitenabschnitte in PDF in C# konvertiert

Installieren Sie IronPDF mit NuGet Package Manager

Kopieren Sie diesen Codeausschnitt und führen Sie ihn aus.

Bereitstellen zum Testen in Ihrer Live-Umgebung

Minimal Workflow (3 Schritte)

Wie isoliert man Elemente mit JavaScript-DOM-Manipulation?

Wie isoliert man Elemente mit CSS-Injektion?

Milan Jovanovic

Brent Matzelle

David Jones

Wie extrahiert man HTML-Fragmente serverseitig?

Wie zielt man auf Elemente beim Rendern von Live-URLs ab?

Vergleich aller vier Ansätze

Wahl des richtigen Ansatzes

Nächste Schritte

Häufig gestellte Fragen

Was sind die Hauptansätze zur Konvertierung von HTML-Elementen zu PDF in C#?

Wie funktioniert die JS-Isolation im Kontext der HTML-zu-PDF-Konvertierung?

Was ist CSS-Verdeckung und wie wird sie in der PDF-Konvertierung verwendet?

Kann IronPDF spezifische HTML-Elemente serverseitig für die PDF-Erstellung extrahieren?

Was ist der Vorteil der Live-URL-Zielansteuerung bei der HTML-zu-PDF-Konvertierung?

Ist es möglich, nur einen Abschnitt einer Webseite in PDF zu konvertieren, indem IronPDF verwendet wird?

Wie kann IronPDF mit dynamischen Inhalten während der HTML-zu-PDF-Konvertierung umgehen?

Scrollst du immer noch?

Ihr Lizenzschlüssel wurde in Ihren Posteingang geliefert

Ihre Demo-Anfrage ist eingegangen.

Iron-Support-Team

Starten Sie jetzt Ihre kostenlose 30-Tage-Testphase

Auf dieser Seite

Wie man HTML-Elemente und Teilseitenabschnitte in PDF in C# konvertiert

Installieren Sie IronPDF mit NuGet Package Manager

Kopieren Sie diesen Codeausschnitt und führen Sie ihn aus.

Bereitstellen zum Testen in Ihrer Live-Umgebung

Minimal Workflow (3 Schritte)

Wie isoliert man Elemente mit JavaScript-DOM-Manipulation?

Wie isoliert man Elemente mit CSS-Injektion?

Milan Jovanovic

Brent Matzelle

David Jones

Wie extrahiert man HTML-Fragmente serverseitig?

Wie zielt man auf Elemente beim Rendern von Live-URLs ab?

Vergleich aller vier Ansätze

Wahl des richtigen Ansatzes

Nächste Schritte

Häufig gestellte Fragen

Was sind die Hauptansätze zur Konvertierung von HTML-Elementen zu PDF in C#?

Wie funktioniert die JS-Isolation im Kontext der HTML-zu-PDF-Konvertierung?

Was ist CSS-Verdeckung und wie wird sie in der PDF-Konvertierung verwendet?

Kann IronPDF spezifische HTML-Elemente serverseitig für die PDF-Erstellung extrahieren?

Was ist der Vorteil der Live-URL-Zielansteuerung bei der HTML-zu-PDF-Konvertierung?

Ist es möglich, nur einen Abschnitt einer Webseite in PDF zu konvertieren, indem IronPDF verwendet wird?

Wie kann IronPDF mit dynamischen Inhalten während der HTML-zu-PDF-Konvertierung umgehen?

Scrollst du immer noch?

Nächster Schritt: Kostenlosen 30-Tage-Test starten

Thank You

Nächster Schritt: Kostenlosen 30-Tage-Test starten

Möchten Sie IronSuite KOSTENLOS in einem Live-Projekt einsetzen?

DLL-Download

Ihr Lizenzschlüssel wurde in Ihren Posteingang geliefert

Ihre Demo-Anfrage ist eingegangen.

Von Millionen von Ingenieur*innen weltweit vertraut

Iron-Support-Team