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

Comment utiliser JavaScript avec HTML pour PDF en C

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

IronPDF permet l'exécution de JavaScript lors de la conversion de HTML en PDF grâce à son moteur de rendu Chromium. Convertissez du contenu web dynamique, notamment JavaScript et jQuery, en documents PDF dans des applications .NET C# avec prise en charge des éléments interactifs et du rendu dynamique.

JavaScript est un langage de programmation polyvalent de haut niveau utilisé dans le développement web. Ces outils permettent de créer des fonctions interactives et dynamiques sur les sites web. jQuery est une bibliothèque JavaScript qui simplifie les tâches courantes telles que la manipulation du DOM, la gestion des événements et les requêtes AJAX.

IronPDF prend en charge JavaScript grâce au moteur de rendu Chromium. Cet article montre comment utiliser JavaScript et jQuery dans la conversion de HTML en PDF dans les projets .NET C#. IronPDF fournit une évaluation gratuite d'IronPDF à des fins de test. Pour déboguer le HTML avant la conversion, consultez notre guide sur le débogage du HTML avec Chrome.

Démarrage rapide : Convertir du HTML en PDF avec JavaScript en .NET

Convertissez des pages HTML qui incluent du JavaScript en PDF à l'aide d'IronPDF for .NET dans le cadre de projets .NET. Grâce à la prise en charge du moteur de rendu Chromium, tous les éléments JavaScript sont traités avec précision. Cet exemple montre comment convertir une page web en PDF avec un contenu dynamique. Un seul appel de méthode permet de rendre et d'enregistrer votre document PDF.

  1. Installez IronPDF avec le Gestionnaire de Packages NuGet

    PM > Install-Package IronPdf

  2. Copiez et exécutez cet extrait de code.

    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. Déployez pour tester sur votre environnement de production.

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

    arrow pointer

Comment configurer le flux de travail de base?

  1. Téléchargez la bibliothèque C# : Convertir HTML en PDF
  2. EnableJavaScript propriété
  3. RenderFromHtmlToPdf : S'assurer que le code JavaScript est pris en charge
  4. Exécutez du JavaScript personnalisé : Dans votre code .NET C#
  5. Capturez les messages de la console : En utilisant un écouteur de message JavaScript

Comment rendre JavaScript lors de la conversion de HTML en PDF?

JavaScript en HTML est pris en charge lors de la conversion en PDF. Le rendu étant immédiat, il se peut que JavaScript ne s'exécute pas correctement. Configurez la classe RenderingOptions dans les options de rendu pour autoriser l'exécution de JavaScript. Le code suivant utilise WaitFor avec un temps d'attente maximal de 500 ms. Pour plus de détails sur les temps d'attente et les délais de rendu, consultez notre guide sur l'utilisation de WaitFor pour retarder le rendu PDF/A.

WaitFor
WaitFor

Pourquoi WaitFor est-il important pour l'exécution de JavaScript ?

Les frameworks JavaScript complexes peuvent nécessiter des ajustements d'allocation de mémoire en raison de la mémoire d'exécution JavaScript limitée dans .NET. RenderingOptions offre des options permettant de garantir l'exécution complète du JavaScript avant la génération du PDF. Attendre l'exécution de JavaScript, les états d'inactivité du réseau, les éléments HTML ou les délais de rendu personnalisés. Découvrez les options de rendu disponibles pour optimiser la génération de PDF.

Quand dois-je utiliser la méthode notifyRender ?

La méthode notifyRender signale que l'exécution JavaScript est terminée, garantissant ainsi un timing de rendu correct pour le contenu dynamique. Utilisez-le pour les opérations asynchrones ou les animations qui doivent être terminées avant la génération du PDF. La méthode fonctionne avec les paramètres notifySettings pour un contrôle précis du rendu.

CustomJavaScript
InjectJavaScript
CaptureConsoleMessages

Quels sont les problèmes de rendu JavaScript les plus courants ?

Les cadres complexes peuvent nécessiter un temps d'attente ou une allocation de mémoire supplémentaire. Les problèmes courants incluent :

  • Les données asynchrones ne se chargent pas avant le rendu
  • Animations CSS capturées à mi-parcours
  • Erreurs JavaScript empêchant le rendu
  • Contraintes de mémoire avec des frameworks lourds

Pour le dépannage, activez la journalisation personnalisée pour capturer les détails du processus de rendu.

Comment exécuter un JavaScript personnalisé avant le rendu du PDF?

Utilisez la propriété CustomJavaScript dans les options de rendu pour exécuter du code JavaScript personnalisé avant le rendu. Ceci est utile lors du rendu d'URL où l'injection de JavaScript n'est pas possible. Attribuez le code JavaScript à la propriété BeforeRendering des options de rendu. À combiner avec async PDF generation pour le traitement de plusieurs documents.

: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

Quand devrais-je utiliser l'injection JavaScript personnalisée ?

