1. IronPDF
  2. Nasıl Yapılır
  3. HTML Elemanı PDF'ye

C# İle HTML Elemanlarını ve Sayfa Bölümlerini 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. Tam bir sayfa, tam bir URL, tam bir HTML metni — ChromePdfRenderer tam HTML belgeleri oluşturur. Bir sayfanın belirli bir bölümünden PDF üretmek için, hedef elemanı işlemeden önce dört yaklaşımdan biriyle izole ediyoruz: JavaScript DOM manipülasyonu, CSS enjeksiyonu, sunucu tarafında HTML parçasını ayıklama veya JS hedeflemeyle URL işleme.

Her yaklaşım farklı bir kısıtlama için uygundur. JavaScript DOM izolasyonu, yalnızca hedef dışında her şeyin çıkarılması gerektiğinde URL'leri veya tam sayfaları işlerken işe yarar. CSS enjeksiyonu, DOM'u değiştirmeden istenmeyen içeriği gizler. Sunucu tarafı ayıklama, ham HTML'ye eriştiğimizde en temiz sonucu sağlar. JS hedeflemeyle URL işleme, kaynak HTML'nin mevcut olmadığı canlı paneller ve üçüncü taraf sayfaları işler.

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

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

JavaScript DOM izolasyonu ve WaitFor kullanarak herhangi bir öğeyi CSS seçici ile hedefleyin, ardından yalnızca bu parçayı PDF'ye dönüştürün.

  1. NuGet Paket Yöneticisi ile https://www.nuget.org/packages/IronPdf yükleyin

    PM > Install-Package IronPdf

  2. Bu kod parçasını kopyalayıp ç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 etmek için dağıtın

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

    arrow pointer

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

  1. IronPDF'yi NuGet üzerinden kurun: Install-Package IronPdf
  2. Hedef öğeyi izole etmek için ChromePdfRenderOptions.JavaScript yapılandırın ve varlığını sağlamak için WaitFor kullanın.
  3. RenderHtmlAsPdf() veya RenderUrlAsPdf() çağırın — PDF yalnızca izole içeriği içerir.

JavaScript DOM Manipülasyonu ile Elemanlar Nasıl İzole Edilir?

ChromePdfRenderOptions.JavaScript özelliği, HTML yüklendikten sonra ancak PDF oluşturulmadan önce çalışan bir JavaScript metni kabul eder. Render edilen sayfadan başka her şeyi çıkarmak için hedef öğenin document.body.innerHTML'ını outerHTML ile değiştirmiş oluruz. Bu en esnek yaklaşımdır — hem RenderHtmlAsPdf() hem de RenderUrlAsPdf() ile çalışır.

WaitFor.HtmlQuerySelector() yöntemi, JavaScript çalışmadan önce DOM'da hedef öğenin var olduğunu garantiler. Bu, asenkron içeriğe sahip sayfalar için kritiktir — React bileşenleri, Angular şablonları veya ilk sayfa yüklemesinden sonra dolan API kaynaklı veriler.

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'u ile değiştirir. Ortaya çıkan PDF yalnızca fatura tablosunu içerir — başlık, gezinme yok, altbilgi yok. Kimlik ile hedefleme yaptığımızda, WaitFor.HtmlElementById() yöntemi 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()'un 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() bulunur — her biri dahili olarak HtmlQuerySelector() yönlendirir, ancak kodda daha net amaç sağlar.

Hedef öğe, üst konteynerlerden gelen miras alınmış stillere bağlı olduğunda, outerHTML değiştirme, üst seçicilere bağlı CSS kurallarını kaybedebilir (örneğin, .dashboard .widget table { ... } ). Bunları korumak için ilgili

Still Scrolling Icon

Hala Kaydiriyor musunuz?

Hızlı bir kanit mi istiyorsunuz? PM > Install-Package IronPdf
bir örnek çalıştır HTML'nizin PDF olduğunu izleyin.