1. IronPDF
  2. Anleitungen
  3. JavaScript (Benutzerdefinierte Verzögerungen)
Wie man JavaScript mit HTML zu PDF mit C# verwendet

How to use JavaScript with HTML to PDF

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

JavaScript ist eine vielseitige, hochentwickelte Programmiersprache, die häufig in der Webentwicklung eingesetzt wird. Es ermöglicht Entwicklern, interaktive und dynamische Funktionen zu Websites hinzuzufügen. jQuery ist hingegen keine eigenständige Programmiersprache, sondern eine JavaScript-Bibliothek, die dazu dient, gängige Aufgaben in JavaScript zu vereinfachen, wie zum Beispiel DOM-Manipulation, Ereignisverarbeitung und AJAX-Anfragen.

IronPDF unterstützt JavaScript effizient über die Chromium Rendering-Engine. In diesem Artikel zeigen wir, wie man JavaScript und jQuery bei der HTML-zu-PDF-Konvertierung in .NET C#-Projekten verwendet. IronPDF bietet eine kostenlose Testversion von IronPDF zur Erkundung an.

Schnellstart: HTML mit JavaScript zu PDF in .NET konvertieren)

Konvertieren Sie HTML-Seiten, die JavaScript enthalten, einfach in PDF, indem Sie IronPDF in Ihren .NET-Projekten verwenden. Mit der Unterstützung von IronPDF für die Chromium Rendering-Engine können Sie sicherstellen, dass alle JavaScript-Elemente korrekt verarbeitet werden. Dieses schnelle Beispiel zeigt, wie man eine Webseite in ein PDF rendert, sodass Sie dynamische Inhalte mühelos integrieren können. Es ist nur ein einziger Methodenaufruf erforderlich, um Ihr PDF-Dokument zu rendern und zu speichern.

Nuget IconGet started making PDFs with NuGet now:

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Copy and run this code snippet.

    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. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer

as-heading:3(Übersicht: Minimaler Workflow (5 Schritte)

  1. Laden Sie die C#-Bibliothek herunter: HTML in PDF konvertieren
  2. JavaScript-Ausführung aktivieren: Verwenden Sie die EnableJavaScript-Eigenschaft.
  3. Von HTML zu PDF rendern: Stellen Sie sicher, dass Ihr JavaScript-Code vollständig unterstützt wird.
  4. Benutzerdefiniertes JavaScript ausführen: Innerhalb Ihres .NET C#-Codes.
  5. Konsolennachrichten erfassen: Mithilfe eines JavaScript-Nachrichtenlisteners.

JavaScript-Beispiel rendern

JavaScript-Funktionen in HTML werden bei der Konvertierung von HTML zu PDF unterstützt. Da das Rendern ohne Verzögerung erfolgt, wird JavaScript möglicherweise nicht korrekt ausgeführt. In den meisten Fällen wird empfohlen, die WaitFor-Klasse in den Renderoptionen zu konfigurieren, um JavaScript ausreichend Zeit zur Ausführung zu geben. Im folgenden Code wird WaitFor.JavaScript verwendet, um eine maximale Wartezeit von 500 ms festzulegen.

: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

Einige sehr komplexe JavaScript-Frameworks funktionieren möglicherweise nicht immer zu 100% mit IronPDF und .NET aufgrund begrenzter Speicherkapazitäten für die JavaScript-Ausführung.

Benutzerdefiniertes JavaScript-Beispiel ausführen

Die JavaScript-Eigenschaft in den Renderoptionen wird verwendet, um benutzerdefiniertes JavaScript vor dem Rendern von HTML zu PDF auszuführen. Dies ist sehr nützlich, wenn das Rendern von einer URL erfolgt, bei der es nicht möglich ist, JavaScript-Code einzubetten. Weisen Sie einfach der JavaScript-Eigenschaft der Renderoptionen einen JavaScript-Code zu.

: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

JavaScript-Nachrichtenlistener-Beispiel

IronPDF ermöglicht es Ihnen, den JavaScript-Nachrichten zuzuhören, die in der Konsole protokolliert wurden. Sowohl Fehlerprotokolle als auch benutzerdefinierte Protokollnachrichten werden von der Bibliothek erfasst. Verwenden Sie die JavascriptMessageListener-Eigenschaft, um diese Nachrichten zu erfassen. Das untenstehende Codebeispiel zeigt das Protokollieren 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>")
$vbLabelText   $csharpLabel

Konsolenfenster

Diagrammerstellung mit JavaScript & IronPDF

D3.js ist ideal mit IronPDF kompatibel, wenn Sie Diagramme oder Bilder erstellen möchten. D3.js, known as Data-Driven Documents, is a JavaScript library for creating dynamic, interactive data visualizations in web browsers using Scalable Vector Graphics (SVG) in HTML5 and Cascading Style Sheets (CSS3).

Um ein Diagramm mit D3.js zu erstellen und es dann in ein PDF-Dokument mit IronPDF zu konvertieren, folgen Sie diesem Prozess:

  • Erstellen Sie ein Renderer-Objekt.
  • Legen Sie JavaScript- und CSS-Eigenschaften fest.
  • Verwenden Sie die RenderHTMLFileAsPdf-Methode, um eine HTML-Datei zu lesen.
  • Speichern Sie es als 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

Ausgangs-PDF

Erkunden Sie weitere WaitFor-Optionen, wie z.B. für Schriftarten, JavaScript, HTML-Elemente und Netzwerkausfall bei 'How to Use the WaitFor Class to Delay C# PDF Rendering'.

AngularJS HTML zu PDF

AngularJS ist ein auf JavaScript basierendes, quelloffenes Front-End-Webframework. Es vereinfacht die Entwicklung und das Testen von Single-Page-Anwendungen mithilfe von clientseitigen Model-View-Controller (MVC)- und Model-View-Viewmodel (MVVM)-Architekturen.

Für vollständige Kompatibilität sollten Sie erwägen, serverseitiges Rendering (SSR) zusammen mit Angular Universal zu verwenden.

Server-seitiges Rendering (SSR) mit Angular Universal

Angular vs. Angular Universal

Eine typische Angular-Anwendung läuft im Browser (clientseitig) und rendert Seiten im DOM (Document Object Model) basierend auf Benutzeraktionen. Angular Universal läuft auf dem Server (serverseitig) und generiert statische Seiten, die auf dem Client bootstrapped werden. Dies verbessert die Ladezeit und ermöglicht es den Benutzern, das Layout zu sehen, bevor es vollständig interaktiv wird.

Häufig gestellte Fragen

Wie kann ich HTML mit JavaScript in einer .NET-Anwendung in PDF umwandeln?

Sie können die RenderHtmlAsPdf-Methode von IronPDF verwenden, um HTML-Inhalte mit JavaScript in PDFs zu konvertieren. Indem Sie die JavaScript-Ausführung in den Rendering-Optionen aktivieren, stellen Sie sicher, dass dynamische Inhalte während der Konvertierung richtig verarbeitet werden.

Welche Schritte sind notwendig, um die JavaScript-Ausführung in der HTML zu PDF Konvertierung zu aktivieren?

Um die JavaScript-Ausführung in IronPDF zu aktivieren, setzen Sie die EnableJavaScript-Eigenschaft innerhalb der Rendering-Optionen auf true. Dies ermöglicht es der PDF-Konvertierung, jegliches JavaScript im HTML zu verarbeiten.

Wie kann ich sicherstellen, dass mein JavaScript-Code vor der HTML zu PDF Konvertierung ausgeführt wird?

Verwenden Sie die WaitFor-Klasse in IronPDF, um die Rendering-Optionen zu konfigurieren und die maximale Wartezeit für die JavaScript-Ausführung anzugeben. Dies stellt sicher, dass alle Skripte ausgeführt werden, bevor das PDF generiert wird, wobei typischerweise eine Wartezeit von 500 ms festgelegt wird.

Ist es möglich, JavaScript-Konsolennachrichten während der HTML zu PDF Konvertierung zu erfassen?

Ja, Sie können JavaScript-Konsolennachrichten mit der JavascriptMessageListener-Eigenschaft von IronPDF erfassen. Diese Funktion ermöglicht es Ihnen, Konsolennachrichten während des PDF-Rendering-Prozesses zu debuggen und zu protokollieren.

Kann IronPDF Diagramme rendern, die mit JavaScript-Bibliotheken wie D3.js erstellt wurden?

Ja, IronPDF kann Diagramme rendern, die mit D3.js erstellt wurden, indem die JavaScript-Ausführung in den Rendering-Optionen aktiviert und Methoden wie RenderHtmlFileAsPdf verwendet werden, um HTML-Dateien mit Diagramm-Skripten in PDFs zu konvertieren.

Was sind einige potenzielle Herausforderungen bei der Verwendung von JavaScript mit der HTML zu PDF Konvertierung?

Einige komplexe JavaScript-Frameworks könnten aufgrund von Speicherbeschränkungen bei der JavaScript-Ausführung Probleme mit IronPDF haben. Es wird empfohlen, Skripte zu testen und zu optimieren, um die Kompatibilität sicherzustellen.

Wie profitiert das serverseitige Rendering mit Angular Universal von der HTML zu PDF-Konvertierung?

Die Verwendung von Angular Universal für serverseitiges Rendering kann die Leistung verbessern, indem Seiten auf dem Server vorgerendert werden. Dies verbessert die Ladezeiten und die Kompatibilität und ermöglicht es IronPDF, diese Seiten effektiv in PDFs zu konvertieren.

Wie kann ich benutzerdefiniertes JavaScript in einem .NET HTML zu PDF Konvertierungsprozess ausführen?

Benutzerdefiniertes JavaScript kann ausgeführt werden, indem das JavaScript in der JavaScript-Eigenschaft der Rendering-Optionen festgelegt wird. Dadurch können die Skripte während des Konvertierungsprozesses in IronPDF ausgeführt werden.

Was ist ein empfohlener Ansatz für die Handhabung von JavaScript-intensiven Seiten in der PDF-Konvertierung?

Für JavaScript-intensive Seiten sollten Sie serverseitige Rendering-Techniken wie Angular Universal verwenden, um Inhalte vorzurendern und sicherzustellen, dass sie vollständig verarbeitet werden, bevor IronPDF für die Konvertierung verwendet wird. Dies hilft, Leistungs- und Speicherprobleme zu verwalten.

Wie unterstützt IronPDF die Konvertierung von HTML mit dynamischen Inhalten?

IronPDF unterstützt die Konvertierung von HTML mit dynamischen Inhalten, indem die Chromium-Rendering-Engine eingesetzt wird. Dies ermöglicht die Ausführung von JavaScript und jQuery und stellt sicher, dass interaktive Elemente im PDF-Ausgang erhalten bleiben.

Curtis Chau
Curtis Chau
  Jetzt mit dem Ingenieurteam chatten
Technischer Autor

Curtis Chau hat einen Bachelor-Abschluss in Informatik von der Carleton University und ist spezialisiert auf Frontend-Entwicklung mit Expertise in Node.js, TypeScript, JavaScript und React. Leidenschaftlich widmet er sich der Erstellung intuitiver und ästhetisch ansprechender Benutzerschnittstellen und arbeitet gerne mit modernen Frameworks sowie der Erstellung gut strukturierter, optisch ansprechender ...

Weiterlesen
Bereit anzufangen?
Nuget Downloads 16,154,058 | Version: 2025.11 gerade veröffentlicht