1. IronPDF
  2. Guides pratiques
  3. JavaScript (Délais de rendu personnalisé)
Comment utiliser Java Script avec HTML pour PDF en utilisant C#

How to use JavaScript with HTML to PDF

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

JavaScript est un langage de programmation de haut niveau, polyvalent, couramment utilisé dans le développement web. Il permet aux développeurs d'ajouter des fonctionnalités interactives et dynamiques aux sites web. jQuery, d'autre part, n'est pas un langage de programmation distinct mais plutôt une bibliothèque JavaScript conçue 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 efficacement via le moteur de rendu Chromium. Dans cet article, nous démontrerons comment utiliser JavaScript et jQuery dans la conversion de HTML en PDF dans des projets .NET C#. IronPDF propose une version d'essai gratuite d'IronPDF pour l'exploration.

Démarrage rapide : Convertir le HTML avec JavaScript en PDF dans .NET)

Convertissez facilement des pages HTML comprenant JavaScript en PDF à l'aide d'IronPDF dans vos projets .NET. Avec le support d'IronPDF pour le moteur de rendu Chromium, vous pouvez vous assurer que tous les éléments JavaScript sont traités avec précision. Cet exemple rapide montre comment rendre une page web en PDF, vous permettant d'intégrer facilement du contenu dynamique. Un simple appel de méthode est nécessaire pour rendre et enregistrer votre document PDF.

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(Aperçu : Flux de Travail Minimal (5 Étapes)

  1. Téléchargez la bibliothèque C# : Convertir HTML en PDF
  2. Activer l'exécution de JavaScript : Utilisez la propriété EnableJavaScript.
  3. Rendre de HTML à PDF : Assurez-vous que votre code JavaScript est entièrement pris en charge.
  4. Exécuter du JavaScript personnalisé : Dans votre code .NET C#.
  5. Capturer les messages de la console : En utilisant un écouteur de messages JavaScript.

Exemple de rendu JavaScript

Les fonctionnalités JavaScript en HTML sont prises en charge lors de la conversion de HTML en PDF. Comme le rendu se fait sans délai, JavaScript pourrait ne pas être exécuté correctement. Dans la plupart des cas, il est conseillé de configurer la classe WaitFor dans les options de rendu pour permettre à JavaScript de s'exécuter correctement. Dans le code suivant, WaitFor.JavaScript est utilisé pour spécifier 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")
$vbLabelText   $csharpLabel

Certains cadres JavaScript très complexes peuvent ne pas toujours fonctionner à 100% avec IronPDF et .NET en raison d'une allocation limitée de mémoire pour l'exécution de JavaScript.

Exemple d'exécution de JavaScript personnalisé

La propriété JavaScript dans les options de rendu est utilisée pour exécuter du JavaScript personnalisé avant de rendre le HTML en PDF. Ceci est très utile lors du rendu à partir d'une URL où il n'est pas possible d'injecter du code JavaScript. Attribuez simplement 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")
$vbLabelText   $csharpLabel

Exemple d'écouteur de messages JavaScript

IronPDF vous permet d'écouter les messages JavaScript qui ont été enregistrés dans la console. Les journaux d'erreurs ainsi que les messages de log personnalisés seront capturés par la bibliothèque. Utilisez la propriété JavascriptMessageListener pour capturer ces messages. L'exemple de code ci-dessous démontre la journalisation de texte et d'erreurs personnalisés.

: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

Fenêtre de la console

Créer des graphiques avec JavaScript & IronPDF

D3.js est un choix parfait pour IronPDF lorsque vous souhaitez créer des graphiques ou des images. 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).

Pour créer un graphique en utilisant D3.js puis le convertir en document PDF à l'aide d'IronPDF, suivez ce processus :

  • Créez un objet de rendu.
  • Définissez les propriétés JavaScript et CSS.
  • Utilisez la méthode RenderHTMLFileAsPdf pour lire un fichier HTML.
  • Sauvegardez-le en 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

PDF de sortie

Explorez plus d'options WaitFor, telles que celles pour les polices, JavaScript, les éléments HTML et l'inactivité réseau sur 'Comment utiliser la classe WaitFor pour retarder le rendu PDF C#.'

AngularJS HTML en PDF

AngularJS est un framework web front-end open-source basé sur JavaScript. Il simplifie le développement et le test d'applications monopage en utilisant les architectures modèle-vue-contrôleur (MVC) et modèle-vue-modèle (MVVM) côté client.

