1. IronPDF
  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 işler — tam bir sayfa, tam bir URL, tam bir HTML dizesi. 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çici ile herhangi bir öğeyi hedefleyin, ardından yalnızca bu parçayı PDF'ye 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 üzerinden IronPdf kurun: Install-Package IronPdf
  2. Hedef öğeyi izole etmek için ChromePdfRenderOptions.JavaScript ve varlığını sağlamak için WaitFor yapılandırın
  3. RenderHtmlAsPdf() veya RenderUrlAsPdf() çağırın — PDF sadece 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 işlenmeden önce çalıştırılan bir JavaScript dizesi kabul eder. Hedef öğenin outerHTML ile document.body.innerHTML değiştirerek, işlenmiş sayfadan geri kalan her şeyi çıkarıyoruz. Bu, en esnek 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 var 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.

: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

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 ile hedeflerken 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 öğeler) için, HtmlQuerySelector(), document.querySelector() tarafından kabul edilen herhangi bir geçerli CSS seçici dizisi kabul eder. Ek WaitFor kullanım kolaylığı yöntemleri arasında HtmlElementByClassName(), HtmlElementByName() ve HtmlElementByTagName() bulunur — her biri içsel olarak HtmlQuerySelector()'a delege edilir, ancak kodda daha net bir amaç sağlar.

Hedef öğe, üst kapsayıcıların miras alınan stillerine bağlı olduğunda, outerHTML değişimi, ata seçicilere bağlı CSS kurallarını kaybedebilir (örneğin, .dashboard .widget table { ... }). Bunları korumak için, 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.