JS personnalisé

Dernière mise à jour le 23 mars 2026

Le builder vous permet d’ajouter du JavaScript global à votre modèle pour une logique personnalisée, des calculs ou l’intégration de bibliothèques tierces. Vous pouvez également exécuter des scripts en ligne dans des blocs HTML individuels et charger des bibliothèques JS externes depuis des URL CDN.

L’éditeur JavaScript

Cliquez sur le bouton Custom JS dans la barre d’outils en haut du canevas pour ouvrir l’éditeur JavaScript global. Écrivez votre code et appuyez sur Ctrl+Entrée (ou Cmd+Entrée sur Mac) pour enregistrer.

L’éditeur JavaScript avec un exemple de code

Le code dans l’éditeur Custom JS s’exécute dans le contexte du modèle lors du rendu du document. C’est ici que vous définissez les fonctions utilitaires, formatez les valeurs ou mettez en place toute logique dont votre modèle a besoin.

Rendre les fonctions accessibles au modèle

Pour qu’une fonction ou une variable soit utilisable dans les liaisons de propriétés ou les blocs HTML, assignez-la à window :

// Formater un montant en devise
window.formatCurrency = function (amount, currency) {
  return new Intl.NumberFormat('fr-FR', {
    style: 'currency',
    currency: currency || 'EUR',
  }).format(amount);
};

// Formater une date
window.formatDate = function (dateString) {
  return new Date(dateString).toLocaleDateString('fr-FR', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });
};

Une fois définies sur window, ces fonctions peuvent être appelées depuis les liaisons ailleurs dans le modèle (par exemple, en liant le contenu d’un bloc Text à formatCurrency(invoice.total)).

Gardez votre Custom JS concentré sur les fonctions utilitaires et le formatage de données. Les calculs lourds ou la manipulation du DOM peuvent ralentir la génération des documents.

Scripts dans les blocs HTML

Le bloc HTML dispose d’un bouton bascule dédié pour l’exécution des scripts en ligne. Sélectionnez un bloc HTML, ouvrez l’onglet Settings et activez Run scripts in editor.

Le panneau Settings d’un bloc HTML montrant le bouton bascule Run scripts in editor

Lorsqu’il est activé, toutes les balises <script> à l’intérieur du contenu du bloc HTML s’exécutent lors du rendu. C’est utile pour une logique spécifique au bloc qui n’a pas sa place dans l’éditeur Custom JS global.

<div id="chart-container"></div>
<script>
  // Ceci ne s'exécute que si "Run scripts in editor" est activé
  const ctx = document.getElementById('chart-container');
  // ... afficher un graphique ou exécuter une logique spécifique au bloc
</script>
Les scripts dans les blocs HTML s’exécutent indépendamment de l’éditeur Custom JS global. Si un script de bloc HTML dépend d’une fonction de l’éditeur global, assurez-vous que le script global l’assigne à window pour qu’elle soit accessible.

Bibliothèques JavaScript externes

Pour les bibliothèques tierces, utilisez le gestionnaire External Assets (Ressources externes). Cliquez sur le bouton External Assets dans la barre d’outils, puis ajoutez l’URL CDN de la bibliothèque JavaScript que vous souhaitez inclure.

L’éditeur External Assets avec une URL CDN JavaScript

Les scripts externes sont chargés avant le rendu du modèle, donc leurs variables et fonctions globales sont disponibles aussi bien pour l’éditeur Custom JS que pour les scripts des blocs HTML.

Exemples courants :

BibliothèqueURL CDNCas d’utilisation
Chart.jshttps://cdn.jsdelivr.net/npm/chart.jsGraphiques et diagrammes
Day.jshttps://cdn.jsdelivr.net/npm/dayjsFormatage de dates
Les ressources externes nécessitent une connexion internet pendant la génération des documents. Vérifiez que vos URL CDN sont accessibles publiquement et renvoient la version attendue de la bibliothèque.

Différence avec les modèles Code

Dans les modèles Code, le JavaScript est intégré directement dans des balises <script> au sein du HTML. Le builder sépare le JavaScript en trois emplacements distincts :

  • Les scripts globaux vont dans l’éditeur Custom JS (bouton de la barre d’outils) et s’exécutent pour l’ensemble du modèle
  • Les scripts spécifiques aux blocs vont dans les blocs HTML avec le bouton bascule « Run scripts in editor » activé
  • Les bibliothèques externes sont chargées via le gestionnaire External Assets

Cette séparation permet d’organiser la logique globale, le comportement par bloc et les dépendances tierces. Pour les fonctions de formatage globales, utilisez l’éditeur Custom JS. Pour le rendu spécifique à un bloc (comme les graphiques), utilisez un bloc HTML avec les scripts activés. Pour les bibliothèques, utilisez External Assets au lieu de balises <script src="..."> manuelles.

Pages associées

  • CSS personnalisée — styles globaux, propriétés personnalisées par élément et bibliothèques CSS externes

Questions fréquentes

Comment ajouter du JavaScript personnalisé à un modèle builder PDFMonkey ?
Cliquez sur le bouton Custom JS dans la barre d’outils du builder pour ouvrir l’éditeur JavaScript global. Écrivez votre code et appuyez sur Ctrl+Entrée (Cmd+Entrée sur Mac) pour enregistrer. Les fonctions assignées à window sont disponibles dans les liaisons et les blocs HTML du modèle.
Peut-on utiliser des bibliothèques JavaScript externes dans les modèles PDFMonkey ?
Oui. Cliquez sur le bouton External Assets dans la barre d’outils et ajoutez l’URL CDN de la bibliothèque que vous souhaitez inclure. Les scripts externes se chargent avant le rendu du modèle, leurs fonctions sont donc disponibles à la fois dans l’éditeur Custom JS et dans les scripts des blocs HTML.
Comment exécuter des scripts en ligne dans un bloc HTML du builder PDFMonkey ?
Sélectionnez le bloc HTML, ouvrez l’onglet Settings et activez le bouton bascule « Run scripts in editor ». Les balises script à l’intérieur de ce bloc s’exécuteront alors pendant le rendu. Sans cette option, les scripts ne s’exécutent que lors de la génération du PDF, pas dans l’aperçu de l’éditeur.
Navigation