1. IronPDF
  2. Poradniki
  3. JavaScript (Custom Render Delays)
Jak używać JavaScript z HTML do PDF przy użyciu C#

Jak używać JavaScript z HTML do PDF w C

Curtis Chau
Curtis Chau
Zaktualizowano:
This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDF umożliwia wykonywanie kodu JavaScript podczas konwersji HTML do PDF przy użyciu silnika renderującego Chromium. Konwertuj dynamiczne treści internetowe, w tym JavaScript i jQuery, na dokumenty PDF w aplikacjach .NET C# z obsługą elementów interaktywnych i dynamicznego renderowania.

JavaScript to wysokopoziomowy, wszechstronny język programowania używany w tworzeniu stron internetowych. Umożliwia korzystanie z interaktywnych i dynamicznych funkcji na stronach internetowych. jQuery to biblioteka JavaScript, która upraszcza typowe zadania, takie jak manipulacja DOM, obsługa zdarzeń i żądania AJAX.

IronPDF obsługuje JavaScript poprzez silnik renderujący Chromium. W tym artykule pokazano, jak używać JavaScript i jQuery podczas konwersji HTML do PDF w projektach .NET C#. IronPDF udostępnia bezpłatną wersję próbną IronPDF do testów. Aby dowiedzieć się, jak debugować kod HTML przed konwersją, zapoznaj się z naszym przewodnikiem dotyczącym debugowania kodu HTML w przeglądarce Chrome.

Szybki start: Konwersja HTML z JavaScriptem do formatu PDF w .NET

Konwertuj strony HTML zawierające JavaScript do formatu PDF przy użyciu IronPDF w projektach .NET. Dzięki obsłudze silnika renderującego Chromium wszystkie elementy JavaScript są przetwarzane dokładnie. Ten przykład pokazuje, jak przekształcić stronę internetową z dynamiczną treścią do formatu PDF. Pojedyncze wywołanie metody renderuje i zapisuje dokument PDF.

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Skopiuj i uruchom ten fragment kodu.

    new IronPdf.ChromePdfRenderer { RenderingOptions = { EnableJavaScript = true, WaitFor = IronPdf.Rendering.WaitFor.JavaScript() } }
    .RenderHtmlAsPdf("<h1>Start</h1><script>document.write('<h1>Generated by JS</h1>');window.ironpdf.notifyRender();</script>")
    .SaveAs("js-rendered.pdf");

  3. Wdrożenie do testowania w środowisku produkcyjnym

    Rozpocznij używanie IronPDF w swoim projekcie już dziś z darmową wersją próbną

    arrow pointer

Jak skonfigurować podstawowy przebieg pracy?

  1. Pobierz bibliotekę C#: Konwersja HTML do PDF
  2. Włącz wykonanie JavaScript: Użyj właściwości EnableJavaScript
  3. Konwersja z HTML do PDF: Upewnij się, że kod JavaScript jest obsługiwany
  4. Wykonaj niestandardowy kod JavaScript: w ramach kodu .NET C#
  5. Przechwytywanie komunikatów konsoli: Korzystanie z modułu nasłuchującego komunikatów JavaScript

Jak renderować JavaScript podczas konwersji HTML do PDF?

Podczas konwersji do formatu PDF obsługiwany jest JavaScript w HTML. Ponieważ renderowanie odbywa się natychmiastowo, JavaScript może nie działać poprawnie. Skonfiguruj klasę WaitFor w opcjach renderowania, aby umożliwić czas wykonania JavaScript. Poniższy kod korzysta z WaitFor.JavaScript z maksymalnym czasem oczekiwania 500 ms. Szczegółowe informacje na temat czasów oczekiwania i opóźnień renderowania znajdziesz w naszym przewodniku używania WaitFor do opóźnienia renderowania PDF.

:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-render-javascript.cs
using IronPdf;

string htmlWithJavaScript = @"<h1>This is HTML</h1>
<script>
    document.write('<h1>This is JavaScript</h1>');
    window.ironpdf.notifyRender();
</script>";

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Enable JavaScript
renderer.RenderingOptions.EnableJavaScript = true;
// Set waitFor for JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500);

// Render HTML contains JavaScript
var pdfJavaScript = renderer.RenderHtmlAsPdf(htmlWithJavaScript);

// Export PDF
pdfJavaScript.SaveAs("javascriptHtml.pdf");
Imports IronPdf

Private htmlWithJavaScript As String = "<h1>This is HTML</h1>
<script>
    document.write('<h1>This is JavaScript</h1>');
    window.ironpdf.notifyRender();
