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#35;

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

<TODO : Ajouter une image ici -->

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 le HTML avec JavaScript en PDF dans .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.

Nuget IconCommencez dès maintenant à créer des PDF avec NuGet :

  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 grâce à 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. Activer l'exécution JavaScript : Utilisez la propriété EnableJavaScript
  3. Rendu de HTML en PDF : S'assurer que le code JavaScript est pris en charge
  4. Exécuter du JavaScript personnalisé : Au sein de votre code C# .NET
  5. Capturer les messages de la console : Utiliser un écouteur de messages 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 WaitFor dans les options de rendu pour tenir compte du temps d'exécution du JavaScript. Le code suivant utilise WaitFor.JavaScript avec un temps d'attente maximum de 500 ms. Pour plus de détails sur les temps d'attente et les retards de rendu, consultez notre guide sur l'utilisation de WaitFor pour retarder le rendu des PDF.

: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");
$vbLabelText   $csharpLabel

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. WaitFor propose des options pour garantir l'exécution complète de 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 devrais-je utiliser la méthode notifyRender?

La méthode window.IronPDF.notifyRender() signale que l'exécution de JavaScript est terminée, ce qui garantit 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 WaitFor.JavaScript pour un contrôle précis du rendu.

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é JavaScript dans les options de rendu pour exécuter un JavaScript personnalisé avant le rendu. Ceci est utile lors du rendu d'URL où l'injection de JavaScript n'est pas possible. Attribuez un code JavaScript à la propriété JavaScript 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");
$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é JavascriptMessageListener 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>");
$vbLabelText   $csharpLabel

Console de débogage affichant TypeError : Cannot read properties of null (reading 'style') avec la sortie de la console

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'auditeur capture les messages personnalisés de la 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?

<TODO : Ajouter une image ici -->

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 de rendu
  • Définir les propriétés JavaScript et CSS
  • Utilisez RenderHTMLFileAsPdf pour lire 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");
$vbLabelText   $csharpLabel

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 influe sur le temps de traitement
  • La durée de l'animation doit être de
  • Requêtes réseau pour les données asynchrones
  • La complexité du graphique augmente le traitement

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

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

  1. Augmenter le temps d'attente de JavaScript
  2. Utilisez WaitFor.NetworkIdle() 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
  • Le routage côté client n'est pas dans le HTML statique
  • Liaison des 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 itinéraires paresseux
  • Animations et transitions
  • Formulaires et interactions dynamiques
  • Mises à jour des données en temps réel

Utilisez des temps d'attente plus longs ou mettez en œuvre window.IronPDF.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 contenant des données API
  • Documents nécessitant une mise en forme cohérente
  • Génération de PDF en grande quantité
  • Applications Angular complexes
  • Problèmes de 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 17,012,929 | Version : 2025.12 vient de sortir