Pour une compatibilité complète, envisagez d'utiliser le rendu côté serveur (SSR) avec Angular Universal.

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), rendant les pages dans le DOM (Document Object Model) en fonction des actions de l'utilisateur. Angular Universal s'exécute sur le serveur (côté serveur) et génère des pages statiques qui sont initialisées sur le client. Cela améliore le temps de chargement et permet aux utilisateurs de voir la mise en page avant qu'elle ne devienne entièrement interactive.

Questions Fréquemment Posées

Comment puis-je convertir HTML avec JavaScript en PDF dans une application .NET ?

Vous pouvez utiliser la méthode `RenderHtmlAsPdf` de IronPDF pour convertir du contenu HTML avec JavaScript en PDFs. En activant l'exécution de JavaScript dans les options de rendu, vous pouvez vous assurer que le contenu dynamique est correctement traité pendant la conversion.

Quelles sont les étapes nécessaires pour activer l'exécution de JavaScript dans la conversion de HTML en PDF ?

Pour activer l'exécution de JavaScript dans IronPDF, définissez la propriété `EnableJavaScript` à `true` dans les options de rendu. Cela permet à la conversion en PDF de traiter tout JavaScript présent dans le HTML.

Comment puis-je m'assurer que mon code JavaScript s'exécute avant de convertir HTML en PDF ?

Utilisez la classe `WaitFor` dans IronPDF pour configurer les options de rendu et spécifiez le temps d'attente maximal pour l'exécution de JavaScript. Cela garantit que tous les scripts s'exécutent avant que le PDF ne soit généré, généralement en fixant un délai d'attente de 500 ms.

Est-il possible de capturer les messages de la console JavaScript lors de la conversion de HTML en PDF ?

Oui, vous pouvez capturer les messages de la console JavaScript en utilisant la propriété `JavascriptMessageListener` de IronPDF. Cette fonctionnalité vous permet de déboguer et d'enregistrer les messages de la console pendant le processus de rendu PDF.

IronPDF peut-il rendre des graphiques créés avec des bibliothèques JavaScript comme D3.js ?

Oui, IronPDF peut rendre des graphiques créés avec D3.js en activant l'exécution de JavaScript dans les options de rendu et en utilisant des méthodes comme `RenderHtmlFileAsPdf` pour convertir des fichiers HTML contenant des scripts de graphiques en PDFs.

Quels sont les défis potentiels lors de l'utilisation de JavaScript avec la conversion de HTML en PDF ?

Certains frameworks JavaScript complexes peuvent rencontrer des problèmes avec IronPDF en raison de contraintes de mémoire pendant l'exécution JavaScript. Il est recommandé de tester et d'optimiser les scripts pour assurer la compatibilité.

Comment le rendu côté serveur avec Angular Universal bénéficie-t-il à la conversion de HTML en PDF ?

L'utilisation d'Angular Universal pour le rendu côté serveur peut améliorer les performances en pré-rendant les pages sur le serveur. Cela améliore les temps de chargement et la compatibilité, permettant à IronPDF de convertir efficacement ces pages en PDF.

Comment puis-je exécuter du JavaScript personnalisé dans un processus de conversion HTML en PDF en .NET ?

Du JavaScript personnalisé peut être exécuté en définissant le code JavaScript dans la propriété `JavaScript` des options de rendu. Cela permet aux scripts d'être exécutés pendant le processus de conversion dans IronPDF.

Quelle est une approche recommandée pour gérer les pages lourdes en JavaScript lors de la conversion en PDF ?

Pour les pages chargées en JavaScript, envisagez d'utiliser des techniques de rendu côté serveur comme Angular Universal pour pré-rendre le contenu, en vous assurant qu'il est entièrement traité avant d'utiliser IronPDF pour la conversion. Cela aide à gérer les problèmes de performances et de mémoire.

Comment IronPDF prend-il en charge la conversion de HTML avec du contenu dynamique ?

IronPDF prend en charge la conversion de HTML avec du contenu dynamique en utilisant le moteur de rendu Chromium. Cela permet l'exécution de JavaScript et jQuery, garantissant que les éléments interactifs sont préservés dans le rendu PDF.

Curtis Chau
Curtis Chau
  Discutez maintenant avec l'équipe d'ingénierie
Rédacteur technique

Curtis Chau détient un baccalauréat en informatique (Université de Carleton) et se spécialise dans le développement front-end avec expertise en Node.js, TypeScript, JavaScript et React. Passionné par la création d'interfaces utilisateur intuitives et esthétiquement plaisantes, Curtis aime travailler avec des frameworks modernes ...

Lire la suite
Prêt à commencer?
Nuget Téléchargements 16,154,058 | Version : 2025.11 vient de sortir