</script>"

' Instantiate Renderer
Private renderer = New ChromePdfRenderer()

' Enable JavaScript
renderer.RenderingOptions.EnableJavaScript = True
' Set waitFor for JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500)

' Render HTML contains JavaScript
Dim pdfJavaScript = renderer.RenderHtmlAsPdf(htmlWithJavaScript)

' Export PDF
pdfJavaScript.SaveAs("javascriptHtml.pdf")
$vbLabelText   $csharpLabel

Dlaczego WaitFor ma znaczenie dla wykonywania kodu JavaScript?

Złożone frameworki JavaScript mogą wymagać dostosowania alokacji pamięci ze względu na ograniczoną pamięć wykonawczą JavaScript w środowisku .NET Framework. WaitFor oferuje opcje zapewniające pełne wykonanie kodu JavaScript przed wygenerowaniem pliku PDF. Oczekiwanie na wykonanie kodu JavaScript, stany bezczynności sieci, elementy HTML lub niestandardowe opóźnienia renderowania. Dowiedz się więcej o dostępnych opcjach renderowania, aby zoptymalizować generowanie plików PDF.

Kiedy należy używać metody notifyRender?

Metoda window.ironpdf.notifyRender() sygnalizuje zakończenie wykonania JavaScript, zapewniając właściwe wyczucie czasu renderowania dla dynamicznej zawartości. Użyj go do operacji asynchronicznych lub animacji, które muszą zostać zakończone przed wygenerowaniem pliku PDF. Metoda współpracuje z ustawieniami WaitFor.JavaScript dla precyzyjnej kontroli renderowania.

Jakie są typowe problemy związane z renderowaniem w JavaScript?

Złożone frameworki mogą wymagać dodatkowego czasu oczekiwania lub przydzielenia pamięci. Typowe problemy to:

  • Dane asynchroniczne nie są ładowane przed renderowaniem
  • Animacje CSS uchwycone w trakcie przejścia
  • Błędy JavaScript uniemożliwiające renderowanie
  • Ograniczenia pamięci przy rozbudowanych frameworkach

W celu rozwiązywania problemów należy włączyć niestandardowe logowanie, aby rejestrować szczegóły procesu renderowania.

Jak mogę wykonać niestandardowy kod JavaScript przed renderowaniem pliku PDF?

Użyj właściwości JavaScript w opcjach renderowania, aby wykonać niestandardowy JavaScript przed renderowaniem. Jest to pomocne podczas renderowania adresów URL, gdzie nie jest możliwe wstrzyknięcie kodu JavaScript. Przypisz kod JavaScript do właściwości JavaScript opcji renderowania. Połącz z asynchronicznym generowaniem plików PDF w celu przetwarzania wielu dokumentów.

:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-execute-javascript.cs
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// JavaScript code
renderer.RenderingOptions.Javascript = @"
document.querySelectorAll('h1').forEach(function(el){
    el.style.color='red';
})";

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Happy New Year!</h1>");

pdf.SaveAs("executed_js.pdf");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' JavaScript code
renderer.RenderingOptions.Javascript = "
document.querySelectorAll('h1').forEach(function(el){
    el.style.color='red';
})"

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>Happy New Year!</h1>")

pdf.SaveAs("executed_js.pdf")
$vbLabelText   $csharpLabel

Kiedy należy stosować niestandardowe wstrzykiwanie kodu JavaScript?

Niestandardowe wstrzykiwanie kodu JavaScript działa podczas renderowania adresów URL, gdzie modyfikacja źródłowego kodu HTML nie jest możliwa. Typowe zastosowania:

  • Modyfikowanie stron stron trzecich przed konwersją
  • Dodawanie dynamicznych znaków wodnych lub nagłówków
  • Warunkowe ukrywanie lub wyświetlanie elementów
  • Dostosowanie stylów do układów drukarskich PRINT
  • Wyodrębnianie i reorganizacja treści

Jakie rodzaje manipulacji DOM mogę wykonywać?

Modyfikuj style, dodawaj elementy, zmieniaj treść lub wykonuj standardowe operacje DOM przed renderowaniem. Przykłady:

  • Zmiana właściwości CSS dotyczących formatowania wydruku PRINT
  • Usuń elementy nawigacyjne lub reklamy
  • Dodaj numery stron lub niestandardowe nagłówki
  • Zmiana struktury układu treści
  • Dodaj dodatkowe dane lub metadane

