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

Wie man HTML-Elemente und Teilseitenabschnitte in 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 stellt keine integrierte SelectElement- oder SelectCss-Methode zur Verfügung, um bestimmte HTML-Elemente anzusprechen. Der ChromePdfRenderer rendert vollständige HTML-Dokumente – eine ganze Seite, eine vollständige URL, eine vollständige HTML-Zeichenkette. 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

Wählen Sie ein beliebiges Element über einen CSS-Selektor mithilfe von JavaScript-DOM-Isolation und WaitFor aus und rendern Sie dann nur dieses Fragment als 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

Minimal Workflow (3 Schritte)

  1. Installieren Sie IronPdf über NuGet: Install-Package IronPdf
  2. Konfigurieren Sie ChromePdfRenderOptions.JavaScript, um das Zielelement zu isolieren, und WaitFor, um sicherzustellen, dass es vorhanden ist
  3. Rufen Sie RenderHtmlAsPdf() oder RenderUrlAsPdf() auf – das PDF enthält nur den isolierten Inhalt

Wie isoliert man Elemente mit JavaScript-DOM-Manipulation?

Die Eigenschaft ChromePdfRenderOptions.JavaScript akzeptiert eine JavaScript-Zeichenkette, die nach dem Laden des HTML-Codes, aber vor dem Rendern der PDF-Datei ausgeführt wird. Indem wir document.body.innerHTML durch das outerHTML des Zielelements ersetzen, entfernen wir alles andere aus der gerenderten Seite. Dies ist der vielseitigste Ansatz – er funktioniert sowohl mit RenderHtmlAsPdf() als auch mit RenderUrlAsPdf().

Die Methode WaitFor.HtmlQuerySelector() stellt sicher, dass das Zielelement im DOM vorhanden ist, bevor das 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.

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 das #invoice-summary des divs outerHTML. Das resultierende PDF enthält nur die Rechnungstabelle — kein Kopf, keine Navigation, kein Fuß. Die Methode WaitFor.HtmlElementById() bietet eine einfachere Alternative bei der Adressierung nach ID:

// 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

Bei komplexen Selektoren (Klassennamen, Datenattribute, verschachtelte Elemente) akzeptiert HtmlQuerySelector() jede gültige CSS-Selektorzeichenfolge, die document.querySelector() akzeptieren würde. Weitere WaitFor Hilfsmethoden sind HtmlElementByClassName(), HtmlElementByName() und HtmlElementByTagName() – jede delegiert intern an HtmlQuerySelector(), sorgt aber für eine klarere Absicht im Code.

Wenn das Zielelement von geerbten Stilen aus übergeordneten Containern abhängt, kann der outerHTML-Ersatz CSS-Regeln verlieren, die auf Vorfahren-Selektoren beruhen (z. B. .dashboard .widget table { ... }). Um diese zu erhalten, kopieren Sie die entsprechenden Tags

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.