1. IronPDF
  2. Anleitungen
  3. HTML-Element zu PDF

Wie man HTML-Elemente und Teilbereiche einer Seite zu PDF in C# konvertiert

Curtis Chau
Curtis Chau
Aktualisiert:
This article was translated from English: Does it need improvement?
Translated
View the article in English

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

Jeder Ansatz passt zu einer anderen Anforderung. JavaScript DOM-Isolation funktioniert, wenn URLs oder vollständige Seiten gerendert werden sollen und wir alles außer dem Ziel entfernen müssen. CSS-Injektion verbirgt unerwünschte Inhalte, ohne den DOM zu verändern. Die serverseitige Extraktion liefert das sauberste Ergebnis, wenn wir Zugriff auf das Roh-HTML haben. URL-Rendering mit JS-Targeting behandelt Live-Dashboards und Drittseiten, bei denen das Quell-HTML nicht verfügbar ist.

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

Schnellstart: Bestimmtes HTML-Element als PDF extrahieren und konvertieren

Zielen Sie mit CSS-Selektor auf ein beliebiges Element unter Nutzung von JavaScript DOM-Isolation und WaitFor, dann rendern Sie nur dieses Fragment zu PDF.

  1. Installieren Sie IronPDF mit NuGet Package Manager

    PM > Install-Package IronPdf

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

  3. Bereitstellen zum Testen in Ihrer Live-Umgebung

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

    arrow pointer

Minimaler Arbeitsablauf (3 Schritte)

  1. Installieren Sie IronPDF via NuGet: Install-Package IronPdf
  2. Konfigurieren Sie ChromePdfRenderOptions.JavaScript zur Isolierung des Ziel-Elements und WaitFor, um sicherzustellen, dass es existiert
  3. Rufen Sie RenderHtmlAsPdf() oder RenderUrlAsPdf() auf — das PDF enthält nur den isolierten Inhalt

Wie isoliert man Elemente mit JavaScript DOM-Manipulation?

Die ChromePdfRenderOptions.JavaScript Eigenschaft akzeptiert einen JavaScript-String, der nach dem Laden des HTMLs, aber vor dem PDF-Rendering ausgeführt wird. Indem wir document.body.innerHTML durch das outerHTML des Ziel-Elements 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 Ziel-Element im DOM existiert, bevor das JavaScript ausgeführt wird. Dies ist entscheidend für Seiten mit asynchronen Inhalten — React-Komponenten, Angular-Vorlagen oder API-gesteuerte Daten, die nach dem initialen Seitenladen eingefügt werden.

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");
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 Inhalt des outerHTML. Das resultierende PDF enthält nur die Rechnungstabelle — keinen Header, keine Navigation, keinen Footer. Die WaitFor.HtmlElementById() Methode bietet eine einfachere Alternative, wenn nach ID zielen:

// 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 auch document.querySelector() akzeptieren würde. Zusätzliche WaitFor Komfortmethoden sind HtmlElementByClassName(), HtmlElementByName() und HtmlElementByTagName() — jede delegiert intern an HtmlQuerySelector(), bietet jedoch klarere Absichten im Code.

Wenn das Ziel-Element auf geerbten Stilen von übergeordneten Containern beruht, kann das outerHTML-Ersatz die CSS-Regeln verlieren, die auf Vorfahren-Selektoren beruhen (z.B. .dashboard .widget table { ...). }). Um diese zu bewahren, kopieren Sie die relevanten <style> und <link> Tags aus dem <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 (Stylesheets, Schriftarten, Meta-Tags) bei, während nur der Body ersetzt wird. Das JavaScript zu PDF-Tutorial und das WaitFor-Tutorial decken 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. Statt das DOM zu manipulieren, verbergen wir alles außer dem Ziel-Element mit Hilfe von CSS display: none. Dies bewahrt die ursprüngliche DOM-Struktur und vermeidet die vollständige JavaScript-Ausführung.

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");
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
Imports System.IO

