Générer un PDF

1. Introduction à la Génération de PDF​

Le module Générer un PDF est une fonctionnalité puissante qui permet de créer des documents PDF dynamiques et basés sur des données. Ces documents peuvent être remplis avec des variables et des tableaux dynamiques, ce qui les rend idéaux pour générer des rapports, des factures, des certificats, et plus encore. Les PDF peuvent être générés à la fois dans le Modélisateur de Processus et dans le Modélisateur Web, offrant une flexibilité pour divers cas d'utilisation.

2. Création d'un Modèle de PDF​

La première étape consiste à concevoir un modèle réutilisable. Ce modèle définit la structure, la mise en page et le contenu statique de votre PDF.

Pour commencer, naviguez vers la section PDF et cliquez sur le bouton Créer un PDF.

2.1. L'Interface de l'Éditeur de PDF​

L'éditeur est composé de deux parties principales : une barre d'outils en haut et la zone d'édition principale en dessous.

2.1.1. Explication de la Barre d'Outils​

La barre d'outils fournit tous les outils nécessaires pour concevoir votre modèle :

• Marge Intérieure (Padding) : Ajustez l'espace entre le contenu et le bord de la page.
  • Haut, Bas, Gauche, Droite : Ces propriétés basées sur CSS contrôlent la marge intérieure pour chaque côté du modèle.
• Insérer un Tableau : Vous permet d'ajouter un tableau avec un nombre spécifié de lignes et de colonnes.
• Insérer une Image : Vous pouvez intégrer des images soit à partir d'une URL, soit en téléversant un fichier depuis votre machine locale.
• Insérer du HTML : Pour les utilisateurs avancés, cela ouvre un éditeur pour insérer des éléments HTML personnalisés directement dans le modèle.
• Mise en Forme du Texte : Un riche ensemble d'options pour formater le texte :
  • Titres (H1, H2, etc.)
  • Alignement du texte (gauche, centre, droite)
  • Mise en valeur (Gras, Italique)
  • Propriétés de la police (taille, famille, couleur et couleur de fond).
• Types de Listes : Ajoutez des listes ordonnées (numérotées) ou non ordonnées (à puces).

2.1.2. Zone d'Édition​

C'est la zone principale où vous construisez votre modèle. Avant de commencer, il est essentiel de sauvegarder votre travail et de donner un nom descriptif au modèle.

3. Contenu Dynamique avec EJS​

Pour rendre les modèles dynamiques, l'éditeur utilise la syntaxe Embedded JavaScript (EJS). Cela vous permet d'injecter des données dans le PDF lors de sa génération. Vous pouvez trouver une documentation complète sur le site officiel d'EJS.

3.1. Utilisation de Variables​

La manière la plus simple d'ajouter du contenu dynamique est d'insérer des variables. La syntaxe est simple :

<%= varName %>

Toute variable passée au générateur peut être référencée de cette manière.

3.1.1. Exemple​

Imaginez que vous ayez un objet avec des données utilisateur. Votre modèle pourrait ressembler à ceci :

Nom : <%=name%>
Âge : <%=age%>
Pays : <%=country%>

Lorsque le PDF est généré, <%=name%>, <%=age%>, et <%=country%> seront remplacés par les valeurs réelles que vous fournissez.

3.2. Aperçu en Direct et Test​

Vous pouvez tester votre modèle sans quitter l'éditeur. Cliquez sur l'icône de test dans le coin supérieur droit pour ouvrir la pop-up Variables. Ici, vous pouvez saisir des données d'exemple pour vos variables et cliquer sur Générer un PDF pour voir un aperçu en direct.

4. Modèles Avancés​

Au-delà des variables simples, vous pouvez mettre en œuvre une logique plus complexe, comme des tableaux dynamiques et un rendu conditionnel.

4.1. Tableaux Dynamiques​

Pour remplir un tableau avec des données d'un tableau, vous pouvez utiliser une syntaxe spéciale. Tout d'abord, insérez un tableau avec au moins deux lignes : une pour l'en-tête et une pour le modèle de ligne de données.

4.1.1. Exemple 1 : Tableau de Base​

Décortiquons cette syntaxe :

• #:tableData:# : Cette balise spéciale identifie la source de données pour le tableau. tableData doit être le nom d'un tableau d'objets que vous fournissez. La balise doit être encadrée par #: : #.
• <%=row.id%> : C'est la syntaxe EJS standard. L'éditeur parcourt le tableau tableData, et pour chaque élément, il l'assigne à une variable nommée row. Vous pouvez ensuite accéder aux propriétés de chaque objet (par exemple, row.id, row.name).

4.1.1.1. Résultat Attendu​

Étant donné un tableau d'objets utilisateur, le tableau générera dynamiquement une ligne pour chaque utilisateur.

4.1.2. Exemple 2 : Tableau avec Calculs​

Vous pouvez effectuer des calculs directement dans votre modèle. Par exemple, vous pouvez calculer l'âge maximum et minimum à partir des données du tableau.

4.1.2.1. Résultat Attendu​

4.2. Logique Personnalisée et Widgets​

La pleine puissance d'EJS vous permet de créer des structures personnalisées et une logique conditionnelle qui vont au-delà des widgets intégrés de la barre d'outils.

4.2.1. Exemple 1 : Boucler pour Créer des Listes​

Vous pouvez parcourir un tableau pour afficher des données dans un format personnalisé, comme une liste :

<% for (const item of data) { %>
  Nom : <%= item.name %>
<% } %>

4.2.2. Exemple 2 : Rendu Conditionnel​

Vous pouvez utiliser des conditions if pour afficher ou masquer des parties du modèle en fonction de la valeur d'une variable :

<% if (isInStock) { %>
  Nom du Produit : <%= item.name %> est disponible !
<% } %>

5. Utilisation de Votre Modèle de PDF​

Une fois votre modèle sauvegardé, vous pouvez générer des PDF de plusieurs manières :

5.1. Via une Action​

Le Modélisateur de Processus et le Modélisateur Web prennent en charge une action dédiée pour la génération de PDF.

Pour la configurer, sélectionnez PreviewPDF: (Générer un PDF) dans la liste des actions. Vous devrez spécifier :

• Dump var : La variable qui stockera les données du PDF généré.
• Nom du Modèle : Le nom du modèle de PDF que vous avez créé.
• Contexte : Un objet contenant les valeurs de toutes les variables utilisées dans votre modèle.

5.2. Via une Fonction (Appel d'API)​

Pour un contrôle plus programmatique, vous pouvez appeler l'API de génération de PDF directement depuis un script.

async function generateMyPdf() {
  const templateID = "VOTRE_ID_DE_MODELE"; // L'ID de votre modèle
  const variables = {
    variables: {
      tableData: [
        { id: 3, name: "Saad", age:10 },
        { id: 2, name: "Ahmed", age:35 },
        { id: 1, name: "Fouad", age:50 },
      ],
      country:"US",
      command:"000018",
      isExist:true,
      date:"08/05/2022",
    }
  };

  try {
    const response = await axios.post(
      `https://votre-instance.softyflow.io/api/v1/files/generate/content/${templateID}`,
      variables
    );
    const pdfLink = `https://votre-instance.softyflow.io/uploads/${response.data._id}/name/${response.data.filename}.pdf`;
    console.log("PDF généré avec succès :", pdfLink);
    return pdfLink;
  } catch (error) {
    console.error("Erreur lors de la génération du PDF :", error);
  }
}