HTML Öğeleri ve Kısmi Sayfa Bölümlerini C#'ta PDF'ye Dönüştürme
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ınJavaScript 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
-
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");C# -
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
IronPdfkurun:Install-Package IronPdf - Hedef öğeyi izole etmek için
ChromePdfRenderOptions.JavaScriptve varlığını sağlamak içinWaitForyapılandırın RenderHtmlAsPdf()veyaRenderUrlAsPdf()ç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.
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")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)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;
}
"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-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");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:
renderer.RenderingOptions.JavaScript = @"
var style = document.createElement('style');
style.textContent = 'body > *:not(#invoice-summary) { display: none !important; }';
document.head.appendChild(style);
";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:
@media print {
header, nav, footer, .sidebar { display: none !important; }
#invoice-summary { width: 100%; margin: 0; }
}
CssMediaType ayarını PdfCssMediaType.Print olarak ayarlayın, böylece bu kuralları kullanın:
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.PrintBu, 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;
}
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 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");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");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\");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.
IronSuite, operasyonlarımızda kritik bir rol oynar. Bunlar, iş süreçlerinde verimliliği artıran, kat planları oluşturmak ve envanter yönetimini geliştirmek gibi araçlardır.
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 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");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:
renderer.RenderingOptions.CustomCookies = new Dictionary<string, string>
{
{ "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) | 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:
public enum ElementExtractionStrategy
{
JavaScriptIsolation,
CssInjection,
ServerSideExtraction,
UrlWithJsTargeting
}Public Enum ElementExtractionStrategy
JavaScriptIsolation
CssInjection
ServerSideExtraction
UrlWithJsTargeting
End EnumBu, ç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.
JavaScript to PDF nasıl yapılır kılavuzunda gelişmiş JS yürütme modellerini, WaitFor belgelemesinde tüm mevcut bekleme stratejilerini, işleme seçenekleri kılavuzunda tam ChromePdfRenderOptions yüzeyini ve özel JavaScript kodu örneğinde çalıştırılmaya hazır kod parçacıklarını keşfedin.
Lisanslama seçeneklerini görüntüleyin $999 ile başlayarak. ChromePdfRenderOptions API referansı ve WaitFor API referansı, her özelliği ve yöntemi belgeler.
Sıkça Sorulan Sorular
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?
Preserve CSS styles by copying necessary `