Jak przechwycić komunikaty konsoli JavaScript podczas generowania pliku PDF?

IronPDF przechwytuje komunikaty konsoli JavaScript, w tym logi błędów i komunikaty niestandardowe. Użyj właściwości JavaScriptMessageListener do przechwytywania wiadomości. Ten przykład pokazuje rejestrowanie niestandardowego tekstu i błędów.

:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-message-listener.cs
using IronPdf;
using System;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Method callback to be invoked whenever a browser console message becomes available:
renderer.RenderingOptions.JavascriptMessageListener = message => Console.WriteLine($"JS: {message}");
// Log 'foo' to the console
renderer.RenderingOptions.Javascript = "console.log('foo');";

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>");

//--------------------------------------------------//
// Error will be logged
// message => Uncaught TypeError: Cannot read properties of null (reading 'style')
renderer.RenderingOptions.Javascript = "document.querySelector('non-existent').style.color='foo';";

// Render HTML to PDF
PdfDocument pdf2 = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>");
Imports IronPdf
Imports System

Private renderer As New ChromePdfRenderer()

' Method callback to be invoked whenever a browser console message becomes available:
renderer.RenderingOptions.JavascriptMessageListener = Sub(message) Console.WriteLine($"JS: {message}")
' Log 'foo' to the console
renderer.RenderingOptions.Javascript = "console.log('foo');"

' Render HTML to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>")

'--------------------------------------------------//
' Error will be logged
' message => Uncaught TypeError: Cannot read properties of null (reading 'style')
renderer.RenderingOptions.Javascript = "document.querySelector('non-existent').style.color='foo';"

' Render HTML to PDF
Dim pdf2 As PdfDocument = renderer.RenderHtmlAsPdf("<h1> Hello World </h1>")
$vbLabelText   $csharpLabel

Konsola debugowania pokazuje TypeError: Cannot read properties of null (reading 'style') z wyjściem konsoli

Dlaczego warto monitorować komunikaty konsoli JavaScript?

Monitorowanie konsoli pomaga w debugowaniu błędów JavaScript i śledzeniu przebiegu wykonywania podczas generowania plików PDF. Niezbędne dla:

  • Identyfikacja błędów JavaScript uniemożliwiających renderowanie
  • Śledzenie postępu złożonych operacji JavaScript
  • Debugowanie problemów z synchronizacją kodu asynchronicznego
  • Sprawdzanie poprawności wykonywania niestandardowego kodu JavaScript
  • Gromadzenie wskaźników wydajności JavaScript

Jakie rodzaje komunikatów można przechwycić?

Moduł przechwytuje niestandardowe komunikaty console.log oraz błędy JavaScript, w tym:

  • Wyniki konsoli: log(), info(), warn(), error()
  • Nieprzechwycone wyjątki i błędy wykonania
  • Błędy sieciowe spowodowane nieudanym dostępem do zasobów
  • Ostrzeżenia o wycofaniu silnika przeglądarki
  • Niestandardowe informacje dotyczące debugowania

Jak tworzyć wykresy za pomocą bibliotek JavaScript, takich jak D3.js?

D3.js dobrze współpracuje z IronPDF przy tworzeniu wykresów lub obrazów. D3.js (Data-Driven Documents) to biblioteka JavaScript służąca do dynamicznej, interaktywnej wizualizacji danych przy użyciu SVG w HTML5 i CSS3. Więcej przykładów bibliotek do tworzenia wykresów można znaleźć w naszym przewodniku dotyczącym renderowania wykresów w plikach PDF.

Aby utworzyć wykres D3.js i przekonwertować go do formatu PDF:

  • Utwórz obiekt renderera
  • Ustawianie właściwości JavaScript i CSS
  • Użyj RenderHTMLFileAsPdf do odczytywania HTML
  • Zapisz jako PDF 
:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-render-chart.cs
using IronPdf;

string html = @"
<!DOCTYPE html>
<html>
<head>
<meta charset=""utf-8"" />
<title>C3 Bar Chart</title>
</head>
<body>
<div id=""chart"" style=""width: 950px;""></div>
<script src=""https://d3js.org/d3.v4.js""></script>
<!-- Load c3.css -->
<link href=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.css"" rel=""stylesheet"">
<!-- Load d3.js and c3.js -->
<script src=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.js""></script>

<script>
Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
        return fn.apply(thisp, arguments);
    };
};
var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [['data1', 30, 200, 100, 400, 150, 250],
                  ['data2', 50, 20, 10, 40, 15, 25]]
    }
});
</script>
</body>
</html>
";

