Wie man JavaScript mit HTML zu PDF in C# verwendet
IronPDF ermöglicht die Ausführung von JavaScript während der Konvertierung von HTML in PDF mithilfe der Chromium-Rendering-Engine. Konvertieren Sie dynamische Webinhalte einschließlich JavaScript und jQuery in PDF-Dokumente in .NET C#-Anwendungen mit Unterstützung für interaktive Elemente und dynamisches Rendering.
JavaScript ist eine hochentwickelte, vielseitige Programmiersprache, die in der Webentwicklung eingesetzt wird. Sie ermöglicht interaktive und dynamische Funktionen auf Websites. jQuery ist eine JavaScript-Bibliothek, die gängige Aufgaben wie DOM-Manipulation, Ereignisbehandlung und AJAX-Anfragen vereinfacht.
IronPDF unterstützt JavaScript durch die Chromium Rendering Engine. Dieser Artikel zeigt, wie JavaScript und jQuery bei der Konvertierung von HTML in PDF in .NET C#-Projekten verwendet werden können. IronPDF bietet eine kostenlose Testversion von IronPDF zum Testen an. Für das Debugging von HTML vor der Konvertierung lesen Sie bitte unseren Leitfaden zum Debugging von HTML mit Chrome.
Schnellstart: HTML mit JavaScript in .NET in PDF konvertieren
Konvertierung von HTML-Seiten, die JavaScript enthalten, in PDF mit IronPDF in .NET-Projekten. Dank der Unterstützung der Chromium-Rendering-Engine werden alle JavaScript-Elemente korrekt verarbeitet. Dieses Beispiel zeigt, wie man eine Webseite mit dynamischen Inhalten in eine PDF-Datei umwandelt. Mit einem einzigen Methodenaufruf wird Ihr PDF-Dokument gerendert und gespeichert.
-
Installieren Sie IronPDF mit NuGet Package Manager
PM > Install-Package IronPdf -
Kopieren Sie diesen Codeausschnitt und führen Sie ihn aus.
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"); -
Bereitstellen zum Testen in Ihrer Live-Umgebung
Beginnen Sie noch heute, IronPDF in Ihrem Projekt zu verwenden, mit einer kostenlosen Testversion
Wie richte ich den grundlegenden Arbeitsablauf ein?
- Laden Sie die C#-Bibliothek herunter: HTML in PDF konvertieren
- JavaScript Ausführung aktivieren : Verwenden Sie die Eigenschaft
EnableJavaScript - Rendering von HTML nach PDF: Sicherstellen, dass JavaScript-Code unterstützt wird
- Ausführen von benutzerdefiniertem JavaScript: Innerhalb Ihres .NET C# Codes
- Erfassen von Konsolenmeldungen: Einen JavaScript-Nachrichten-Listener verwenden
Wie rendere ich JavaScript bei der Konvertierung von HTML in PDF?
JavaScript in HTML wird bei der Konvertierung in PDF unterstützt. Da das Rendering sofort erfolgt, wird JavaScript möglicherweise nicht richtig ausgeführt. Konfigurieren Sie die Klasse WaitFor in den Rendering-Optionen, um JavaScript Ausführungszeit zu ermöglichen. Der folgende Code verwendet WaitFor.JavaScript mit einer maximalen Wartezeit von 500 ms. Weitere Informationen zu Wartezeiten und Rendering-Verzögerungen finden Sie in unserer Anleitung zur Verwendung von WaitFor zum Verzögern des PDF-Renderings .
: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")
Warum ist WaitFor für die JavaScript-Ausführung wichtig?
Komplexe JavaScript-Frameworks können aufgrund des begrenzten JavaScript-Ausführungsspeichers in .NET eine Anpassung der Speicherzuweisung erfordern. WaitFor bietet Optionen, um die vollständige Ausführung von JavaScript vor der PDF-Generierung sicherzustellen. Warten Sie auf die Ausführung von JavaScript, Netzwerk-Ruhezustände, HTML-Elemente oder benutzerdefinierte Render-Verzögerungen. Erfahren Sie mehr über die verfügbaren Rendering-Optionen zur Optimierung der PDF-Erzeugung.
Wann sollte ich die notifyRender-Methode verwenden?
Die Methode window.ironpdf.notifyRender() signalisiert, dass die JavaScript Ausführung abgeschlossen ist und gewährleistet so das korrekte Rendering-Timing für dynamische Inhalte. Verwenden Sie sie für asynchrone Vorgänge oder Animationen, die vor der PDF-Generierung abgeschlossen sein müssen. Die Methode funktioniert mit WaitFor.JavaScript Einstellungen für präzise Rendering-Steuerung.
Was sind häufige JavaScript-Rendering-Probleme?
Komplexe Frameworks können zusätzliche Wartezeit oder Speicherzuweisung erfordern. Häufige Probleme umfassen:
- Asynchrone Daten werden vor dem Rendern nicht geladen
- CSS-Animationen in der Übergangsphase aufgezeichnet
- JavaScript-Fehler, die das Rendering verhindern
- Speicherbeschränkungen bei umfangreichen Frameworks
Zur Fehlerbehebung sollten Sie die Benutzerdefinierte Protokollierung aktivieren, um Details zum Rendering-Prozess zu erfassen.
Wie kann ich benutzerdefiniertes JavaScript vor dem PDF-Rendering ausführen?
Verwenden Sie die Eigenschaft JavaScript in den Rendering-Optionen, um benutzerdefinierten JavaScript-Code vor dem Rendern auszuführen. Dies hilft bei der Darstellung von URLs, bei denen die Einbindung von JavaScript nicht möglich ist. Weisen Sie der Eigenschaft JavaScript der Rendering-Optionen den gewünschten JavaScript-Code zu. Dies lässt sich gut mit der asynchronen PDF-Erstellung für die Verarbeitung mehrerer Dokumente kombinieren.
: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")
Wann sollte ich eine benutzerdefinierte JavaScript-Injektion verwenden?
Die benutzerdefinierte JavaScript-Injektion funktioniert beim Rendern von URLs, bei denen eine Änderung des HTML-Quelltextes nicht möglich ist. Häufige Anwendungen:
- Ändern von Seiten Dritter vor der Konvertierung
- Hinzufügen von dynamischen Wasserzeichen oder Kopfzeilen
- Bedingtes Ein- und Ausblenden von Elementen
- Anpassen von Stilen für Drucklayouts
- Extrahieren und Reorganisieren von Inhalten
Welche Arten von DOM-Manipulationen kann ich durchführen?
Ändern Sie Stile, fügen Sie Elemente hinzu, ändern Sie Inhalte oder führen Sie Standard-DOM-Operationen vor dem Rendern durch. Beispiele:
- CSS-Eigenschaften für die Druckformatierung ändern
- Navigationselemente oder Werbung entfernen
- Seitenzahlen oder benutzerdefinierte Überschriften hinzufügen
- Umstrukturierung des Inhaltslayouts
- Einfügen zusätzlicher Daten oder Metadaten
Wie erfasse ich JavaScript-Konsolenmeldungen während der PDF-Erstellung?
IronPDF erfasst JavaScript-Konsolenmeldungen, einschließlich Fehlerprotokolle und benutzerdefinierte Meldungen. Verwenden Sie die Eigenschaft JavaScriptMessageListener, um Nachrichten zu erfassen. Dieses Beispiel zeigt die Protokollierung von benutzerdefiniertem Text und Fehlern.
: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>")

