Verwendung von JavaScript bei der Umwandlung von HTML in PDF

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 dieChrom rendering-Engine. In diesem Artikel zeigen wir Ihnen, wie Sie JavaScript und jQuery bei der Konvertierung von HTML in PDF in .NET C#-Projekten einsetzen können. IronPDF bietet einekostenlose Testversion von IronPDF zur Erkundung.

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 zur Konvertierung von HTML in PDF herunter
Aktivieren Sie die Ausführung von JavaScript mit der Option EnableJavaScript eigenschaft
Rendering von HTML in PDF mit vollständig unterstütztem JavaScript-Code
Ausführen von benutzerdefiniertem JavaScript-Code in .NET C#
Abhören und Erfassen von Konsolenmeldungen von JavaScript

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 ist es ratsam, dieWaitFor-Klasse in Rendering-Optionen um JavaScript Zeit für die korrekte 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")

VB C#

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

VB C#

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 dazu die Eigenschaft JavascriptMessageListener. 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>")

VB C#

Diagrammerstellung mit JavaScript und IronPDF

D3.js ist die perfekte Ergänzung für IronPDF, wenn Sie Diagramme oder Bilder erstellen möchten.

D3.js oder einfach D3, steht fürDatengesteuerte Dokumente. Es handelt sich um eine JavaScript-Bibliothek, die bei der Erstellung dynamischer, interaktiver Datenvisualisierungen in Webbrowsern hilft. D3 verwendetSkalierbare Vektorgrafiken SVG inHTML5 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 Methode "RenderHTMLFileAsPdf" der IronPDF-Bibliothek, um eine HTML-Datei zu lesen(web-Seite).
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")

VB C#

Ausgabe PDF

Weitere WaitFor-Optionen, z. B. für Schriftarten, JavaScript, HTML-Elemente und Netzwerk-Idle, finden Sie unter 'Verwenden der WaitFor-Klasse zum Verzögern der 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 Client-seitige Model-View-Controller(MVC) und Modell-Ansicht-Ansicht-Modell(MVVM) architekturen sowie Komponenten, die üblicherweise in Rich-Internet-Anwendungen verwendet werden.

Angular sollte jedoch mit Vorsicht verwendet werden. Es ist besser, sich auf serverseitiges Rendering zu verlassen(SSR) mit Angular Universal für volle Kompatibilität.

Server-seitiges Rendering (SSR) mit Angular Universal

Angular vs. Angular Universal

Eine typische Angular-Anwendung läuft im Browser(client-seitig). Es rendert Seiten im DOM(Dokument-Objektmodell) auf der Grundlage von Benutzeraktionen.

Angular Universal läuft auf dem Server(server-seitig). Es erzeugt statische Seiten, die später auf dem Client gebootstrapped werden. Dies führt zu einem schnelleren Rendering der Angular-Anwendung(s) und ermöglicht es den Benutzern, das Anwendungslayout zu betrachten, bevor es vollständig interaktiv wird.