1. IronPDF
  2. Comment faire
  3. JavaScript (délais de rendu personnalisés)

Comment utiliser JavaScript avec HTML to PDF

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

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 fonctionChrome 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 un service deessai gratuit d'IronPDF pour l'exploration.

Commencez avec IronPDF

Commencez à utiliser IronPDF dans votre projet dès aujourd'hui avec un essai gratuit.

Première étape :
green arrow pointer

Comment utiliser JavaScript avec HTML to PDF

  1. Télécharger la bibliothèque C# pour convertir HTML en PDF
  2. Activer l'exécution de JavaScript à l'aide de l'option ActiverJavaScript propriété
  3. Rendu de HTML à PDF avec du code JavaScript entièrement pris en charge
  4. Exécuter un code JavaScript personnalisé dans .NET C#
  5. Écouter et capturer les messages de la console à partir de JavaScript

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'optionClasse WaitFor dans les options de rendu la traduction doit rester professionnelle et préserver la précision technique tout en expliquant les caractéristiques et les avantages de ces outils de développement. 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.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#

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.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#

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.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#
Fenêtre de la console

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 deDocuments 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 utiliseGraphiques vectoriels évolutifs SVG enHTML5 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 RenderHTMLFileAsPdf de 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.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#

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

D'après 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.