' 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 von HTML-Strukturen gerendert wird. Für URL-Rendering betten 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 Kontrolle über das Quell-HTML haben, bieten @media print Regeln die leichteste Alternative — keine externen Abhängigkeiten, keine Laufzeiteinführung:

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

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

renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print
$vbLabelText   $csharpLabel

Dies ist ideal für Druckszenarien von Formularabschnitten, wo die Anwendung bereits druckspezifische Layouts definiert. Versicherungsformulare, mehrstufige Assistenten und Einkaufszusammenfassungen verwenden häufig @media print Regeln, um Navigation und Fortschrittsanzeigen zu verbergen, während der relevante Inhaltsbereich auf die volle Breite erweitert wird.

Der CSS-Ansatz hat eine wichtige Einschränkung: Verborgene Elemente nehmen weiterhin im Dokumentfluss Platz ein, wenn display: none auf der falschen Spezifitätsebene verwendet wird. Verwenden Sie stets !important, um Framework-Stile (Bootstrap, Tailwind) zu überschreiben, die Elemente bei bestimmten Breakpoints möglicherweise wieder sichtbar machen. Für tief verschachtelte Ziele vermeidet ein genauerer Selektor ein ungewolltes Verbergen:

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

Wie extrahiert man HTML-Fragmente serverseitig?

Wenn wir Zugang zum Roh-HTML haben — wenn wir es aus einer Datei, einer Datenbank, einem CMS oder einer HTTP-Antwort lesen — ist der sauberste Ansatz, das Ziel-Element 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:

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

Das entscheidende Detail besteht darin, das extrahierte Fragment in ein komplettes HTML-Dokument mit den relevanten <style> oder <link> Tags zu umhüllen. Ohne diese Hülle werden Inline-Stile korrekt gerendert, aber externe Stylesheets und geerbte CSS-Regeln gehen verloren. Für die Rendering-Vorschau von E-Mail-Vorlagen — bei der das Vorlagen-HTML bereits als String gespeichert ist — liefert dieses Extraktionsmuster pixelgenaue Ergebnisse, da wir jede Facette des gerenderten Inhalts kontrollieren.

Dasselbe Muster funktioniert mit HtmlAgilityPack als Alternative zu AngleSharp.

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

Die Wahl zwischen AngleSharp und HtmlAgilityPack ist hauptsächlich eine Frage der Vorliebe. AngleSharp benutzt CSS-Selektoren (QuerySelector), die sich mit den Denkmustern von Frontend-Entwicklern decken. HtmlAgilityPack verwendet XPath (SelectSingleNode), das in XML-schweren .NET Codebasen vertrauter ist.

Für die Vorschaudarstellung von E-Mail-Vorlagen — bei der das Vorlagen-HTML als String in einer Datenbank oder CMS gespeichert ist — liefert die serverseitige Extraktion pixelgenaue Ergebnisse, da wir jede Facette des gerenderten Inhalts kontrollieren. Wir können auch RenderHtmlAsPdf(string Html, string BaseUrlOrPath) verwenden, wobei der zweite Parameter auf ein lokales Asset-Verzeichnis verweist, um sicherzustellen, dass Bilder und Stylesheets, die über relative Pfade referenziert werden, korrekt aufgelöst werden.

