# HTML Öğeleri ve Kısmi Sayfa Bölümlerini C#'ta PDF'ye Dönüştürme
[IronPDF](https://ironpdf.com), belirli HTML öğelerini hedeflemek için yerleşik bir `SelectElement` veya `SelectCss` yöntemi sunmaz. [`ChromePdfRenderer`](https://ironpdf.com/object-reference/api/IronPdf.ChromePdfRenderer.html), 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](https://ironpdf.com/#trial-license) başlatın.
*as-heading:2(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.
```cs
:title=Extract a Specific HTML Element as PDF!
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");
```
### Minimal İş Akışı (3 Adım)
1. NuGet üzerinden `IronPdf` kurun: `Install-Package IronPdf`
2. Hedef öğeyi izole etmek için [`ChromePdfRenderOptions.JavaScript`](https://ironpdf.com/examples/execute-custom-javascript/) ve varlığını sağlamak için [`WaitFor`](https://ironpdf.com/how-to/waitfor/) yapılandırın
3. [`RenderHtmlAsPdf()`](https://ironpdf.com/object-reference/api/IronPdf.ChromePdfRenderer.html) veya [`RenderUrlAsPdf()`](https://ironpdf.com/object-reference/api/IronPdf.ChromePdfRenderer.html) çağırın - PDF sadece izole edilmiş içeriği içerir
## JavaScript DOM Manipülasyonu ile Öğeleri Nasıl İzole Ederim?
[`ChromePdfRenderOptions.JavaScript`](https://ironpdf.com/object-reference/api/IronPdf.ChromePdfRenderOptions.html) ö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()`](https://ironpdf.com/object-reference/api/IronPdf.Engines.Chrome.WaitFor.html) 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.
```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");
```
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()`](https://ironpdf.com/object-reference/api/IronPdf.Engines.Chrome.WaitFor.html) yöntemi, ID ile hedeflerken daha basit bir alternatif sunar:
```cs
// Alternative: wait by ID directly
renderer.RenderingOptions.WaitFor.HtmlElementById("invoice-summary", 10000);
```
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 `<style>` ve `<link />` etiketlerini `<head>`'dan JS izolasyonuna kopyalayın:
```cs
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;
}
";
```
Bu, orijinal `<head>` içeriğini (stil sayfaları, yazı tipleri, meta etiketler) korur ve yalnızca gövdeyi değiştirir. [JavaScript to PDF nasıl yapılır](https://ironpdf.com/how-to/javascript-to-pdf/) ve [WaitFor nasıl yapılır](https://ironpdf.com/how-to/waitfor/), birden fazla asenkron veri kaynağına sahip sayfalar için `NetworkIdle0()` dahil ek yapılandırma seçeneklerini kapsar.
## CSS Enjeksiyonu ile Öğeleri Nasıl İzole Ederim?
[`ChromePdfRenderOptions.CustomCssUrl`](https://ironpdf.com/object-reference/api/IronPdf.ChromePdfRenderOptions.html) özelliği, IronPDF'nin işleme başlamadan önce uyguladığı bir stil sayfasına giden dosya yolu veya URL kabul eder. DOM'u manipüle etmek yerine, CSS `display: none` kullanarak hedef öğe dışındaki her şeyi gizleriz. Bu, orijinal DOM yapısını korur ve JavaScript yürütmeyi tamamen önler.
```cs
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");
```
**Not:** `CustomCssUrl` özelliği, yalnızca HTML dizelerinden işlerken `RenderHtmlAsPdf()` ile çalışır. URL işleme için, CSS enjeksiyonunu [`JavaScript`](https://ironpdf.com/examples/execute-custom-javascript/) özelliğine yerleştirin:
```cs
renderer.RenderingOptions.JavaScript = @"
var style = document.createElement('style');
style.textContent = 'body > *:not(#invoice-summary) { display: none !important; }';
document.head.appendChild(style);
";
```
Kaynak HTML'yi kontrol ettiğimizde, `@media print` kuralları, hiçbir harici bağımlılık olmadan, çalışma zamanında enjeksiyon olmadan en hafif alternatifi sunar:
```css
@media print {
header, nav, footer, .sidebar { display: none !important; }
#invoice-summary { width: 100%; margin: 0; }
}
```
[`CssMediaType`](https://ironpdf.com/how-to/rendering-options/) ayarını `PdfCssMediaType.Print` olarak ayarlayın, böylece bu kuralları kullanın:
```cs
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;
```
Bu, uygulamanın zaten `@media print` kurallarını tanımladığı form bölümü yazdırma senaryoları veya form HTML'sinin sunucu tarafında birleştirildiği Yaklaşım 3 için idealdir.
CSS yaklaşımının önemli bir sınırlaması vardır: gizli öğeler, `display: none` yanlış bir özgüllük seviyesinde kullanılırsa belge akışında hala yer kaplar. Belirli kırılma noktalarında öğeleri yeniden görüntüleyebilen framework stillerini (Bootstrap, Tailwind) geçersiz kılmak için her zaman `!important` kullanın. Derinlemesine yuvalanmış hedefler için, daha hassas bir seçici yan etkili gizlemeyi önler:
```css
body > *:not(#target),
body > *:not(#target) ~ * {
display: none !important;
}
```
## HTML Parçalarını Sunucu Tarafında Nasıl Çıkarırım?
Ham HTML'ye erişimimiz olduğunda - bir dosyadan, bir veritabanından, bir CMS'den veya bir HTTP yanıtından okuyarak - en temiz yaklaşım hedef öğeyi sunucu tarafında bir HTML ayrıştırıcı kullanarak çıkarmak ve ardından parçayı `RenderHtmlAsPdf()`'e iletmektir. Hiç JavaScript, hiç CSS enjeksiyonu, hiç çalışma zamanı DOM manipülasyonu yok.
[AngleSharp](https://anglesharp.github.io/), bu desen için standart .NET HTML ayrıştırıcısıdır:
```cs
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");
```
Anahtar detay, çıkarılan parçayı ilgili `<style>` veya `<link>` etiketlerine sahip tam bir HTML belgesine sarılmasıdır. Bu sarıcı olmadan, inline stiller doğru şekilde oluşturulsa da, dış stil sayfaları ve devralınan CSS kuralları kaybolur. Posta şablonu önizleme oluşturma - şablon HTML'si zaten bir dize olarak depolandığı yer - bu çıkarma deseni, oluşturulan içeriğin her yönünü kontrol ettiğimiz için piksel-mükemmel sonuçlar verir.
Aynı desen bir alternatif ayrıştırıcı olarak HtmlAgilityPack ile çalışır:
```cs
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");
```
```cs
PdfDocument pdf = renderer.RenderHtmlAsPdf(fragmentHtml, @"C:\templates\assets\");
```
AngleSharp ile HtmlAgilityPack arasındaki seçim çoğunlukla bir tercihtir. AngleSharp, ön uç geliştiriciler için uygun olan CSS seçicilerini (`QuerySelector`) kullanır. HtmlAgilityPack, XML ağırlıklı .NET kod tabanlarında daha tanıdık olan XPath'i (`SelectSingleNode`) kullanır.
Email şablon önizleme işleme - gönderimden önce bir HTML email şablonunun PDF önizlemesini oluşturmak - tamamen Yaklaşım 3 senaryosudur. Şablon HTML bir saklanan dizgi, dış kaynaklar (görseller, yazı tipleri) bilinen URL'lerde barındırılıyor ve `RenderHtmlAsPdf(string Html, string BaseUrlOrPath)` parametresi `RenderHtmlAsPdf()` üzerindeki tüm göreli yolları çözer.
HTML, bir React veya Vue uygulamasının çalışma zamanında doldurduğu `<div id="app"></div>` içerdiğinde, çıkarılan parça boş olur. Bu durumlar için Yaklaşım 1 veya 4'ü kullanın.
## Canlı URL'leri Oluştururken Öğeleri Nasıl Hedeflerim?
Kaynak HTML'ye erişemediğimiz canlı URL'ler için - üçüncü taraf paneller, dış raporlar, barındırılan uygulamalar - [`RenderUrlAsPdf()`](https://ironpdf.com/object-reference/api/IronPdf.ChromePdfRenderer.html) ile `JavaScript` özelliği ve `WaitFor`'i sayfa yüklendikten sonra belirli bir bölümü izole etmek için birleştiririz.
Bu, gösterge tablosu widget çıkartma senaryosudur: Yerleştirilmiş bir BI aracı tabloları ve grafiklerini bir web sayfasında oluşturur ve bir widget'ı PDF olarak dışlama ihtiyacı duyarız.
```cs
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");
```
`WaitFor.HtmlQuerySelector()` çağrısı, JavaScript çalıştırılmadan önce widget'ın DOM'da var olduğunu garanti eder. 15 saniyelik zaman aşımı, gösterge tablosu verilerini dolduran yavaş API çağrılarına izin verir. JavaScript, ardından sayfayı yalnızca widget olarak sıyırır.
Karmaşık CSS bağımlılıkları olan sayfalar için, `appendChild` yaklaşımı (düğümü taşımak, kopyalamak yerine `outerHTML` yerini) daha fazla hesaplanmış stili korur çünkü öğe CSSOM'daki konumunu korur. Yaklaşım 1'den `innerHTML` değişim yaklaşımı daha basittir, ancak ata seçicilere bağlı stilleri kaybedebilir.
Hedef sayfa kimlik doğrulaması gerektirdiğinde, `RenderUrlAsPdf()` çağrılmadan önce çerezleri render cihazında yapılandırın:
```cs
renderer.RenderingOptions.CustomCookies = new Dictionary<string, string>
{
{ "session_id", "abc123" },
{ "auth_token", "bearer-xyz" }
};
```
[`WaitFor`](https://ironpdf.com/how-to/waitfor/) sınıfı, `HtmlQuerySelector()` dışında ek bekleme stratejileri sunar. `NetworkIdle0()`, tüm ağ istekleri sıfır bekleyen bağlantı ile tamamlanana kadar bekler - birden fazla API uç noktasından veri yükleyen paneller için kullanışlıdır. `NetworkIdle2()`, sayfalarla kalıcı WebSocket bağlantıları veya uzun anket işlemlerine sahip olan sayfaları ele alan iki bekleyen bağlantıya kadar tolerans sağlar. `JavaScript()`, sayfanın `window.ironpdf.notifyRender()` çağırmasını bekler - tüm veriler ve animasyonlar yüklendikten sonra açıkça render-hazırlığını sinyalleyerek hedef sayfayı kontrol ettiğimizde en doğru seçenek.
Tekrarlayan gösterge tablosu dışa aktarmaları için (örneğin, PDF üretimi için gecelik hisse sahibi posta dağıtımı), zaman aşımı istisnalarını yakalayan bir döngü içinde oluşturmayı sarın. `WaitFor`, `maxWaitTime` sınırını aşarsa, IronPDF mevcut olan içeriği render etmeye devam eder - ki bu eksik olabilir. Zaman aşımını artırmak veya `NetworkIdle0()` geçiş yapmak, genellikle daha yavaş ağlarda aralıklı hataları çözer.
## Yukarıdaki Dört Yaklaşım Karşılaştırması
| Yaklaşım | En İyi Kullanım Alanı |Kaynak HTML Gerekir|JS Bağımlılığı| Karmaşıklık |
|---|---|---|---|---|
|**JavaScript DOM İzolasyonu**|Herhangi bir kaynaktan genel maksatlı öğe çıkartma|Hayır|Evet|Orta |
|**CSS Enjeksiyonu**|DOM değişiklikleri olmadan bölümleri gizleme; `@media print` düzenleri|Parçalı (CustomCssUrl'in `RenderHtmlAsPdf` ihtiyacı var)|Hayır (URL'ler için JS ile enjeksiyon yapılmadıkça)|Düşük|
|**Sunucu-Tarafı Parça Çıkarma**|CMS içeriği, saklanan şablonlar, e-posta önizlemeleri|Evet|Hayır|Düşük–Orta|
|**JS Hedeflemeli URL Oluşturma**|Canlı panolar, üçüncü taraf sayfaları, SPA widget'ları|Hayır|Evet|Orta–Yüksek|
### Doğru Yaklaşımı Seçmek
Karar, iki faktöre bağlıdır: ham HTML'ye erişimimiz olup olmadığı ve hedef içeriğin oluşturulmak için JavaScript gerektirip gerektirmediği.
`Invoice` satır öğesi çıkarmak en yaygın kullanımdır. Fatura HTML'si sunucu-tarafında (Razor görünümleri, Handlebars şablonları, saklı HTML dizeleri) oluşturulduğunda, Yaklaşım 3 (sunucu-tarafı çıkarma), sıfır çalışma zamanı ek yük ile en temiz sonucu verir. `#line-items` tablosunu çıkarın, stilize edilmiş bir HTML kabuğuna sarın ve render edin.
`Dashboard` widget ihracı, widget içeriği ilk sayfa yüklendikten sonra API çağrıları ile doldurulduğu için JavaScript çalıştırmasını gerektirir. Yaklaşım 1 (JS DOM izolasyonu), gösterge tablosu yerel veya kimlik doğrulama arkasında çalıştığında bunu ele alır. Yaklaşım 4 (JS Hedeflemeli URL Oluşturma), yalnızca URL'ye sahip olduğumuz üçüncü taraf bir barındırma uygulaması olduğunda gereklidir.
`Form` bölüm yazdırma - kullanıcı incelemesi veya uyumluluk arşivi için çok aşamalı bir formun belirli bir bölümünü çıkarma - uygulamanın zaten `@media print` kurallarını tanımladığı zaman Yaklaşım 2 (CSS enjeksiyonu) ile veya form HTML'sinin sunucu tarafında birleştirildiği zaman Yaklaşım 3 ile doğal olarak eşleşir.
`Email` şablon önizleme işleme - göndermeden önce bir HTML e-posta şablonunun PDF önizlemesini oluşturma - saf bir Yaklaşım 3 senaryosudur. Şablon HTML bir saklanan dizgi, dış kaynaklar (görseller, yazı tipleri) bilinen URL'lerde barındırılıyor ve `BaseUrlOrPath` parametresi `RenderHtmlAsPdf()` üzerindeki tüm göreli yolları çözer.
Birden fazla senaryoyu desteklemesi gereken uygulamalar için, bir strateji parametresini kabul eden bir hizmet arayüzü arkasında oluşturma mantığını kapsülleyin:
```cs
public enum ElementExtractionStrategy
{
JavaScriptIsolation,
CssInjection,
ServerSideExtraction,
UrlWithJsTargeting
}
```
Bu, çağıran kodun, render yapılandırmasını yinelenmeden girdi türüne bağlı olarak uygun yaklaşımı seçmesine olanak tanır.
## Sonraki Adımlar
IronPDF'te HTML öğesi izolasyonu, bir oluşturma zamanı endişesidir, yerleşik bir API özelliği değildir. Yukarıdaki dört yaklaşım, sunucu-tarafı şablon çıkarma (sıfır JS, en temiz çıktı) ile canlı URL hedefleme (tam JS yürütme, SPAs ve asenkron içeriklerle başa çıkar) arasında tam spektrumu kapsar. Karşılaştırma tablosu, hızlı bir referans sağlar ve gerçek dünya senaryoları, uygun stratejiye ortak iş gereksinimlerini haritalar.
Üretim dağıtımları için birkaç ek düşünce:
**Performans**: Sunucu-tarafı çıkarma (Yaklaşım 3), tamamen JavaScript çalıştırmayı atladığı için en hızlı olanıdır. JavaScript tabanlı yaklaşımlar (1 ve 4), sayfa karmaşıklığı ve `WaitFor` zaman aşımına orantılı bir ek maliyet getirir. Toplu işlemler için (örneğin, 500 fatura PDF'si oluşturma), server tarafı çıkarması ile `Parallel.ForEach` ve birden çok `ChromePdfRenderer` örneği en iyi verimi sağlar.
**Hata Ayıklama**: PDF çıktısı boş veya içerik eksik olduğunda, `EnableJavaScript = true` etkinleştirin ve `WaitFor` zaman aşımını artırın. Hedef öğe asenkron veriye bağlıysa, `WaitFor.NetworkIdle0()`, sabit bir `RenderDelay`'dan daha güvenilirdir. [rendering options rehberi](https://ironpdf.com/how-to/rendering-options/), düzeni etkileyen görüntü genişliği ve kağıt sığdırma yapılandırmalarını kapsar.
**Yaklaşım Karıştırma**: Stratejileri karıştırmayı hiçbir şey engellemez. Birden fazla parçadan (tek kaynaktan başlık, başka bir kaynaktan veri tablosu, üçüncüsünden grafik SVG) bir bileşik HTML belgesi oluşturmak için sunucu-tarafı çıkarmayı kullanabilir, ardından oluşturulan belgeyi tek bir PDF olarak oluşturabiliriz. [`RenderHtmlAsPdf(string Html, string BaseUrlOrPath)`](https://ironpdf.com/object-reference/api/IronPdf.ChromePdfRenderer.html) yöntemi, göreli varlık yollarını temel URL'den çözer, bu da heterojen kaynaklardan belgeleri oluşturmayı kolaylaştırır.
[JavaScript to PDF nasıl yapılır](https://ironpdf.com/how-to/javascript-to-pdf/) kılavuzunda gelişmiş JS yürütme modellerini, [WaitFor belgelemesi](https://ironpdf.com/how-to/waitfor/)nde tüm mevcut bekleme stratejilerini, [işleme seçenekleri kılavuzu](https://ironpdf.com/how-to/rendering-options/)nda tam `ChromePdfRenderOptions` yüzeyini ve [özel JavaScript kodu örneği](https://ironpdf.com/examples/execute-custom-javascript/)nde çalıştırılmaya hazır kod parçacıklarını keşfedin.
[Lisanslama seçeneklerini görüntüleyin](https://ironpdf.com/licensing/) `$liteLicense` ile başlayarak. [`ChromePdfRenderOptions` API referansı](https://ironpdf.com/object-reference/api/IronPdf.ChromePdfRenderOptions.html) ve [`WaitFor` API referansı](https://ironpdf.com/object-reference/api/IronPdf.Engines.Chrome.WaitFor.html), her özelliği ve yöntemi belgeler.
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.
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.
1Install IronPDF with NuGet Package Manager
PM > Install-Package IronPdf
Install-Package IronPdf
2Bu 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");
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");
ImportsIronPdfDim renderer = New ChromePdfRenderer()renderer.RenderingOptions.EnableJavaScript = Truerenderer.RenderingOptions.JavaScript = " var target = document.querySelector('#invoice-summary'); document.body.innerHTML = target.outerHTML;"renderer.RenderingOptions.WaitFor.HtmlQuerySelector("#invoice-summary", 10000)Dim pdf = renderer.RenderHtmlAsPdf(fullPageHtml)pdf.SaveAs("invoice-summary.pdf")
Imports IronPdf
Dim 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)
Dim pdf = renderer.RenderHtmlAsPdf(fullPageHtml)
pdf.SaveAs("invoice-summary.pdf")
3Canlı ortamınızda test için dağıtım yapın
Ücretsiz deneme ile bugün projenizde IronPDF kullanmaya başlayın
Minimal İş Akışı (3 Adım)
NuGet üzerinden IronPdf kurun: Install-Package IronPdf
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.
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 elementrenderer.RenderingOptions.Javascript = @" var el = document.querySelector('#invoice-summary'); if (el) { document.body.innerHTML = el.outerHTML; }";// Wait for the target element to exist before JS executesrenderer.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");
ImportsIronPdfDim fullPageHtml AsString = "<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 elementrenderer.RenderingOptions.Javascript = " var el = document.querySelector('#invoice-summary'); if (el) { document.body.innerHTML = el.outerHTML; }"' Wait for the target element to exist before JS executesrenderer.RenderingOptions.WaitFor.HtmlQuerySelector("#invoice-summary", 10000)Dim pdf AsPdfDocument = 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")
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 directlyrenderer.RenderingOptions.WaitFor.HtmlElementById("invoice-summary", 10000);
// Alternative: wait by ID directly
renderer.RenderingOptions.WaitFor.HtmlElementById("invoice-summary", 10000);
' Alternative: wait by ID directlyrenderer.RenderingOptions.WaitFor.HtmlElementById("invoice-summary", 10000)
' Alternative: wait by ID directly
renderer.RenderingOptions.WaitFor.HtmlElementById("invoice-summary", 10000)
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 <style> ve <link /> etiketlerini <head>'dan JS izolasyonuna kopyalayın:
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; }"
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;
}
"
Bu, orijinal <head> içeriğini (stil sayfaları, yazı tipleri, meta etiketler) korur ve yalnızca gövdeyi değiştirir. JavaScript to PDF nasıl yapılır ve WaitFor nasıl yapılır, birden fazla asenkron veri kaynağına sahip sayfalar için NetworkIdle0() dahil ek yapılandırma seçeneklerini kapsar.
CSS Enjeksiyonu ile Öğeleri Nasıl İzole Ederim?
ChromePdfRenderOptions.CustomCssUrl özelliği, IronPDF'nin işleme başlamadan önce uyguladığı bir stil sayfasına giden dosya yolu veya URL kabul eder. DOM'u manipüle etmek yerine, CSS display: none kullanarak hedef öğe dışındaki her şeyi gizleriz. Bu, orijinal DOM yapısını korur ve JavaScript yürütmeyi tamamen önler.
using IronPdf;// Create a CSS file that hides everything except #invoice-summarystring 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");
ImportsIronPdfImportsSystem.IO' Create a CSS file that hides everything except #invoice-summaryDim cssContent AsString = "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 AsPdfDocument = 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")
Not:CustomCssUrl özelliği, yalnızca HTML dizelerinden işlerken RenderHtmlAsPdf() ile çalışır. URL işleme için, CSS enjeksiyonunu JavaScript özelliğine yerleştirin:
Kaynak HTML'yi kontrol ettiğimizde, @media print kuralları, hiçbir harici bağımlılık olmadan, çalışma zamanında enjeksiyon olmadan en hafif alternatifi sunar:
Bu, uygulamanın zaten @media print kurallarını tanımladığı form bölümü yazdırma senaryoları veya form HTML'sinin sunucu tarafında birleştirildiği Yaklaşım 3 için idealdir.
CSS yaklaşımının önemli bir sınırlaması vardır: gizli öğeler, display: none yanlış bir özgüllük seviyesinde kullanılırsa belge akışında hala yer kaplar. Belirli kırılma noktalarında öğeleri yeniden görüntüleyebilen framework stillerini (Bootstrap, Tailwind) geçersiz kılmak için her zaman !important kullanın. Derinlemesine yuvalanmış hedefler için, daha hassas bir seçici yan etkili gizlemeyi önler:
body > *:not(#target),
body > *:not(#target) ~ * {
display: none !important;
}
Text
HTML Parçalarını Sunucu Tarafında Nasıl Çıkarırım?
Ham HTML'ye erişimimiz olduğunda - bir dosyadan, bir veritabanından, bir CMS'den veya bir HTTP yanıtından okuyarak - en temiz yaklaşım hedef öğeyi sunucu tarafında bir HTML ayrıştırıcı kullanarak çıkarmak ve ardından parçayı RenderHtmlAsPdf()'e iletmektir. Hiç JavaScript, hiç CSS enjeksiyonu, hiç çalışma zamanı DOM manipülasyonu yok.
AngleSharp, bu desen için standart .NET HTML ayrıştırıcısıdır:
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 elementvar 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 stylesstring 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");
ImportsIronPdfImportsAngleSharpImportsAngleSharp.Html.ParserDim fullPageHtml AsString = "<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 elementDim parser As New HtmlParser()Dim document = parser.ParseDocument(fullPageHtml)Dim targetElement = document.QuerySelector("#revenue-widget")If targetElement Is Nothing ThenConsole.WriteLine("Target element not found.") ReturnEnd If' Wrap the fragment in a minimal HTML document to preserve stylesDim fragmentHtml AsString = $"<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 AsPdfDocument = 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")
Anahtar detay, çıkarılan parçayı ilgili <style> veya <link> etiketlerine sahip tam bir HTML belgesine sarılmasıdır. Bu sarıcı olmadan, inline stiller doğru şekilde oluşturulsa da, dış stil sayfaları ve devralınan CSS kuralları kaybolur. Posta şablonu önizleme oluşturma - şablon HTML'si zaten bir dize olarak depolandığı yer - bu çıkarma deseni, oluşturulan içeriğin her yönünü kontrol ettiğimiz için piksel-mükemmel sonuçlar verir.
Aynı desen bir alternatif ayrıştırıcı olarak HtmlAgilityPack ile çalışır:
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");
ImportsHtmlAgilityPackImportsIronPdfDim htmlDoc As New HtmlDocument()htmlDoc.LoadHtml(fullPageHtml)Dim targetNode = htmlDoc.DocumentNode.SelectSingleNode("//*[@id='revenue-widget']")If targetNode Is Nothing ThenConsole.WriteLine("Target element not found.") ReturnEnd IfDim fragmentHtml AsString = $"<html><body>{targetNode.OuterHtml}</body></html>"Dim renderer As New ChromePdfRenderer()Dim pdf AsPdfDocument = 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")
PdfDocument pdf = renderer.RenderHtmlAsPdf(fragmentHtml, @"C:\templates\assets\");
PdfDocument pdf = renderer.RenderHtmlAsPdf(fragmentHtml, @"C:\templates\assets\");
Dim pdf AsPdfDocument = renderer.RenderHtmlAsPdf(fragmentHtml, "C:\templates\assets\")
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(fragmentHtml, "C:\templates\assets\")
AngleSharp ile HtmlAgilityPack arasındaki seçim çoğunlukla bir tercihtir. AngleSharp, ön uç geliştiriciler için uygun olan CSS seçicilerini (QuerySelector) kullanır. HtmlAgilityPack, XML ağırlıklı .NET kod tabanlarında daha tanıdık olan XPath'i (SelectSingleNode) kullanır.
Email şablon önizleme işleme - gönderimden önce bir HTML email şablonunun PDF önizlemesini oluşturmak - tamamen Yaklaşım 3 senaryosudur. Şablon HTML bir saklanan dizgi, dış kaynaklar (görseller, yazı tipleri) bilinen URL'lerde barındırılıyor ve RenderHtmlAsPdf(string Html, string BaseUrlOrPath) parametresi RenderHtmlAsPdf() üzerindeki tüm göreli yolları çözer.
HTML, bir React veya Vue uygulamasının çalışma zamanında doldurduğu <div id="app"></div> içerdiğinde, çıkarılan parça boş olur. Bu durumlar için Yaklaşım 1 veya 4'ü kullanın.
Bu türden favori kütüphanem IronPDF'dir. PDF dosyalarının hızlı ve verimli bir şekilde işlenmesine olanak tanır. Ayrıca, PDF/A formatına dışa aktarma ve dijital imzalama gibi birçok değerli özelliğe sahiptir.
IronOCR, manuel işleme maliyetinden yıllık 40.000 USD tasarruf etmemizi sağlıyor, üretkenliği artırıyor ve yüksek etkili görevler için kaynakları serbest bırakıyor. Kesinlikle tavsiye ederim.
Canlı URL'leri Oluştururken Öğeleri Nasıl Hedeflerim?
Kaynak HTML'ye erişemediğimiz canlı URL'ler için - üçüncü taraf paneller, dış raporlar, barındırılan uygulamalar - RenderUrlAsPdf() ile JavaScript özelliği ve WaitFor'i sayfa yüklendikten sonra belirli bir bölümü izole etmek için birleştiririz.
Bu, gösterge tablosu widget çıkartma senaryosudur: Yerleştirilmiş bir BI aracı tabloları ve grafiklerini bir web sayfasında oluşturur ve bir widget'ı PDF olarak dışlama ihtiyacı duyarız.
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 rendersrenderer.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");
ImportsIronPdfDim 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 rendersrenderer.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 AsPdfDocument = 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")
WaitFor.HtmlQuerySelector() çağrısı, JavaScript çalıştırılmadan önce widget'ın DOM'da var olduğunu garanti eder. 15 saniyelik zaman aşımı, gösterge tablosu verilerini dolduran yavaş API çağrılarına izin verir. JavaScript, ardından sayfayı yalnızca widget olarak sıyırır.
Karmaşık CSS bağımlılıkları olan sayfalar için, appendChild yaklaşımı (düğümü taşımak, kopyalamak yerine outerHTML yerini) daha fazla hesaplanmış stili korur çünkü öğe CSSOM'daki konumunu korur. Yaklaşım 1'den innerHTML değişim yaklaşımı daha basittir, ancak ata seçicilere bağlı stilleri kaybedebilir.
Hedef sayfa kimlik doğrulaması gerektirdiğinde, RenderUrlAsPdf() çağrılmadan önce çerezleri render cihazında yapılandırın:
ImportsSystem.Collections.Genericrenderer.RenderingOptions.CustomCookies = New Dictionary(OfString, String) From { {"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"}
}
WaitFor sınıfı, HtmlQuerySelector() dışında ek bekleme stratejileri sunar. NetworkIdle0(), tüm ağ istekleri sıfır bekleyen bağlantı ile tamamlanana kadar bekler - birden fazla API uç noktasından veri yükleyen paneller için kullanışlıdır. NetworkIdle2(), sayfalarla kalıcı WebSocket bağlantıları veya uzun anket işlemlerine sahip olan sayfaları ele alan iki bekleyen bağlantıya kadar tolerans sağlar. JavaScript(), sayfanın window.ironpdf.notifyRender() çağırmasını bekler - tüm veriler ve animasyonlar yüklendikten sonra açıkça render-hazırlığını sinyalleyerek hedef sayfayı kontrol ettiğimizde en doğru seçenek.
Tekrarlayan gösterge tablosu dışa aktarmaları için (örneğin, PDF üretimi için gecelik hisse sahibi posta dağıtımı), zaman aşımı istisnalarını yakalayan bir döngü içinde oluşturmayı sarın. WaitFor, maxWaitTime sınırını aşarsa, IronPDF mevcut olan içeriği render etmeye devam eder - ki bu eksik olabilir. Zaman aşımını artırmak veya NetworkIdle0() geçiş yapmak, genellikle daha yavaş ağlarda aralıklı hataları çözer.
Yukarıdaki Dört Yaklaşım Karşılaştırması
Yaklaşım
En İyi Kullanım Alanı
Kaynak HTML Gerekir
JS Bağımlılığı
Karmaşıklık
JavaScript DOM İzolasyonu
Herhangi bir kaynaktan genel maksatlı öğe çıkartma
Hayır
Evet
Orta
CSS Enjeksiyonu
DOM değişiklikleri olmadan bölümleri gizleme; @media print düzenleri
Parçalı (CustomCssUrl'in RenderHtmlAsPdf ihtiyacı var)
Hayır (URL'ler için JS ile enjeksiyon yapılmadıkça)
Canlı panolar, üçüncü taraf sayfaları, SPA widget'ları
Hayır
Evet
Orta–Yüksek
Doğru Yaklaşımı Seçmek
Karar, iki faktöre bağlıdır: ham HTML'ye erişimimiz olup olmadığı ve hedef içeriğin oluşturulmak için JavaScript gerektirip gerektirmediği.
Invoice satır öğesi çıkarmak en yaygın kullanımdır. Fatura HTML'si sunucu-tarafında (Razor görünümleri, Handlebars şablonları, saklı HTML dizeleri) oluşturulduğunda, Yaklaşım 3 (sunucu-tarafı çıkarma), sıfır çalışma zamanı ek yük ile en temiz sonucu verir. #line-items tablosunu çıkarın, stilize edilmiş bir HTML kabuğuna sarın ve render edin.
Dashboard widget ihracı, widget içeriği ilk sayfa yüklendikten sonra API çağrıları ile doldurulduğu için JavaScript çalıştırmasını gerektirir. Yaklaşım 1 (JS DOM izolasyonu), gösterge tablosu yerel veya kimlik doğrulama arkasında çalıştığında bunu ele alır. Yaklaşım 4 (JS Hedeflemeli URL Oluşturma), yalnızca URL'ye sahip olduğumuz üçüncü taraf bir barındırma uygulaması olduğunda gereklidir.
Form bölüm yazdırma - kullanıcı incelemesi veya uyumluluk arşivi için çok aşamalı bir formun belirli bir bölümünü çıkarma - uygulamanın zaten @media print kurallarını tanımladığı zaman Yaklaşım 2 (CSS enjeksiyonu) ile veya form HTML'sinin sunucu tarafında birleştirildiği zaman Yaklaşım 3 ile doğal olarak eşleşir.
Email şablon önizleme işleme - göndermeden önce bir HTML e-posta şablonunun PDF önizlemesini oluşturma - saf bir Yaklaşım 3 senaryosudur. Şablon HTML bir saklanan dizgi, dış kaynaklar (görseller, yazı tipleri) bilinen URL'lerde barındırılıyor ve BaseUrlOrPath parametresi RenderHtmlAsPdf() üzerindeki tüm göreli yolları çözer.
Birden fazla senaryoyu desteklemesi gereken uygulamalar için, bir strateji parametresini kabul eden bir hizmet arayüzü arkasında oluşturma mantığını kapsülleyin:
public enum ElementExtractionStrategy{JavaScriptIsolation,CssInjection,ServerSideExtraction,UrlWithJsTargeting}
public enum ElementExtractionStrategy
{
JavaScriptIsolation,
CssInjection,
ServerSideExtraction,
UrlWithJsTargeting
}
Public Enum ElementExtractionStrategy
JavaScriptIsolation
CssInjection
ServerSideExtraction
UrlWithJsTargeting
End Enum
Bu, çağıran kodun, render yapılandırmasını yinelenmeden girdi türüne bağlı olarak uygun yaklaşımı seçmesine olanak tanır.
Sonraki Adımlar
IronPDF'te HTML öğesi izolasyonu, bir oluşturma zamanı endişesidir, yerleşik bir API özelliği değildir. Yukarıdaki dört yaklaşım, sunucu-tarafı şablon çıkarma (sıfır JS, en temiz çıktı) ile canlı URL hedefleme (tam JS yürütme, SPAs ve asenkron içeriklerle başa çıkar) arasında tam spektrumu kapsar. Karşılaştırma tablosu, hızlı bir referans sağlar ve gerçek dünya senaryoları, uygun stratejiye ortak iş gereksinimlerini haritalar.
Üretim dağıtımları için birkaç ek düşünce:
Performans: Sunucu-tarafı çıkarma (Yaklaşım 3), tamamen JavaScript çalıştırmayı atladığı için en hızlı olanıdır. JavaScript tabanlı yaklaşımlar (1 ve 4), sayfa karmaşıklığı ve WaitFor zaman aşımına orantılı bir ek maliyet getirir. Toplu işlemler için (örneğin, 500 fatura PDF'si oluşturma), server tarafı çıkarması ile Parallel.ForEach ve birden çok ChromePdfRenderer örneği en iyi verimi sağlar.
Hata Ayıklama: PDF çıktısı boş veya içerik eksik olduğunda, EnableJavaScript = true etkinleştirin ve WaitFor zaman aşımını artırın. Hedef öğe asenkron veriye bağlıysa, WaitFor.NetworkIdle0(), sabit bir RenderDelay'dan daha güvenilirdir. rendering options rehberi, düzeni etkileyen görüntü genişliği ve kağıt sığdırma yapılandırmalarını kapsar.
Yaklaşım Karıştırma: Stratejileri karıştırmayı hiçbir şey engellemez. Birden fazla parçadan (tek kaynaktan başlık, başka bir kaynaktan veri tablosu, üçüncüsünden grafik SVG) bir bileşik HTML belgesi oluşturmak için sunucu-tarafı çıkarmayı kullanabilir, ardından oluşturulan belgeyi tek bir PDF olarak oluşturabiliriz. RenderHtmlAsPdf(string Html, string BaseUrlOrPath) yöntemi, göreli varlık yollarını temel URL'den çözer, bu da heterojen kaynaklardan belgeleri oluşturmayı kolaylaştırır.
C# içinde HTML öğelerini PDF'ye dönüştürme için başlıca yaklaşımlar nelerdir?
Ana yaklaşımlar, hepsi IronPDF kullanılarak uygulanabilen JS izolasyonu, CSS gizleme, sunucu tarafı çekme ve canlı URL hedefleme içerir.
HTML'den PDF'ye dönüşüm bağlamında JS izolasyonu nasıl çalışır?
JS izolasyonu, PDF'ye dönüştürmeden önce HTML belgesini dinamik olarak manipüle etmek için JavaScript çalıştırmayı içerir. Bu, yalnızca belirli öğelerin renderlendiğinden emin olmak için IronPDF kullanılarak gerçekleştirilebilir.
CSS gizleme nedir ve PDF dönüşümde nasıl kullanılır?
CSS gizleme, PDF'de görünmemesi gereken öğeleri gizlemek için CSS stillerini kullanmayı içerir. IronPDF, dönüşüm sürecinde stil sayfalarını veya stil kurallarını belirtmeye olanak tanıyarak bunu destekler.
IronPDF, PDF üretimi için sunucu tarafında belirli HTML öğelerini çıkarabilir mi?
Evet, IronPDF sunucu tarafında belirli HTML öğelerini çıkarabilir, bir web sayfasının hangi bölümlerinin PDF'ye dönüştürüleceği konusunda doğru kontrol sağlar.
HTML'den PDF'ye dönüşümde canlı URL hedeflemenin avantajı nedir?
Canlı URL hedefleme, IronPDF'in HTML dosyaları dinamik olarak PDF'ye dönüştürmesine olanak tanır, böylece mevcut ve anlık içerik yakalanır, yerel HTML dosyalarına ihtiyaç kalmaz.
IronPDF kullanarak bir web sayfasının yalnızca bir bölümünü PDF'ye dönüştürmek mümkün mü?
Evet, IronPDF, web sayfasının belirli bölümlerini veya öğelerini PDF'ye dönüştürme işlevselliği sağlar, hedef içeriğe odaklanmayı kolaylaştırır.
IronPDF, HTML'den PDF'ye dönüşüm sırasında dinamik içeriği nasıl yönetebilir?
IronPDF, dönüşüm sırasında JavaScript çalıştırarak dinamik içeriği renderlayabilir, böylece istemci tarafı scriptlerine bağlı öğelerin PDF'de doğru şekilde yansıtıldığından emin olunabilir.
How do I maintain CSS styles when isolating HTML elements for PDF?