1. .NET
  2. Nasıl Yapılır
  3. HTML Öğesi PDF'ye

HTML Öğeleri ve Kısmi Sayfa Bölümlerini C#'ta PDF'ye Dönüştürme

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

IronPDF, belirli HTML öğelerini hedeflemek için yerleşik bir SelectElement veya SelectCss yöntemi sunmaz. ChromePdfRenderer, tam HTML belgelerini (tam sayfa, tam URL, tam HTML dizesi) görüntüler. Bir sayfanın belirli bir bölümünden PDF üretmek için, bir JavaScript DOM manipülasyonu, CSS enjeksiyonu, sunucu-tarafı HTML parça çıkarma veya JS hedeflemeli URL oluşturma olmak üzere dört yaklaşımdan birini kullanarak hedef öğeyi oluşturma öncesinde izole ederiz.

Her yaklaşım farklı bir kısıtlama için uygundur. JavaScript DOM izolasyonu, yalnızca hedef dışındaki her şeyi çıkarmamız gerektiğinde URL'leri veya tam sayfaları oluştururken çalışır. CSS enjeksiyonu, DOM'u değiştirmeden istenmeyen içeriği gizler. Sunucu-tarafı çıkarma, ham HTML'ye erişim sağladığımızda en temiz sonucu verir. JS hedeflemeli URL oluşturma, kaynak HTML'nin mevcut olmadığı canlı panolar ve üçüncü taraf sayfalarla ilgilenir.

Tüm dört yaklaşımı test etmek için 30 günlük ücretsiz deneme başlatın.

Hızlı Başlangıç: Belirli Bir HTML Öğesini PDF Olarak Çıkarın

JavaScript DOM izolasyonu ve WaitFor kullanarak CSS seçiciyle herhangi bir öğeyi hedefleyin, ardından yalnızca o parçayı PDF/A'ya dönüştürün.

  1. IronPDF aşağıdaki NuGet Paket Yöneticisi ile yükleyin

    PM > Install-Package IronPdf

  2. Bu kod parçacığını kopyalayın ve çalıştırın.

    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. Canlı ortamınızda test için dağıtım yapın

    Ücretsiz deneme ile bugün projenizde IronPDF kullanmaya başlayın

    arrow pointer

Minimal İş Akışı (3 Adım)

  1. NuGet aracılığıyla IronPdf'yi yükleyin: Install-Package IronPdf
  2. Hedef öğeyi izole etmek için ChromePdfRenderOptions.JavaScript'yi ve öğenin varlığını sağlamak için WaitFor'yi yapılandırın
  3. RenderHtmlAsPdf() veya RenderUrlAsPdf()'yi arayın — PDF yalnızca izole edilmiş içeriği içerir

JavaScript DOM Manipülasyonu ile Öğeleri Nasıl İzole Ederim?

ChromePdfRenderOptions.JavaScript özelliği, HTML yüklendikten sonra ancak PDF görüntülenmeden önce çalıştırılan bir JavaScript dizesi kabul eder. document.body.innerHTML'yi hedef öğenin outerHTML'si ile değiştirerek, görüntülenen sayfadan geri kalan her şeyi kaldırıyoruz. Bu, en çok yönlü yaklaşımdır — hem RenderHtmlAsPdf() hem de RenderUrlAsPdf() ile çalışır.

WaitFor.HtmlQuerySelector() yöntemi, JavaScript çalıştırılmadan önce hedef öğenin DOM'da mevcut olmasını sağlar. Bu, asenkron içerikli sayfalar için kritiktir — react bileşenleri, angular şablonları veya başlangıç sayfa yüklemesinden sonra dolan API'ye dayalı veriler gibi.

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

JavaScript, tüm gövdeyi #invoice-summary div'in outerHTML ile değiştirir. Oluşan PDF yalnızca fatura tablosunu içerir — başlık, navigasyon veya alt bilgi yoktur. WaitFor.HtmlElementById() yöntemi, ID'ye göre hedefleme yaparken daha basit bir alternatif sunar:

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

Karmaşık seçiciler (sınıf adları, veri öznitelikleri, iç içe geçmiş öğeler) için, HtmlQuerySelector(), document.querySelector()'nin kabul edeceği herhangi bir geçerli CSS seçici dizesini kabul eder. Ek WaitFor kolaylık yöntemleri arasında HtmlElementByClassName(), HtmlElementByName() ve HtmlElementByTagName()'dır — her biri dahili olarak HtmlQuerySelector()'ye devreder, ancak kodda daha net bir amaç sağlar.

Hedef öğe, üst konteynerlerden miras alınan stillere bağlı olduğunda, outerHTML değiştirme işlemi, atalar seçicilerine dayanan CSS kurallarını kaybedebilir (ör. .dashboard .widget table { ... }). Bunları korumak için,içindeki ilgili

Still Scrolling Icon

Hâlâ Kaydırıyor Musunuz?

Hızlıca kanıt ister misiniz? PM > Install-Package IronPdf
bir örnek çalıştır HTML'nizi bir PDF'ye dönüştüğünü izleyin.