PdfDocument pdf = renderer.RenderHtmlAsPdf(fragmentHtml, @"C:\templates\assets\");
PdfDocument pdf = renderer.RenderHtmlAsPdf(fragmentHtml, @"C:\templates\assets\");
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(fragmentHtml, "C:\templates\assets\")
$vbLabelText   $csharpLabel

Der Nachteil gegenüber der JavaScript-DOM-Isolation besteht darin, dass eine serverseitige Extraktion keinen Inhalt verarbeiten kann, der eine clientseitige Darstellung erfordert (JavaScript-generierte Elemente, SPA-Komponenten, per API abgerufene Daten). Wenn das HTML <div id="app"></div> enthält, das eine React- oder Vue-Anwendung zur Laufzeit einfügt, wird das extrahierte Fragment leer sein. Für diese Fälle verwenden Sie Ansatz 1 oder 4.

Wie zielt man auf Elemente, wenn man Live-URLs rendert?

Für Live-URLs, bei denen wir keinen Zugriff auf das Quell-HTML haben — Dritt-Dashboards, 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 Diagramme und Tabellen auf einer Webseite, und wir müssen ein einzelnes Widget als PDF für die Verteilung an Stakeholder exportieren.

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");
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 garantiert, dass das Widget vor der JavaScript-Ausführung im DOM vorhanden ist. Der 15-Sekunden-Timeout ermöglicht langsamere API-Aufrufe, die Dashboarddaten laden. Das JavaScript entfernt dann alles bis auf das Widget von der Seite.

Für Seiten mit komplexen CSS-Abhängigkeiten bewahrt der appendChild-Ansatz (wenn der Knoten verschoben wird, anstelle seines outerHTML, mehr berechnete Stile, da das Element seine Position im CSSOM behält. Die innerHTML-Ersatzmethode aus Ansatz 1 ist einfacher, aber könnte Stilregeln verlieren, die von Vorfahren selektoren abhängen.

Wenn die Zielseite eine Authentifizierung erfordert, konfigurieren Sie Cookies am 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 abgeschlossen sind, mit null offenen Verbindungen — nützlich für Dashboards, die Daten von mehreren API-Endpunkten laden. NetworkIdle2() toleriert bis zu zwei offene Verbindungen, was Seiten mit beständigen WebSocket-Verbindungen oder Long-Polling-Datenverbindungen verarbeitet. JavaScript() wartet bis die Seite window.ironpdf.notifyRender() aufruft — die präziseste Option, wenn wir die Zielseite kontrollieren und die Render-Bereitschaft explizit signalisieren können, nachdem alle Daten geladen sind und Animationen abgeschlossen sind.

Für wiederkehrende Dashboard-Exporte (z.B. nächtliche PDF-Erstellung für die E-Mail-Verteilung an Stakeholder), umwickeln Sie das Rendering in eine Schleife, die Timeout-Ausnahmen abfängt. Wenn WaitFor sein maxWaitTime überschreitet, fährt IronPDF mit dem Rendering der verfügbaren Inhalte fort — die möglicherweise unvollständig sind. Eine Erhöhung des Timeouts oder der Wechsel zu NetworkIdle0() behebt normalerweise sporadische Ausfälle in langsamen Netzwerken.

Vergleich aller vier Ansätze

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

Richtigen Ansatz wählen

Die Entscheidung hängt von zwei Faktoren ab: ob wir Zugriff auf das Roh-HTML haben und ob die Zielinhalte JavaScript zum Rendern benötigen.

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

Dashboard-Widget-Export erfordert JavaScript-Ausführung, da der Widget-Inhalt durch API-Aufrufe nach dem initialen Seiten-Laden gefüllt wird. Ansatz 1 (JS-DOM-Isolation) behandelt dies, wenn das Dashboard lokal oder hinter Authentifizierung läuft. Ansatz 4 (URL-Rendering mit JS-Targeting) ist notwendig, wenn das Dashboard eine gehostete Drittanwendung ist, bei der wir nur die URL haben.

Formularabschnitt-Druck — das Extrahieren eines bestimmten Abschnitts eines mehrstufigen Formulars zur Benutzerüberprüfung oder Konformitätsarchivierung — 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.

Rendering von E-Mail-Vorlagen-Vorschauen — das Erstellen einer PDF-Vorschau einer HTML-E-Mail-Vorlage vor dem Versand — ist ein reines Ansatz 3-Szenario. 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 in 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 lässt den aufrufenden Code den geeigneten Ansatz basierend auf dem Eingabetyp auswählen, ohne die Renderer-Konfiguration zu duplizieren.

Nächste Schritte

Die HTML-Element-Isolation in IronPDF ist ein Rendering-Zeitpunkt-Anliegen, kein eingebautes API-Feature. Die obigen vier Ansätze decken das gesamte Spektrum ab — von der serverseitigen Vorlagen-Extraktion (null JS, sauberster Output) bis hin zu Live-URL-Targeting (volle JS-Ausführung, behandelt SPAs und asynchrone Inhalte). Die Vergleichstabelle bietet einen schnellen Überblick, und die realen Anwendungsfälle ordnen gängige Geschäftsanforderungen der passenden Strategie zu.

Einige zusätzliche Überlegungen für Produktionseinführungen:

Performance: Serverseitige Extraktion (Ansatz 3) ist der schnellste, da die vollständige JavaScript-Ausführung entfällt. JavaScript-basierte Ansätze (1 und 4) fügen im Verhältnis zur Seitenkomplexität und dem WaitFor-Timeout Überhead hinzu. Für die Stapelverarbeitung (z.B. das Generieren von 500 Rechnungspdfs) liefert die serverseitige Extraktion mit Parallel.ForEach und mehreren ChromePdfRenderer Instanzen den besten Durchsatz.

Fehlerbehebung: Wenn das PDF leer oder unvollständig ist, aktivieren Sie EnableJavaScript = true und erhöhen Sie den WaitFor-Timeout. Wenn das Ziel-Element auf asynchrone Daten angewiesen ist, ist WaitFor.NetworkIdle0() zuverlässiger als ein fester RenderDelay. Der Leitfaden zu den Rendering-Optionen deckt Viewport-Breite und Papieranpassungskonfigurationen ab, die das Layout beeinflussen.

Kombinieren von Ansätzen: Nichts verhindert, dass Strategien kombiniert werden. Wir können serverseitige Extraktion verwenden, um ein zusammengesetztes HTML-Dokument aus mehreren Fragmenten zu erstellen (Header aus einer Quelle, Datentabelle aus einer anderen, SVG-Diagramm aus einer dritten), und dann das zusammengesetzte Dokument als einzelnes PDF rendern. Die RenderHtmlAsPdf(string Html, string BaseUrlOrPath) Methode löst relative Asset-Pfade von der Basis-URL auf, was es einfach macht, Dokumente aus heterogenen Quellen zusammenzusetzen.

Erkunden Sie das JavaScript zu PDF How-to für fortgeschrittene JS-Ausführungsmuster, die WaitFor-Dokumentation für alle verfügbaren Warte-Strategien, der Guide zu den Rendering-Optionen zur kompletten ChromePdfRenderOptions-Oberfläche, und das Beispiel für benutzerdefinierten JavaScript-Code für fertig ausführbare Snippets.

Sehen Sie sich Lizenzoptionen an ab $749. Die ChromePdfRenderOptions API-Referenz und WaitFor API-Referenz dokumentiert jede Eigenschaft und Methode.

Häufig gestellte Fragen

Welche Hauptansätze gibt es zur Konvertierung von HTML-Elementen zu PDF in C#?

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

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

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

Was ist CSS-Ausblenden und wie wird es bei der PDF-Konvertierung verwendet?

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

Kann IronPDF bestimmte HTML-Elemente serverseitig für die PDF-Erzeugung 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-Zielvorgabe bei der HTML-zu-PDF-Konvertierung?

Die Live-URL-Zielvorgabe ermöglicht es, dass IronPDF Elemente einer Live-Webseiten-URL direkt in PDF konvertiert, was sicherstellt, dass der aktuellste Inhalt erfasst wird, ohne dass lokale HTML-Dateien benötigt werden.

Ist es möglich, nur eine Sektion einer Webseite mit IronPDF in PDF zu konvertieren?

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

Wie kann IronPDF dynamische Inhalte während der HTML-zu-PDF-Konvertierung verarbeiten?

IronPDF kann dynamische Inhalte durch Ausführung von JavaScript während der Konvertierung rendern, wodurch sichergestellt wird, dass Elemente, die auf Client-seitige Skripte angewiesen sind, im PDF genau wiedergegeben werden.

Curtis Chau
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 ...

Weiterlesen
Bereit anzufangen?
Nuget Downloads 18,332,619 | Version: 2026.4 gerade veröffentlicht
Still Scrolling Icon

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.