L'injection personnalisée de JavaScript fonctionne lors du rendu d'URL lorsqu'il n'est pas possible de modifier le code HTML source. Utilisations courantes :

  • Modification de pages tierces avant la conversion
  • Ajout de filigranes ou d'en-têtes dynamiques
  • Masquer ou afficher des éléments de manière conditionnelle
  • Ajustement des styles pour les mises en page d'impression
  • Extraction et réorganisation du contenu

Quels types de manipulations du DOM puis-je effectuer?

Modifier les styles, ajouter des éléments, changer le contenu ou effectuer des opérations DOM standard avant le rendu. Exemples :

  • Modifier les propriétés CSS pour le formatage de l'impression
  • Supprimer les éléments de navigation ou les publicités
  • Ajouter des numéros de page ou des en-têtes personnalisés
  • Restructurer la mise en page du contenu
  • Injecter des données ou des métadonnées supplémentaires

Comment capturer les messages de la console JavaScript lors de la génération d'un PDF ?

IronPDF capture les messages de la console JavaScript, y compris les journaux d'erreurs et les messages personnalisés. Utilisez la propriété ConsoleListener pour capturer les messages. Cet exemple montre l'enregistrement d'un texte personnalisé et d'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>")
$vbLabelText   $csharpLabel

Console de débogage affichant TypeError : Impossible de lire les propriétés de null (lecture de

Pourquoi surveiller les messages de la console JavaScript?

La surveillance de la console permet de déboguer les erreurs JavaScript et de suivre l'exécution pendant la génération de PDF. Essentiel pour :

  • Identifier les erreurs JavaScript qui empêchent le rendu
  • Suivi de la progression d'opérations JavaScript complexes
  • Débogage des problèmes de synchronisation du code asynchrone
  • Validation de l'exécution personnalisée de JavaScript
  • Collecte de mesures de performance JavaScript

Quels types de messages peuvent être capturés?

L'écouteur capture les messages personnalisés console.log et les erreurs JavaScript, notamment :

  • Sorties console : log(), info(), warn(), error()
  • Exceptions non prises et erreurs d'exécution
  • Erreurs de réseau dues à des ressources défaillantes
  • Avertissements de dépréciation du moteur de navigation
  • Informations sur le débogage personnalisé

Comment créer des graphiques avec des bibliothèques JavaScript comme D3.js?

D3.js fonctionne bien avec IronPDF pour la création de graphiques ou d'images. D3.js (Data-Driven Documents) est une bibliothèque JavaScript pour les visualisations de données dynamiques et interactives utilisant SVG en HTML5 et CSS3. Consultez notre guide sur le rendu des graphiques dans les PDF pour d'autres exemples de bibliothèques de graphiques.

Pour créer un graphique D3.js et le convertir en PDF :

  • Créer un objet renderer
  • Définir les propriétés JavaScript et CSS
  • Utilisez HtmlToPdf pour lire le code HTML
  • 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")
$vbLabelText   $csharpLabel

EnableJavaScript
WaitFor
WaitFor.JavaScript
window.ironpdf.notifyRender()
WaitFor.JavaScript
JavaScript
JavaScript
JavaScriptMessageListener
RenderHTMLFileAsPdf
WaitFor.NetworkIdle()
window.ironpdf.notifyRender()

Quelles sont les bibliothèques de graphiques qui fonctionnent le mieux avec IronPDF?

Bibliothèques de graphiques JavaScript compatibles avec IronPDF :

  • Chart.js : Léger pour les graphiques de base
  • Highcharts : Des graphiques professionnels avec personnalisation
  • D3.js : Une flexibilité maximale pour les visualisations
  • C3.js : Graphiques réutilisables basés sur D3
  • ApexCharts : Des graphiques modernes et performants

Pour réussir, il faut que le rendu des graphiques soit terminé avant la génération du PDF en utilisant des stratégies d'attente appropriées.

Quand dois-je ajuster les temps d'attente pour le rendu des graphiques?

Les graphiques complexes comportant des animations ou des ensembles de données volumineux nécessitent des délais d'attente plus longs. À prendre en compte :

  • Le volume de données affecte le temps de traitement
  • La durée de l'animation doit être complète
  • Requêtes réseau pour des données asynchrones
  • La complexité du graphique augmente le traitement

Comment résoudre les problèmes de rendu des graphiques?

Consultez " Comment utiliser la classe WaitFor pour retarder le rendu PDF en C# " pour plus d'options WaitFor. Étapes de dépannage :

  1. Augmenter le temps d'attente JavaScript
  2. Utilisez HtmlToPdfAsync pour le chargement asynchrone
  3. Désactiver les animations pour la sortie PDF
  4. Vérifier la console pour les erreurs JavaScript
  5. Testez d'abord le HTML dans le navigateur

Comment convertir des applications AngularJS en PDF?

AngularJS est un framework front-end open-source basé sur JavaScript. Il simplifie le développement d'applications à page unique en utilisant les architectures MVC et MVVM côté client. Consultez notre Exemple de code IronPDF vers PDF pour plus de détails.

Pour des raisons de compatibilité, utilisez le rendu côté serveur (SSR) avec Angular Universal. Les applications à page unique (SPA) nécessitent un traitement particulier en raison de la génération de contenu dynamique après le chargement initial.

Pourquoi le rendu côté serveur est-il important pour les PDF Angular?

Le rendu d'Angular côté client peut ne pas être correct sans SSR en raison de la dépendance JavaScript du navigateur. Défis à relever :

  • HTML initial minimal avec contenu dynamique
  • Routage côté client non dans le HTML statique
  • Liaisons de données après le chargement de la page
  • Appels API incomplets avant la génération du PDF

Quelles sont les limites d'Angular côté client ?

Le contenu dynamique après le chargement initial peut ne pas être capturé sans une configuration d'attente appropriée. Limites :

  • Composants chargés de manière asynchrone
  • Modules et routes chargés paresseusement
  • Animations et transitions
  • Formulaires dynamiques et interactions
  • Mises à jour de données en temps réel

Utilisez des délais d'attente plus longs ou implémentez NotifyRender dans votre application Angular.

Comment fonctionne le rendu côté serveur avec Angular Universal?

Quelle est la différence entre Angular et Angular Universal?

Angular fonctionne côté client dans le navigateur, rendant les pages dans le DOM en fonction des actions de l'utilisateur. Angular Universal fonctionne côté serveur, générant des pages statiques amorcées sur le client. Cela améliore le chargement et permet la visualisation de la mise en page avant l'interactivité complète.

Différences de génération de PDF :

  • Angular : Nécessite l'exécution de JavaScript
  • Angular Universal : Fournit du HTML pré-rendu
  • Performance : Universal rend plus rapidement
  • <Fiabilité : Universal garantit la disponibilité du contenu

Quand choisir Angular Universal pour la génération de PDF?

Utilisez Angular Universal pour un rendu de contenu dynamique garanti sans dépendance JavaScript côté client. Idéal pour :

  • Rapports avec des données d'API
  • Documents nécessitant un formatage cohérent
  • Génération de PDF à haut volume
  • Applications Angular complexes
  • Préoccupations concernant le délai d'exécution du JavaScript

Angular Universal assure le rendu côté serveur avant la conversion IronPDF, ce qui élimine les problèmes de synchronisation et améliore la fiabilité.

Questions Fréquemment Posées

Comment activer JavaScript lors de la conversion de HTML en PDF dans C# ?

Pour activer JavaScript dans IronPDF, définissez la propriété EnableJavaScript sur true dans les options de rendu : new ChromePdfRenderer { RenderingOptions = { EnableJavaScript = true } }. Cela permet au moteur Chromium d'IronPDF d'exécuter JavaScript pendant le processus de conversion.

Quelles sont les bibliothèques JavaScript prises en charge pour la conversion PDF ?

IronPDF prend en charge toutes les bibliothèques JavaScript, notamment jQuery, React, Vue.js et Angular, grâce à son moteur de rendu Chromium. La bibliothèque peut traiter la manipulation du DOM, les requêtes AJAX et la génération de contenu dynamique comme le ferait un navigateur web moderne.

Comment gérer les délais d'exécution de JavaScript lors de la génération de PDF ?

Utilisez la classe WaitFor dans les options de rendu d'IronPDF pour contrôler la synchronisation de l'exécution de JavaScript. Vous pouvez utiliser WaitFor.JavaScript() avec un temps d'attente maximum (par exemple, 500 ms) pour vous assurer que JavaScript se termine avant la génération du PDF : WaitFor = IronPdf.Rendering.WaitFor.JavaScript(500).

Puis-je exécuter un code JavaScript personnalisé pendant la conversion de HTML en PDF ?

Oui, IronPDF vous permet d'exécuter un code JavaScript personnalisé au sein de votre application .NET C# pendant le processus de conversion. Vous pouvez injecter du JavaScript directement dans la chaîne HTML ou utiliser les options de rendu pour exécuter des scripts personnalisés.

Comment capturer les messages de la console JavaScript pendant le rendu du PDF ?

IronPDF offre une fonction d'écoute des messages JavaScript qui vous permet de capturer les messages console.log et d'autres sorties JavaScript pendant le processus de rendu PDF. Cette fonction est utile pour déboguer l'exécution de JavaScript.

Quel moteur de rendu la bibliothèque utilise-t-elle pour la prise en charge de JavaScript ?

IronPDF utilise le moteur de rendu Chrome, le même que celui de Google Chrome. Cela garantit une compatibilité totale avec JavaScript et un rendu précis des technologies web modernes dans vos documents PDF.

Existe-t-il une version d'essai gratuite pour tester la conversion de JavaScript en PDF ?

Oui, IronPDF propose une version d'essai gratuite qui inclut une prise en charge complète de JavaScript. Vous pouvez tester toutes les fonctionnalités, y compris l'exécution JavaScript, le rendu jQuery et la génération de contenu dynamique, avant d'acheter une licence.

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 19,014,616 | Version : 2026.5 just released
Still Scrolling Icon

Vous faites encore défiler ?

Vous voulez une preuve rapidement ? PM > Install-Package IronPdf
exécuter un échantillon Regardez votre code HTML se transformer en PDF.