// Instantiate Renderer
var renderer = new ChromePdfRenderer();

// Enable JavaScript
renderer.RenderingOptions.EnableJavaScript = true;
// Set waitFor for JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500);

// Render HTML contains JavaScript
var pdfJavaScript = renderer.RenderHtmlAsPdf(html);

// Export PDF
pdfJavaScript.SaveAs("renderChart.pdf");
Imports IronPdf

Private html As String = "
<!DOCTYPE html>
<html>
<head>
<meta charset=""utf-8"" />
<title>C3 Bar Chart</title>
</head>
<body>
<div id=""chart"" style=""width: 950px;""></div>
<script src=""https://d3js.org/d3.v4.js""></script>
<!-- Load c3.css -->
<link href=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.css"" rel=""stylesheet"">
<!-- Load d3.js and c3.js -->
<script src=""https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.4/c3.js""></script>

<script>
Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
        return fn.apply(thisp, arguments);
    };
};
var chart = c3.generate({
    bindto: '#chart',
    data: {
        columns: [['data1', 30, 200, 100, 400, 150, 250],
                  ['data2', 50, 20, 10, 40, 15, 25]]
    }
});
</script>
</body>
</html>
"

' Instantiate Renderer
Private renderer = New ChromePdfRenderer()

' Enable JavaScript
renderer.RenderingOptions.EnableJavaScript = True
' Set waitFor for JavaScript
renderer.RenderingOptions.WaitFor.JavaScript(500)

' Render HTML contains JavaScript
Dim pdfJavaScript = renderer.RenderHtmlAsPdf(html)

' Export PDF
pdfJavaScript.SaveAs("renderChart.pdf")
$vbLabelText   $csharpLabel

Które biblioteki wykresów najlepiej współpracują z IronPDF?

Biblioteki do tworzenia wykresów w JavaScript kompatybilne z IronPDF:

  • Chart.js: Lekka biblioteka do tworzenia podstawowych wykresów
  • Highcharts: Professional wykresy z możliwością dostosowania
  • D3.js: Maksymalna elastyczność wizualizacji
  • C3.js: wykresy wielokrotnego użytku oparte na D3
  • ApexCharts: Nowoczesne wykresy o wysokiej wydajności

Powodzenie wymaga zakończenia renderowania wykresów przed wygenerowaniem pliku PDF przy użyciu odpowiednich strategii oczekiwania.

Kiedy należy dostosować czasy oczekiwania na renderowanie wykresów?

Złożone wykresy z animacjami lub dużymi zbiorami danych wymagają dłuższego czasu oczekiwania. Należy wziąć pod uwagę:

  • Ilość danych wpływa na czas przetwarzania
  • Czas trwania animacji musi się zakończyć
  • Żądania sieciowe dotyczące danych asynchronicznych
  • Złożoność wykresu zwiększa obciążenie przetwarzania

Jak mogę rozwiązać problemy z renderowaniem wykresów?

Więcej opcji klasy WaitFor można znaleźć w artykule "Jak używać klasy WaitFor do opóźniania renderowania plików PDF w języku C#". Kroki rozwiązywania problemów:

  1. Wydłużenie czasu oczekiwania JavaScript
  2. Użyj WaitFor.NetworkIdle() do asynchronicznego ładowania
  3. Wyłącz animacje w plikach PDF
  4. Sprawdź konsolę pod kątem błędów JavaScript
  5. Najpierw przetestuj kod HTML w przeglądarce

Jak przekonwertować aplikacje AngularJS do formatu PDF?

AngularJS to oparty na JavaScript otwarty framework front-endowy. Ułatwia tworzenie aplikacji jednostronicowych przy użyciu architektur MVC i MVVM po stronie klienta. Aby uzyskać więcej informacji, zapoznaj się z naszym przykładem kodu Angular do PDF.

Aby zapewnić kompatybilność, należy używać renderowania po stronie serwera (SSR) z Angular Universal. Aplikacje jednostronicowe (SPA) wymagają specjalnego traktowania ze względu na dynamiczne generowanie treści po początkowym załadowaniu.

Dlaczego renderowanie po stronie serwera jest ważne dla plików PDF w Angularze?

Angular po stronie klienta może nie wyświetlać się poprawnie bez SSR ze względu na zależność od JavaScript w przeglądarce. Wyzwania:

  • Minimalny kod HTML z dynamiczną treścią
  • Routing po stronie klienta, nie w statycznym HTML
  • Powiązanie danych po załadowaniu strony
  • Wywołania API niekompletne przed wygenerowaniem pliku PDF

