Comment utiliser JavaScript avec HTML to PDF
JavaScript est un langage de programmation polyvalent de haut niveau, couramment utilisé pour le développement de sites web. Il permet aux développeurs d'ajouter des fonctions interactives et dynamiques aux sites web. en revanche, jQuery n'est pas un langage de programmation à part entière, mais plutôt une bibliothèque JavaScript. Il est conçu pour simplifier les tâches courantes en JavaScript, telles que la manipulation du DOM, la gestion des événements et les requêtes AJAX.
IronPDF prend en charge JavaScript de manière efficace grâce à la fonction Chrome moteur de rendu. Dans cet article, nous allons montrer comment utiliser JavaScript et jQuery dans la conversion de HTML en PDF dans les projets .NET C#. IronPDF fournit essai gratuit.
Comment utiliser JavaScript avec HTML to PDF
- Télécharger la bibliothèque C# pour convertir HTML en PDF
- Activer l'exécution de JavaScript à l'aide de l'option ActiverJavaScript propriété
- Rendu de HTML à PDF avec du code JavaScript entièrement pris en charge
- Exécuter un code JavaScript personnalisé dans .NET C#
- Écouter et capturer les messages de la console à partir de JavaScript
Installer avec NuGet
Install-Package IronPdf
Installer avec NuGet
Install-Package IronPdf
Commencez à utiliser IronPDF dans votre projet dès aujourd'hui avec un essai gratuit.
Découvrez IronPDF sur NuGet pour une installation rapide et un déploiement facile. Avec plus de 8 millions de téléchargements, il transforme PDF avec C#.
Envisagez d'installer le IronPDF DLL directement. Téléchargez et installez-le manuellement pour votre projet ou sous forme de GAC : {{lienDllAfficher}}
Exemple de rendu JavaScript
Les fonctionnalités JavaScript de HTML sont prises en charge lors de la conversion de HTML en PDF. Comme le rendu se fait sans délai, il se peut que JavaScript ne soit pas exécuté correctement. Dans la plupart des cas, il est conseillé de configurer l'option Attendre dans les Options de rendu pour laisser le temps à JavaScript de s'exécuter correctement. Dans le code suivant, j'ai utilisé WaitFor.JavaScript et spécifié un temps d'attente maximum de 500 ms.
:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-render-javascript.csusing 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")Certains frameworks JavaScript très complexes ne fonctionnent pas toujours à 100 % avec IronPDF for .NET. Cela est principalement dû à l'allocation limitée de mémoire pour l'exécution de JavaScript.
Exécuter un exemple JavaScript personnalisé
La propriété JavaScript dans les options de rendu est utilisée pour exécuter un JavaScript personnalisé avant le rendu de HTML en PDF. Ceci est très utile lorsque le rendu se fait à partir d'une URL où il n'est pas possible d'injecter du code JavaScript. Il suffit d'attribuer un code JavaScript à la propriété JavaScript des options de rendu.
:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-execute-javascript.csusing 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")Exemple d'écoute de messages en JavaScript
IronPDF vous permet également d'écouter les messages JavaScript qui ont été enregistrés dans la console. Les journaux d'erreurs et les messages personnalisés seront capturés par la bibliothèque. Utilisez la propriété JavascriptMessageListener pour cela. L'exemple de code ci-dessous illustre la journalisation du texte personnalisé et des erreurs.
:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-message-listener.csusing 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>")
Graphiques avec JavaScript et IronPDF
D3.js est parfaitement adapté à IronPDF lorsque vous souhaitez créer des graphiques ou des images.
D3.js ou, plus simplement, D3, est l'acronyme de Documents fondés sur des données. Il s'agit d'une bibliothèque JavaScript qui permet de créer des visualisations de données dynamiques et interactives dans les navigateurs web. D3 utilise Graphiques vectoriels évolutifs SVG en HTML5 et les feuilles de style en cascade (CSS3).
Pour créer un graphique à l'aide de D3.js et le convertir ensuite en document PDF, utilisez un code similaire au suivant :
- Créer un objet de rendu.
- Définir les propriétés JavaScript et CSS.
- Utilisez la méthode
RenderHTMLFileAsPdfde la bibliothèque IronPDF pour lire un fichier HTML (page web). - Il suffit de l'enregistrer au format PDF.
:path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-render-chart.csusing 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")Sortie PDF
Découvrez d'autres options WaitFor, telles que celles concernant les polices, JavaScript, les éléments HTML et l'inactivité du réseau, à l'adresse 'Comment utiliser la classe WaitFor pour retarder le rendu des PDF en C#.'
Angular JS HTML to PDF
Selon Wikipedia :
AngularJS est un framework web front-end open-source basé sur JavaScript, principalement maintenu par Google et par une communauté d'individus et d'entreprises pour répondre à de nombreux défis rencontrés dans le développement d'applications à page unique. Il vise à simplifier à la fois le développement et le test de ces applications en fournissant un cadre pour les applications modèle-vue-contrôleur côté client (MVC) et modèle-vue-vue modèle (MVVM) architectures, ainsi que les composants couramment utilisés dans les applications Internet riches
Angular doit cependant être utilisé avec précaution. Il est préférable de s'appuyer sur le rendu côté serveur (SSR) avec Angular Universal pour une compatibilité totale.
Rendu côté serveur (SSR) avec Angular Universal
Angular vs. Angular Universal
Une application Angular typique s'exécute dans le navigateur (côté client). Il rend les pages dans le DOM (Modèle d'objet de document) en fonction des actions de l'utilisateur.
Angular Universal s'exécute sur le serveur (côté serveur). Il génère des pages statiques qui sont ensuite amorcées sur le client. Il en résulte un rendu plus rapide de l'application Angular(s) et permet aux utilisateurs de visualiser la présentation de l'application avant qu'elle ne devienne totalement interactive.