Warum sollte ich JavaScript-Konsolenmeldungen überwachen?
Die Konsolenüberwachung hilft beim Debuggen von JavaScript-Fehlern und beim Verfolgen der Ausführung während der PDF-Generierung. Unverzichtbar für:
- Identifizierung von JavaScript-Fehlern, die das Rendering verhindern
- Verfolgung des Fortschritts komplexer JavaScript-Operationen
- Debuggen von Timing-Problemen bei asynchronem Code
- Validierung der Ausführung von benutzerdefiniertem JavaScript
- Sammeln von JavaScript-Leistungskennzahlen
Welche Arten von Nachrichten können erfasst werden?
Der Listener erfasst benutzerdefinierte console.log-Meldungen und JavaScript-Fehler einschließlich:
- Konsolenausgaben: log(), info(), warn(), error()
- Ungefangene Ausnahmen und Laufzeitfehler
- Netzwerkfehler durch ausgefallene Ressourcen
- Warnungen vor der Veralterung von Browser-Engines
- Benutzerdefinierte Debugging-Informationen
Wie kann ich Diagramme mit JavaScript-Bibliotheken wie D3.js erstellen?
D3.js funktioniert gut mit IronPDF zur Erstellung von Diagrammen oder Bildern. D3.js (Data-Driven Documents) ist eine JavaScript-Bibliothek für dynamische, interaktive Datenvisualisierungen mit SVG in HTML5 und CSS3. In unserem Leitfaden zur Darstellung von Diagrammen in PDFs finden Sie weitere Beispiele für Diagrammbibliotheken.
So erstellen Sie ein D3.js-Diagramm und konvertieren es in PDF:
- Ein Renderer-Objekt erstellen
- Festlegen von JavaScript- und CSS-Eigenschaften
- Verwenden Sie
RenderHTMLFileAsPdf, um HTML zu lesen - Als PDF speichern
: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")
Welche Chart-Bibliotheken funktionieren am besten mit IronPDF?
JavaScript-Diagrammbibliotheken, die mit IronPDF kompatibel sind:
- Chart.js: Leichtgewichtig für einfache Diagramme
- Highcharts: Professionelle Diagramme mit Anpassungsmöglichkeiten
- D3.js: Maximale Flexibilität für Visualisierungen
- C3.js: D3-basierte wiederverwendbare Diagramme
- ApexCharts: Moderne Diagramme mit Leistung
Voraussetzung für den Erfolg ist die Fertigstellung des Diagramm-Renderings vor der PDF-Generierung unter Verwendung geeigneter Wartestrategien.
Wann sollte ich die Wartezeiten für das Rendering von Diagrammen anpassen?
Komplexe Diagramme mit Animationen oder großen Datensätzen erfordern längere Wartezeiten. Berücksichtigen Sie:
- Datenvolumen beeinflusst die Verarbeitungszeit
- Dauer der Animation muss vollständig sein
- Netzwerkanfragen für asynchrone Daten
- Komplexität des Diagramms erhöht die Verarbeitung
Wie kann ich Probleme bei der Darstellung von Diagrammen beheben?
Weitere WaitFor-Optionen finden Sie unter 'Wie man die WaitFor-Klasse verwendet, um das Rendering von C# PDF zu verzögern'. Schritte zur Fehlersuche:
- Erhöhung der JavaScript-Wartezeit
- Verwenden Sie
WaitFor.NetworkIdle()für asynchrones Laden - Animationen für die PDF-Ausgabe deaktivieren
- Konsole auf JavaScript-Fehler prüfen
- Testen Sie HTML zuerst im Browser
Wie konvertiere ich AngularJS-Anwendungen in PDF?
AngularJS ist ein JavaScript-basiertes Open-Source-Frontend-Framework. Es vereinfacht die Entwicklung von Single-Page-Anwendungen mit Client-seitigen MVC- und MVVM-Architekturen. Weitere Informationen finden Sie in unserem Angular zu PDF Code Beispiel.
Verwenden Sie aus Kompatibilitätsgründen Server-Side-Rendering (SSR) mit Angular Universal. Single-Page-Applikationen (SPAs) müssen aufgrund der dynamischen Inhaltsgenerierung nach dem ersten Laden besonders behandelt werden.
Warum ist serverseitiges Rendering für Angular PDFs wichtig?
Client-seitiges Angular kann aufgrund der JavaScript-Abhängigkeit des Browsers ohne SSR möglicherweise nicht richtig dargestellt werden. Herausforderungen:
- Minimaler anfänglicher HTML-Code mit dynamischem Inhalt
- Client-seitiges Routing nicht in statischem HTML
- Datenbindung nach dem Laden der Seite
- Unvollständige API-Aufrufe vor der PDF-Erzeugung
Was sind die Grenzen von Client-Side Angular?
Dynamische Inhalte werden nach dem ersten Laden möglicherweise nicht ohne die richtige Wartekonfiguration erfasst. Beschränkungen:
- Asynchron geladene Komponenten
- Lazy-loaded Module und Routen
- Animationen und Übergänge
- Dynamische Formulare und Interaktionen
- Datenaktualisierung in Echtzeit
Verwenden Sie längere Wartezeiten oder implementieren Sie window.ironpdf.notifyRender() in Ihrer Angular-Anwendung.
Wie funktioniert das serverseitige Rendering mit Angular Universal?
Was ist der Unterschied zwischen Angular und Angular Universal?
Angular wird clientseitig im Browser ausgeführt und rendert Seiten im DOM auf der Grundlage von Benutzeraktionen. Angular Universal wird serverseitig ausgeführt und erzeugt statische Seiten, die auf dem Client gebootstrapped werden. Dies verbessert den Ladevorgang und ermöglicht die Anzeige des Layouts vor der vollen Interaktivität.
Unterschiede bei der PDF-Erzeugung:
- Angular: Erfordert die Ausführung von JavaScript
- Angular Universal: Bietet vorgerendertes HTML
- Leistung: Universal rendert schneller
- Zuverlässigkeit: Universal gewährleistet die Verfügbarkeit der Inhalte
Wann sollte ich Angular Universal für die PDF-Erstellung wählen?
Verwenden Sie Angular Universal für garantiertes dynamisches Rendering von Inhalten ohne client-seitige JavaScript-Abhängigkeit. Ideal für:
- Berichte mit API-Daten
- Dokumente, die eine einheitliche Formatierung benötigen
- Hochvolumige PDF-Erstellung
- Komplexe Angular-Anwendungen
- Bedenken hinsichtlich der Zeitüberschreitung bei der JavaScript-Ausführung
Angular Universal gewährleistet das serverseitige Rendering vor der IronPDF-Konvertierung, wodurch Zeitprobleme vermieden und die Zuverlässigkeit verbessert werden.
Häufig gestellte Fragen
Wie aktiviere ich JavaScript bei der Konvertierung von HTML in PDF in C#?
Um JavaScript in IronPDF zu aktivieren, setzen Sie die Eigenschaft EnableJavaScript in den Rendering-Optionen auf true: new ChromePdfRenderer { RenderingOptions = { EnableJavaScript = true } }. Dadurch kann die Chromium-Engine von IronPDF JavaScript während des Konvertierungsprozesses ausführen.
Welche JavaScript-Bibliotheken werden für die PDF-Konvertierung unterstützt?
IronPDF unterstützt alle JavaScript-Bibliotheken, einschließlich jQuery, React, Vue.js und Angular durch seine Chromium-Rendering-Engine. Die Bibliothek kann DOM-Manipulationen, AJAX-Anfragen und die Generierung dynamischer Inhalte genau wie ein moderner Webbrowser verarbeiten.
Wie gehe ich bei der PDF-Generierung mit dem Timing der JavaScript-Ausführung um?
Verwenden Sie die WaitFor-Klasse in den Rendering-Optionen von IronPDF, um das Timing der JavaScript-Ausführung zu steuern. Sie können WaitFor.JavaScript() mit einer maximalen Wartezeit (z. B. 500 ms) verwenden, um sicherzustellen, dass JavaScript vor der PDF-Generierung abgeschlossen ist: WaitFor = IronPdf.Rendering.WaitFor.JavaScript(500).
Kann ich während der Konvertierung von HTML in PDF benutzerdefinierten JavaScript-Code ausführen?
Ja, IronPDF ermöglicht es Ihnen, während des Konvertierungsprozesses benutzerdefinierten JavaScript-Code innerhalb Ihrer .NET C#-Anwendung auszuführen. Sie können JavaScript direkt in den HTML-String einfügen oder die Rendering-Optionen verwenden, um benutzerdefinierte Skripts auszuführen.
Wie erfasse ich JavaScript-Konsolenmeldungen während des PDF-Renderings?
IronPDF bietet eine JavaScript Message Listener-Funktion, mit der Sie console.log-Meldungen und andere JavaScript-Ausgaben während des PDF-Rendering-Prozesses aufzeichnen können. Dies ist nützlich für die Fehlersuche bei der JavaScript-Ausführung.
Welche Rendering-Engine verwendet die Bibliothek für die JavaScript-Unterstützung?
IronPDF verwendet die Chromium-Rendering-Engine, die auch in Google Chrome zum Einsatz kommt. Dies gewährleistet volle JavaScript-Kompatibilität und die korrekte Darstellung moderner Webtechnologien in Ihren PDF-Dokumenten.
Gibt es eine kostenlose Testversion, um die Konvertierung von JavaScript in PDF zu testen?
Ja, IronPDF bietet eine kostenlose Testversion mit vollständiger JavaScript-Unterstützung. Sie können alle Funktionen einschließlich der JavaScript-Ausführung, des jQuery-Renderings und der Generierung dynamischer Inhalte testen, bevor Sie eine Lizenz erwerben.