Jakie są ograniczenia Angulara po stronie klienta?

Treści dynamiczne pojawiające się po początkowym załadowaniu mogą nie zostać uchwycone bez odpowiedniej konfiguracji czasu oczekiwania. Ograniczenia:

  • Komponenty ładowane asynchronicznie
  • Moduły i trasy ładowane leniwie
  • Animacje i przejścia
  • Dynamiczne formularze i interakcje
  • Aktualizacje danych w czasie rzeczywistym

Użyj dłuższych czasów oczekiwania lub zaimplementuj window.ironpdf.notifyRender() w swojej aplikacji Angular.

Jak działa renderowanie po stronie serwera w Angular Universal?

Jaka jest różnica między Angular a Angular Universal?

Angular działa po stronie klienta w przeglądarce, renderując strony w DOM na podstawie działań użytkownika. Angular Universal działa po stronie serwera, generując statyczne strony uruchamiane po stronie klienta. Poprawia to ładowanie i umożliwia przeglądanie układu przed uzyskaniem pełnej interaktywności.

Różnice w generowaniu plików PDF:

  • Angular: Wymaga wykonywania kodu JavaScript
  • Angular Universal: zapewnia wstępnie wyrenderowany kod HTML
  • Wydajność: Universal renderuje szybciej
  • Niezawodność: Universal zapewnia dostępność treści

Kiedy warto wybrać Angular Universal do generowania plików PDF?

Użyj Angular Universal, aby zapewnić dynamiczne renderowanie treści bez zależności od JavaScript po stronie klienta. Idealny dla:

  • Raporty z danymi API
  • Dokumenty wymagające spójnego formatowania
  • Generowanie dużych ilości plików PDF
  • Złożone aplikacje Angular
  • Problemy związane z limitem czasu wykonywania kodu JavaScript

Angular Universal zapewnia renderowanie po stronie serwera przed konwersją do formatu IronPDF, co eliminuje problemy z synchronizacją i zwiększa niezawodność.

Często Zadawane Pytania

How do I enable JavaScript when converting HTML to PDF in C#?

To enable JavaScript in IronPDF, set the EnableJavaScript property to true in the rendering options: new ChromePdfRenderer { RenderingOptions = { EnableJavaScript = true } }. This allows IronPDF's Chromium engine to execute JavaScript during the conversion process.

What JavaScript libraries are supported for PDF conversion?

IronPDF supports all JavaScript libraries including jQuery, React, Vue.js, and Angular through its Chromium rendering engine. The library can process DOM manipulation, AJAX requests, and dynamic content generation just like a modern web browser would.

How do I handle JavaScript execution timing in PDF generation?

Use the WaitFor class in IronPDF's rendering options to control JavaScript execution timing. You can use WaitFor.JavaScript() with a maximum wait time (e.g., 500ms) to ensure JavaScript completes before PDF generation: WaitFor = IronPdf.Rendering.WaitFor.JavaScript(500).

Can I execute custom JavaScript code during HTML to PDF conversion?

Yes, IronPDF allows you to execute custom JavaScript code within your .NET C# application during the conversion process. You can inject JavaScript directly into the HTML string or use the rendering options to run custom scripts.

How do I capture JavaScript console messages during PDF rendering?

IronPDF provides a JavaScript message listener feature that allows you to capture console.log messages and other JavaScript output during the PDF rendering process. This is useful for debugging JavaScript execution.

What rendering engine does the library use for JavaScript support?

IronPDF uses the Chromium rendering engine, the same engine that powers Google Chrome. This ensures full JavaScript compatibility and accurate rendering of modern web technologies in your PDF documents.

Is there a free trial available for testing JavaScript to PDF conversion?

Yes, IronPDF offers a free trial that includes full JavaScript support. You can test all features including JavaScript execution, jQuery rendering, and dynamic content generation before purchasing a license.

Curtis Chau
Curtis Chau
  Czat z zespołem inżynierów teraz
Autor tekstów technicznych

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ę...

Czytaj więcej
Gotowy, aby rozpocząć?
Nuget Pliki do pobrania 18,135,201 | Wersja: 2026.4 just released
Still Scrolling Icon

Wciąż przewijasz?

Czy chcesz szybko dowodu? PM > Install-Package IronPdf
Uruchom przykład i zobacz, jak Twój kod HTML zamienia się w plik PDF.