Verwendung von JavaScript bei der Umwandlung von HTML in PDF

Chaknith Bin

25. Januar 2023

Aktualisiert 19. Februar 2025

Teilen Sie:

Translated

View the article in English

JavaScript ist eine hochentwickelte, vielseitige Programmiersprache, die häufig in der Webentwicklung verwendet wird. Es ermöglicht Entwicklern, interaktive und dynamische Funktionen zu Websites hinzuzufügen. jQuery hingegen ist keine eigene Programmiersprache, sondern eine JavaScript-Bibliothek. Es wurde entwickelt, um gängige Aufgaben in JavaScript zu vereinfachen, z. B. DOM-Manipulation, Ereignisbehandlung 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.

Erste Schritte mit IronPDF

Beginnen Sie noch heute mit der Verwendung von IronPDF in Ihrem Projekt mit einer kostenlosen Testversion.

Erster Schritt:

Verwendung von JavaScript mit HTML zu PDF

Laden Sie die C#-Bibliothek herunter, um HTML in PDF zu konvertieren
JavaScript-Ausführung mit der EnableJavaScript-Eigenschaft aktivieren
Von HTML zu PDF mit vollständig unterstütztem JavaScript-Code rendern
Benutzerdefinierten JavaScript-Code in .NET C# ausführen
Konsolennachrichten von JavaScript abhören und erfassen

JavaScript-Beispiel rendern

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

: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 nicht immer zu 100% mit IronPDF und .NET. Dies ist hauptsächlich auf die begrenzte Zuweisung von Speicher für die Ausführung von JavaScript zurückzuführen.

Benutzerdefiniertes JavaScript ausführen Beispiel

Die JavaScript-Eigenschaft in den Rendering-Optionen wird verwendet, um benutzerdefiniertes JavaScript auszuführen, bevor HTML in PDF gerendert wird. Dies ist sehr nützlich, wenn von einer URL gerendert wird, in die kein JavaScript-Code eingefügt werden kann. Weisen Sie einfach ein JavaScript-Code der JavaScript-Eigenschaft der Rendering-Optionen 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 Message Listener Beispiel

IronPDF ermöglicht es Ihnen auch, die JavaScript-Meldungen abzuhören, die auf der Konsole protokolliert wurden. Sowohl Fehlerprotokolle als auch benutzerdefinierte Protokollmeldungen werden von der Bibliothek aufgezeichnet. Verwenden Sie die JavascriptMessageListener-Eigenschaft dafür. Das nachstehende Codebeispiel veranschaulicht sowohl die Protokollierung von benutzerdefiniertem Text als auch von 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

Diagrammerstellung mit JavaScript und IronPDF

D3.js ist eine perfekte Ergänzung zu IronPDF, wenn Sie Diagramme oder Bilder erstellen möchten.

D3.js oder einfach D3 steht für Data-Driven Documents. Es handelt sich um eine JavaScript-Bibliothek, die bei der Erstellung dynamischer, interaktiver Datenvisualisierungen in Webbrowsern hilft. D3 verwendet Scalable Vector Graphics SVG in HTML5 und Cascading Style Sheets (CSS3).

Um ein Diagramm mit D3.js zu erstellen und es dann in ein PDF-Dokument zu konvertieren, verwenden Sie einen Code ähnlich dem folgenden:

Erstellen Sie ein Renderer-Objekt.
Legen Sie die JavaScript- und CSS-Eigenschaften fest.
Verwenden Sie die RenderHTMLFileAsPdf-Methode der IronPDF-Bibliothek, um eine HTML-Datei (Webseite) zu lesen.
Speichern Sie es einfach 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

Ausgabe PDF

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

Angular JS HTML zu PDF

Laut Wikipedia:

*AngularJS ist ein JavaScript-basiertes Open-Source-Frontend-Web-Framework, das hauptsächlich von Google und einer Gemeinschaft von Einzelpersonen und Unternehmen gepflegt wird, um viele der Herausforderungen zu bewältigen, die bei der Entwicklung von Single-Page-Anwendungen auftreten. Es zielt darauf ab, sowohl die Entwicklung als auch das Testen solcher Anwendungen zu vereinfachen, indem es ein Framework für clientseitige Model–View–Controller (MVC)- und Model–View–ViewModel (MVVM)-Architekturen bereitstellt, zusammen mit Komponenten, die häufig in Rich-Internet-Anwendungen verwendet werden.

Angular sollte jedoch mit Vorsicht verwendet werden. Es ist besser, sich auf serverseitiges Rendern (SSR) mit Angular Universal zu verlassen, um volle Kompatibilität zu gewährleisten.

Server-seitiges Rendering (SSR) mit Angular Universal

Angular vs. Angular Universal

Eine typische Angular-Anwendung läuft im Browser (clientseitig). Es rendert Seiten im DOM (Document Object Model) basierend auf Benutzeraktionen.

Angular Universal läuft auf dem Server (serverseitig). Es erzeugt statische Seiten, die später auf dem Client gebootstrapped werden. Dies führt zu einer schnelleren Darstellung der Angular-Anwendung(en) und ermöglicht es den Benutzern, das Anwendungs-Layout zu sehen, bevor es vollständig interaktiv wird.

Chaknith Bin

Jetzt mit dem Ingenieurteam chatten

Software-Ingenieur

Chaknith arbeitet an IronXL und IronBarcode. Er hat tiefgehende Expertise in C# und .NET und hilft, die Software zu verbessern und Kunden zu unterstützen. Seine Erkenntnisse aus Benutzerinteraktionen tragen zu besseren Produkten, Dokumentation und einem insgesamt besseren Erlebnis bei.