Comment utiliser JavaScript avec HTML pour PDF en C#35;

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");

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")

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](https://ironpdf.com/how-to/rendering-options/) 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](https://ironpdf.com/how-to/custom-logging/) 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](https://ironpdf.com/how-to/async/) pour le traitement de plusieurs documents. ```csharp :path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-execute-javascript.cs ``` ### 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. ```csharp :path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-message-listener.cs ``` [Console de débogage affichant TypeError : Cannot read properties of null (reading 'style') avec la sortie de la console](/static-assets/pdf/how-to/javascript-to-pdf/console.webp) ### 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? [D3.js](https://d3js.org/) fonctionne bien avec IronPDF pour la création de graphiques ou d'images. D3.js ([Data-Driven Documents](https://d3js.org/)) est une bibliothèque JavaScript pour les visualisations de données dynamiques et interactives utilisant [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics#) en [HTML5](https://en.wikipedia.org/wiki/HTML5) et CSS3. Consultez notre guide sur [le rendu des graphiques dans les PDF](https://ironpdf.com/examples/js-charts-to-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 ```csharp :path=/static-assets/pdf/content-code-examples/how-to/javascript-to-pdf-render-chart.cs ``` ### 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#](/how-to/waitfor/)' 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](https://ironpdf.com/examples/angular-to-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 - : 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é.