Jak konwertować elementy HTML i fragmenty stron do formatu PDF w języku C#
IronPDF nie udostępnia wbudowanej metody SelectElement lub SelectCss do celowania w określone elementy HTML. ChromePdfRenderer renderuje kompletne dokumenty HTML — pełna strona, pełny URL, pełny ciąg HTML. Aby utworzyć plik PDF z określonej sekcji strony, izolujemy docelowy element przed renderowaniem, stosując jedną z czterech metod: manipulację DOM za pomocą JavaScript, wstrzykiwanie CSS, ekstrakcję fragmentów HTML po stronie serwera lub renderowanie adresów URL z wykorzystaniem JS.
Każde podejście odpowiada innym ograniczeniom. Izolacja DOM w JavaScript działa podczas renderowania adresów URL lub całych stron, gdzie musimy usunąć wszystko oprócz elementu docelowego. Wstrzykiwanie CSS ukrywa niepożądaną treść bez zmiany struktury DOM. Pobieranie danych po stronie serwera zapewnia najczystszy wynik, gdy mamy dostęp do surowego kodu HTML. Renderowanie adresów URL z wykorzystaniem JS obsługuje interaktywne pulpity nawigacyjne oraz strony zewnętrzne, w przypadku których źródłowy kod HTML nie jest dostępny.
Rozpocznij bezpłatny 30-dniowy okres próbny, aby przetestować wszystkie cztery podejścia.
Szybki start: Wyodrębnij określony element HTML jako plik PDFCeluj w dowolny element przy użyciu selektora CSS używając izolacji DOM JavaScript i WaitFor, a następnie renderuj tylko ten fragment do PDF.
-
1Install IronPDF with NuGet Package Manager
-
2Skopiuj i uruchom ten fragment kodu.
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# -
3Wdrożenie do testowania w środowisku produkcyjnym
Rozpocznij używanie IronPDF w swoim projekcie już dziś z darmową wersją próbną
Minimalny przebieg pracy (3 kroki)
- Zainstaluj
IronPdfpoprzez NuGet:Install-Package IronPdf - Skonfiguruj
ChromePdfRenderOptions.JavaScriptdo izolowania celowanego elementu iWaitForby upewnić się, że istnieje - Call
RenderHtmlAsPdf()orRenderUrlAsPdf()— the PDF contains only the isolated content
Jak wyodrębnić elementy za pomocą manipulacji DOM w JavaScript?
ChromePdfRenderOptions.JavaScript przyjmuje ciąg JavaScript, który jest wykonywany po załadowaniu HTML, ale przed renderowaniem PDF. Zastępując document.body.innerHTML za outerHTML celowanego elementu, usuwamy wszystko inne z renderowanej strony. To najbardziej wszechstronne podejście — działa zarówno z RenderHtmlAsPdf() jak i RenderUrlAsPdf().
WaitFor.HtmlQuerySelector() zapewnia, że celowany element istnieje w DOM, zanim JavaScript zostanie uruchomiony. Ma to kluczowe znaczenie w przypadku stron z treścią asynchroniczną — komponentów React, szablonów Angular lub danych opartych na API, które wyświetlają się po początkowym załadowaniu strony.
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 zastępuje całe ciało przez #invoice-summary div'a z outerHTML. Powstały plik PDF zawiera wyłącznie tabelę z fakturą — bez nagłówka, nawigacji ani stopki. WaitFor.HtmlElementById() oferuje prostszą alternatywę przy celowaniu w ID:
// Alternative: wait by ID directly
renderer.RenderingOptions.WaitFor.HtmlElementById("invoice-summary", 10000);' Alternative: wait by ID directly
renderer.RenderingOptions.WaitFor.HtmlElementById("invoice-summary", 10000)Dla złożonych selektorów (nazwy klas, atrybuty danych, elementy zagnieżdżone), HtmlQuerySelector() przyjmuje dowolny poprawny ciąg selektora CSS, który zaakceptowałby document.querySelector(). Dodatkowe metody wygody WaitFor obejmują HtmlElementByClassName(), HtmlElementByName() i HtmlElementByTagName() — każda wewnętrznie deleguje do HtmlQuerySelector(), ale zapewnia wyraźniejszy zamiar w kodzie.
Jeśli celowany element zależy od dziedziczonych stylów z kontenerów nadrzędnych, zamiana outerHTML może powodować utratę reguł CSS, które polegają na selektorach przodków (np., .dashboard .widget table { ... }. Aby je zachować, skopiuj odpowiednie <style> i <link> tagi z <head> do izolacji JS:
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;
}
"To zachowuje oryginalną zawartość <head> (arkusze stylów, czcionki, meta tagi) podczas zamiany tylko ciała. Instrukcja JavaScript do PDF i Instrukcje WaitFor pokrywają dodatkowe opcje konfiguracji, w tym NetworkIdle0() dla stron z wieloma asynchronicznymi źródłami danych.
Jak wyodrębnić elementy za pomocą wstrzykiwania CSS?
ChromePdfRenderOptions.CustomCssUrl przyjmuje ścieżkę pliku lub URL do arkusza stylów, które IronPDF stosuje przed renderowaniem. Zamiast manipulować DOM, ukryjemy wszystko poza celowanym elementem za pomocą CSS display: none. Pozwala to zachować oryginalną strukturę DOM i całkowicie uniknąć wykonywania kodu JavaScript.
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")Uwaga: Właściwość CustomCssUrl działa tylko z RenderHtmlAsPdf() podczas renderowania z ciągów HTML. Dla renderowania URL, osadź zastrzyk CSS we właściwości JavaScript:
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);
"Gdy kontrolujemy źródłowy HTML, reguły @media print oferują najlżejszą alternatywę — bez zewnętrznych zależności, bez zastrzyków podczas uruchamiania:
@media print {
header, nav, footer, .sidebar { display: none !important; }
#invoice-summary { width: 100%; margin: 0; }
}Ustaw CssMediaType na PdfCssMediaType.Print na rendererze, aby aktywować te reguły:
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.PrintTo idealne dla scenariuszy drukowania sekcji formularza, gdzie aplikacja już definiuje reguły @media print, lub podejście 3, kiedy formularz HTML jest składany po stronie serwera.
Podejście CSS ma jedno ważne ograniczenie: ukryte elementy nadal zajmują miejsce w przepływie dokumentu, jeśli display: none jest używane na nieodpowiednim poziomie specyfiki. Zawsze używaj !important, aby nadpisać style frameworków (Bootstrap, Tailwind), które mogą ponownie wyświetlić elementy w określonych punktach przerwania. W przypadku głęboko zagnieżdżonych elementów docelowych bardziej precyzyjny selektor pozwala uniknąć ukrycia elementów pobocznych:
body > *:not(#target),
body > *:not(#target) ~ * {
display: none !important;
}Jak wyodrębnić fragmenty HTML po stronie serwera?
Kiedy mamy dostęp do surowego HTML — czytania go z pliku, bazy danych, CMS-a lub odpowiedzi HTTP — najczystsze podejście polega na wyciągnięciu celowanego elementu po stronie serwera przy użyciu parsera HTML, a następnie przekazaniu fragmentu do RenderHtmlAsPdf(). Bez JavaScriptu, bez wstrzykiwania CSS, bez manipulacji DOM w czasie wykonywania.
AngleSharp jest standardowym parserem HTML dla platformy .NET Standard przeznaczonym do tego wzorca:
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")Kluczowym szczegółem jest opakowanie wyodrębnionego fragmentu w pełen dokument HTML z odpowiednimi tagami <style> lub <link>. Bez tej nakładki style wbudowane renderują się poprawnie, ale zewnętrzne arkusze stylów i odziedziczone reguły CSS są tracone. W przypadku renderowania podglądu szablonu wiadomości e-mail — gdzie kod HTML szablonu jest już zapisany jako ciąg znaków — ten wzorzec ekstrakcji zapewnia wyniki idealne pod względem pikseli, ponieważ kontrolujemy każdy aspekt renderowanej treści.
Ten sam schemat działa z HtmlAgilityPack jako alternatywnym parserem:
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\")Wybór między AngleSharp a HtmlAgilityPack jest w dużej mierze kwestią preferencji. AngleSharp używa selektorów CSS (QuerySelector), co jest zgodne z mentalnymi modelami deweloperów frontend. HtmlAgilityPack używa XPath (SelectSingleNode), co jest bardziej znane w bazach kodów .NET obciążonych XML.
Dla renderowania podglądu szablonu email — generowanie podglądu PDF szablonu email HTML przed wysłaniem — jest to czysta sytuacja via Podejście 3. Szablon HTML jest przechowywany jako ciąg znaków, zewnętrzne zasoby (obrazy, czcionki) są hostowane pod znanymi URL-ami, a parametr RenderHtmlAsPdf(string Html, string BaseUrlOrPath) na RenderHtmlAsPdf() rozwiązuje wszystkie ścieżki względne.
Gdy HTML zawiera <div id="app"></div>, które aplikacja React lub Vue wypełniają w czasie wykonania, wyciągany fragment będzie pusty. W takich przypadkach należy zastosować podejście 1 lub 4.
Moją ulubioną biblioteką tego typu jest IronPDF. Umożliwia ona szybkie i efektywne manipulowanie plikami PDF. Posiada także wiele cennych funkcji, takich jak eksport do formatu PDF/A i cyfrowe podpisywanie dokumentów PDF.
IronOCR pozwala nam oszczędzić 40 000 USD rocznie na ręcznym przetwarzaniu, jednocześnie zwiększając produktywność i uwalniając zasoby do zadań o wysokim wpływie. Gorąco polecam.
IronSuite odgrywa kluczową rolę w naszej działalności. Są to narzędzia zwiększające wydajność w całej firmie, w tym tworzenie planów pięter i poprawa zarządzania zapasami.
Jak kierować reklamy na elementy podczas renderowania aktywnych adresów URL?
Dla aktywnych URL-i, gdzie nie mamy dostępu do źródłowego HTML — paneli sterowania stron trzecich, zewnętrznych raportów, hostowanych aplikacji — łączymy RenderUrlAsPdf() z właściwością JavaScript i WaitFor, aby izolować określoną sekcję po załadowaniu strony.
Oto scenariusz eksportu widżetu pulpitu nawigacyjnego: narzędzie BI wyświetla wykresy i tabele na stronie internetowej, a my musimy wyeksportować pojedynczy widżet jako plik PDF w celu dystrybucji wśród interesariuszy.
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")Wystąpienie WaitFor.HtmlQuerySelector() zapewnia, że widżet istnieje w DOM, zanim JavaScript zostanie wykonany. Limit czasu wynoszący 15 sekund uwzględnia wolniejsze wywołania API, które wypełniają dane na pulpicie nawigacyjnym. Następnie JavaScript redukuje stronę do samego widgetu.
Dla stron z złożonymi zależnościami CSS, podejście appendChild (przenoszenie węzła zamiast kopiowania jego outerHTML) zachowuje więcej obliczonych stylów, ponieważ element zachowuje swoją pozycję w CSSOM. Podejście zamiany innerHTML z podejścia 1 jest prostsze, ale może tracić style, które polegają na selektorach przodków.
Gdy docelowa strona wymaga uwierzytelnienia, skonfiguruj pliki cookie na rendererze przed wywołaniem RenderUrlAsPdf():
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"}
}Klasa WaitFor oferuje dodatkowe strategie oczekiwania poza HtmlQuerySelector(). NetworkIdle0() czeka, aż wszystkie żądania sieciowe się zakończą, z zerem otwartych połączeń — przydatne dla paneli kontrolnych, które wczytują dane z wielu punktów końcowych API. NetworkIdle2() toleruje do dwóch aktywujących połączeń, co obsługuje strony z utrzymywanymi połączeniami WebSocket lub długim pollingiem. JavaScript() czeka aż strona wywoła window.ironpdf.notifyRender() — najdokładniejsza opcja, gdy kontrolujemy docelową stronę i możemy sygnalizować gotowość do renderowania jawnie po załadowaniu wszystkich danych i zakończeniu animacji.
W przypadku powtarzających się eksportów z pulpitu nawigacyjnego (np. generowanie plików PDF co noc w celu rozesłania ich pocztą elektroniczną do interesariuszy) należy umieścić renderowanie w pętli ponownych prób, która przechwytuje wyjątki związane z przekroczeniem limitu czasu. Jeśli WaitFor przekroczy swoje maxWaitTime, IronPDF przystępuje do renderowania dostępnej treści — co może być niedokończone. Zwiększenie limitu czasowego lub przełączenie na NetworkIdle0() zazwyczaj rozwiązuje sporadyczne awarie w wolniejszych sieciach.
Porównanie wszystkich czterech podejść
| Podejście | Najlepsze dla | Wymagany kod źródłowy HTML | Zależność JS | Złożoność |
|---|---|---|---|---|
| Izolacja DOM w JavaScript | Powszechne wyodrębnianie elementów z dowolnego źródła | Nie | Tak | Medium |
| Wstrzykiwanie CSS | Ukrywanie sekcji bez zmian w DOM; Układy @media print | Częściowy (własny URLCSS potrzebuje RenderHtmlAsPdf) | Nie (chyba że wstawianie odbywa się za pomocą JS dla adresów URL) | Niski |
| Wyodrębnianie fragmentów po stronie serwera | Treści CMS, zapisane szablony, podglądy wiadomości e-mail | Tak | Nie | Niski–Średni |
| Renderowanie adresów URL z wykorzystaniem JS Targeting | Aktywne pulpity nawigacyjne, strony zewnętrzne, widżety SPA | Nie | Tak | Średni–wysoki |
Wybór właściwego podejścia
Decyzja zależy od dwóch czynników: czy mamy dostęp do surowego kodu HTML oraz czy renderowanie treści docelowej wymaga użycia JavaScript.
Wyodrębnianie pozycji Invoice jest najczęstszym przypadkiem użycia. Gdy kod HTML faktury jest generowany po stronie serwera (widoki Razor, szablony Handlebars, zapisane ciągi HTML), podejście 3 (pobieranie po stronie serwera) zapewnia najczystszy wynik bez obciążenia środowiska uruchomieniowego. Wyodrębnij tabelę #line-items, opakuj ją w stylowany HTML i renderuj.
Eksport widżetu Dashboard wymaga wykonania JavaScript, ponieważ zawartość widżetu jest wypełniana przez wywołania API po początkowym załadowaniu strony. Podejście 1 (izolacja JS DOM) radzi sobie z tym, gdy pulpit nawigacyjny działa lokalnie lub za uwierzytelnieniem. Podejście 4 (renderowanie adresów URL z wykorzystaniem JS) jest konieczne, gdy pulpit nawigacyjny jest aplikacją hostowaną przez stronę trzecią, w przypadku której dysponujemy jedynie adresem URL.
Drukowanie sekcji Form — wyodrębnienie konkretnej sekcji wieloetapowego formularza do przeglądu przez użytkownika lub archiwizacji zgodności — naturalnie odzwierciedla się w Podejściu 2 (wstrzyknięcie CSS), gdy aplikacja już określa reguły @media print, lub Podejściu 3 gdy formularz HTML jest montowany po stronie serwera.
Podgląd szablonu Email — generowanie podglądu PDF szablonu wiadomości e-mail HTML przed wysłaniem — to czysta sytuacja Podejścia 3. Szablon HTML jest przechowywany jako ciąg, zasoby zewnętrzne (obrazy, czcionki) są hostowane na znanych URL-ach, a parametr BaseUrlOrPath na RenderHtmlAsPdf() rozwiązuje wszystkie ścieżki względne.
W przypadku aplikacji, które muszą obsługiwać wiele scenariuszy, należy zamknąć logikę renderowania w interfejsie usługi, który akceptuje parametr strategii:
public enum ElementExtractionStrategy
{
JavaScriptIsolation,
CssInjection,
ServerSideExtraction,
UrlWithJsTargeting
}Public Enum ElementExtractionStrategy
JavaScriptIsolation
CssInjection
ServerSideExtraction
UrlWithJsTargeting
End EnumDzięki temu kod wywołujący może wybrać odpowiednie podejście w oparciu o typ danych wejściowych bez konieczności powielania konfiguracji renderera.
Kolejne kroki
Izolacja elementów HTML w IronPDF jest kwestią dotyczącą renderowania, a nie wbudowaną funkcją API. Powyższe cztery podejścia obejmują pełne spektrum — od ekstrakcji szablonów po stronie serwera (zero JS, najczystszy wynik) po kierowanie na aktywne adresy URL (pełne wykonanie JS, obsługa aplikacji SPA i treści asynchronicznych). Tabela porównawcza stanowi skrócone źródło informacji, a scenariusze z życia wzięte odnoszą typowe wymagania biznesowe do odpowiedniej strategii.
Kilka dodatkowych uwag dotyczących wdrożeń produkcyjnych:
Wydajność: Pobieranie po stronie serwera (podejście 3) jest najszybsze, ponieważ całkowicie pomija wykonanie kodu JavaScript. Podejścia oparte na JavaScript (1 i 4) dodają narzut proporcjonalny do złożoności strony i limitu czasowego WaitFor. Dla przetwarzania wsadowego (np. generowanie 500 faktur w PDF), wyodrębnienie po stronie serwera z Parallel.ForEach i wieloma instancjami ChromePdfRenderer oferuje najlepszą przepustowość.
Debugowanie: Gdy wynik PDF jest pusty lub brak treści, włącz EnableJavaScript = true i zwiększ limit czasu WaitFor. Jeśli docelowy element zależy od danych asynchronicznych, WaitFor.NetworkIdle0() jest bardziej niezawodny niż stały RenderDelay. Przewodnik po opcjach renderowania obejmuje konfiguracje szerokości okna wyświetlania i dopasowania do papieru, które mają wpływ na układ.
Łączenie podejść: Nic nie stoi na przeszkodzie, aby łączyć strategie. Możemy użyć ekstrakcji po stronie serwera, aby zbudować złożony dokument HTML z wielu fragmentów (nagłówek z jednego źródła, tabela danych z innego, wykres SVG z trzeciego), a następnie wyrenderować złożony dokument jako pojedynczy plik PDF. Metoda RenderHtmlAsPdf(string Html, string BaseUrlOrPath) rozwiązuje względne ścieżki zasobów od podstawowego URL, co sprawia, że tworzenie dokumentów z heterogenicznych źródeł jest proste.
Eksploruj przewodnik JavaScript do PDF dla zaawansowanych wzorców wykonywania JS, dokumentację WaitFor dla wszystkich dostępnych strategii oczekiwania, przewodnik po opcjach renderowania dla kompletnej powierzchni ChromePdfRenderOptions oraz przykłady kodu własnego JavaScript dla gotowych fragmentów.
Zobacz opcje licencjonowania, zaczynając od $999. Dokumentacja ChromePdfRenderOptions API i dokumentacja WaitFor API opisuje każdą właściwość i metodę.
Często Zadawane Pytania
Jakie są główne metody konwersji elementów HTML do formatu PDF w języku C#?
Główne podejścia obejmują izolację JS, ukrywanie CSS, ekstrakcję po stronie serwera oraz kierowanie na aktywne adresy URL, a wszystkie one mogą być wdrożone przy użyciu IronPDF.
Jak działa izolacja JS w kontekście konwersji HTML do PDF?
Izolacja JS polega na uruchomieniu kodu JavaScript w celu dynamicznej manipulacji dokumentem HTML przed konwersją do formatu PDF. Można to osiągnąć za pomocą IronPDF, aby zapewnić renderowanie tylko określonych elementów.
Czym jest ukrywanie CSS i jak wykorzystuje się je podczas konwersji plików PDF?
Ukrywanie za pomocą CSS polega na użyciu stylów CSS do ukrycia elementów, które nie powinny pojawiać się w pliku PDF. IronPDF obsługuje tę funkcję, umożliwiając programistom określenie arkuszy stylów lub reguł stylów podczas procesu konwersji.
Czy IronPDF może wyodrębniać określone elementy HTML po stronie serwera w celu generowania plików PDF?
Tak, IronPDF może wyodrębniać określone elementy HTML po stronie serwera, co pozwala na precyzyjną kontrolę nad tym, które części strony internetowej są konwertowane do formatu PDF.
Jaka jest zaleta kierowania na aktywne adresy URL podczas konwersji HTML do PDF?
Funkcja Live URL targeting pozwala IronPDF konwertować elementy z aktywnego adresu URL strony internetowej bezpośrednio do formatu PDF, zapewniając przechwycenie najbardziej aktualnej treści bez konieczności korzystania z lokalnych plików HTML.
Czy za pomocą IronPDF można przekonwertować tylko część strony internetowej do formatu PDF?
Tak, IronPDF oferuje funkcję konwersji określonych sekcji lub elementów strony internetowej do formatu PDF, co ułatwia skupienie się na istotnych treściach.
W jaki sposób IronPDF radzi sobie z treścią dynamiczną podczas konwersji HTML do PDF?
IronPDF może renderować treści dynamiczne poprzez wykonywanie kodu JavaScript podczas konwersji, zapewniając, że elementy oparte na skryptach po stronie klienta są dokładnie odwzorowane w pliku PDF.
Curtis Chau posiada tytuł licencjata z informatyki (Uniwersytet Carleton) i specjalizuje się w front-endowym rozwoju, z ekspertką w Node.js, TypeScript, JavaScript i React. Pasjonuje się tworzeniem intuicyjnych i estetycznie przyjemnych interfejsów użytkownika, Curtis cieszy się pracą z nowoczesnymi frameworkami i tworzeniem dobrze zorganizowanych, atrakcyjnych wizualnie podręczników.
