Générer un PDF

Description de Génération de PDF​

Le modèle de génération de PDF permet aux utilisateurs de créer des PDFs dynamiques, contenant des variables et des tableaux dynamiques. Ceux-ci peuvent être générés dans le modélisateur de processus ou dans le modélisateur web.

Créer un Modèle PDF​

• Tout d'abord, nous devons créer un nouveau modèle PDF, cliquez sur le bouton Create a PDF.

Barre Latérale :​

La barre supérieure contient différents outils dont vous pourriez avoir besoin lors de votre édition

• Remplissage
  • Top : la propriété CSS padding-top définit la hauteur de la zone de remplissage en haut du modèle.
  • Bottom : la propriété CSS padding-bottom définit la hauteur de la zone de remplissage en bas du modèle.
  • Left : la propriété CSS padding-left définit la largeur de la zone de remplissage à gauche du modèle.
  • Right : la propriété CSS padding-right définit la largeur de la zone de remplissage à droite du modèle.
• Insérer un Tableau :
  • Vous pouvez insérer un tableau et choisir le nombre de colonnes et de lignes que vous souhaitez.
• Insérer une Image
  • Insérer une image via une URL
  • Insérer une image depuis votre ordinateur local
• Insérer du HTML :
  • Fournit une zone d'édition HTML qui permet aux utilisateurs d'ajouter des éléments HTML dans le modèle.
• Style de Texte :
  • Titre
  • Alignement du texte
  • Gras
  • Italique
  • Taille de police / Famille de police / Couleur de police / Couleur de fond de police
• Types de Listes :
  • Vous pouvez ajouter différents types de listes.

Éditeur :​

Ici, vous pouvez construire votre modèle et placer vos widgets.

• Enregistrez le fichier et donnez-lui un nom, puis commencez votre édition.

Créer un Modèle Dynamique​

L'utilisateur peut ajouter des variables au modèle PDF en utilisant la syntaxe EJS :

<%=varName%>

Exemple​

Name : <%=name%>
Age : <%=age%>
Country : <%=country%>

Exemple​

• Dans le coin supérieur droit, vous pouvez trouver une icône de générateur de test PDF, où vous pouvez tester votre modèle, ce qui vous oblige à mettre vos variables dans la fenêtre contextuelle de variables puis cliquer sur le bouton Generate PDF.

Dans les sections suivantes, nous expliquerons comment nous pouvons utiliser cette syntaxe pour créer des PDF dynamiques.

Ajouter un Tableau Dynamique​

Dans l'éditeur PDF, insérez un exemple de tableau (au moins deux lignes, la première devrait être pour l'en-tête), puis ajoutez notre syntaxe de tableau dynamique.

Exemple 1​

Alors, quelle est la signification de ces caractères ?

• #:tableData:#​

tableData est notre donnée que nous voulons présenter dans notre tableau, elle doit être un tableau d'objets. Pour être reconnue, nous l'écrivons entre #: et :#.

• <%=row.id%>​

Cela ne vous semble-t-il pas familier ? Oui, c'est la syntaxe EJS que nous avons couverte dans l'introduction. Ce sont les données que nous voulons présenter dans nos colonnes, et <%=row. %> est une syntaxe fixe à laquelle nous ajoutons notre colonne (id dans cette colonne, et name dans la seconde).

Résultats​

Exemple 2​

Ce que vous devez savoir, c'est que le modèle PDF est très flexible dans sa création. Couvrons cela dans l'exemple suivant.

Résultats​

Ajouter des Widgets Personnalisés​

La puissance de notre éditeur est que vous pouvez utiliser la syntaxe EJS pour créer tout ce que vous voulez en dehors de ce qui existe dans la barre latérale.

Exemple 1​

Nous pouvons parcourir un tableau d'objets et présenter leurs données comme nous en avons besoin :

<% for (const item of data){%>

  Name : <%=item.name%>

<%}%>

Exemple 2​

Nous pouvons créer une condition if pour afficher ou non une partie de l'éditeur :

<% if(isInStore){ %>

  Product Name : <%=item.name%>

<%}%>

Utiliser le Modèle PDF Créé​

Nous pouvons utiliser le modèle PDF créé de trois manières : Action dans le Modélisateur de Processus, Action dans le Modélisateur Web ou créer une fonction qui appelle l'API du générateur de PDF.

• Action​

Action dans le Modélisateur de Processus comme dans le Modélisateur Web, vous cliquez sur autres actions puis choisissez PreviewPDF : (Generate PDF). Cela générera des entrées previewPDF, tout ce que vous devez faire est de mettre la variable 'Dump var', pour recevoir les données PDF générées (dans le processus, cette variable est le nom de l'action par défaut), puis choisissez le nom de votre modèle créé dans les sections précédentes, et insérez les valeurs des variables de votre modèle dans l'objet Context.

• Fonction​

Nous pouvons créer une fonction dans les scripts, où nous utilisons directement l'API du générateur de PDF.

    async generatePdf(){
        let 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",
                }
        }
        let pdf = await axios.post(`https://softydev.softyflow.io/api/v1/files/generate/content/${templateID}`,variables)

       let pdflink=`https://softydev.softyflow.io/uploads/${pdf.data._id}/name/${pdf.data.filename}.pdf`
    }