Éditeur de modèle HTML
Cette page vous guidera à travers le processus de création d'un modèle PDF à l'aide de notre éditeur HTML visuel. Après avoir lu cette documentation, vous serez capable de concevoir un modèle HTML avec des styles et des polices personnalisés ainsi que du contenu dynamique.
Créer un nouveau modèle
Pour créer un nouveau modèle, connectez-vous à votre compte et accédez à la page "Templates". Ici, vous pouvez créer un nouveau modèle ou modifier un modèle existant. Cliquez sur "Créer un modèle" et sélectionnez "Blank HTML Template" pour commencer à partir de zéro.
Styles et polices
Pour ajouter des styles et des polices personnalisés à votre modèle, vous pouvez utiliser du HTML et du CSS standard. Vous pouvez inclure des styles en ligne ou lier des feuilles de style externes. Par exemple, vous pouvez utiliser le code suivant pour ajouter une police personnalisée à votre modèle :
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<style>
body {
font-family: "Open Sans"
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Dans cet exemple, nous téléchargeons la police "Open Sans" depuis Google Fonts et l'appliquons à l'ensemble du document.
Contenu dynamique
Pour inclure du contenu dynamique dans votre modèle, vous pouvez utiliser des variables. Les variables sont des espaces réservés qui seront remplacés par des données réelles lors de la génération du PDF. Vous pouvez définir des variables en préfixant le nom de la variable avec un signe de pourcentage et en l'encadrant de crochets. Par exemple, si vous souhaitez afficher un nom, vous pouvez ajouter une variable nommée "name" à votre modèle comme ceci :
{%name}. Vous pouvez également accéder aux propriétés imbriquées d'un objet en utilisant la notation pointée. Par exemple, si vous avez un objet utilisateur avec une propriété email, vous pouvez y accéder en utilisant
{%user.email}.
<html>
<body>
<h1>Hello, {%name}!</h1>
<p>Your email address is: {%user.email}</p>
</body>
</html>
Vous pouvez également utiliser des variables dans les attributs HTML, comme l'attribut
src d'une balise d'image :
<html>
<body>
<img src="{%avatar_url}" alt="User Avatar">
</body>
</html>
Boucles
Les boucles vous permettent de répéter du contenu dans votre modèle en fonction d'une liste de données. Vous pouvez utiliser la balise spéciale
<loop> pour créer des boucles dans votre modèle. Par exemple, si vous avez une liste d'articles que vous souhaitez afficher dans un tableau, vous pouvez utiliser la balise
<loop> comme suit :
<html>
<body>
<table>
<thead>
<tr>
<th>Item Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<loop on="%items" as="%item">
<tr>
<td>{%item.name}</td>
<td>{%item.qty}</td>
<td>{%item.price}</td>
</tr>
</loop>
</tbody>
</table>
</body>
</html>
Dans cet exemple, la balise
<loop> itère sur la liste
items et crée une nouvelle ligne de tableau pour chaque article. À l'intérieur de la boucle, vous pouvez accéder à l'article actuel en utilisant la variable
item et accéder à ses propriétés en utilisant la notation avec un point.
loop, if, unless) ne doivent pas être enveloppées dans des crochets car la balise de boucle gère déjà l'évaluation de la variable. Les crochets ne sont utilisés que pour afficher la valeur de la variable.Blocs conditionnels
Vous pouvez utiliser des blocs conditionnels pour afficher ou masquer du contenu en fonction de certaines conditions. Vous pouvez définir des conditions en utilisant la balise spéciale
<if> et
<unless>. Par exemple, si vous souhaitez afficher un message uniquement si une variable est vraie, vous pouvez utiliser le code suivant :
<html>
<body>
<if condition="%show_message">
<p>This message will only be displayed if the "show_message" variable is true.</p>
</if>
<if condition="%show_message == 'yes'">
<p>This message will only be displayed if the "show_message" variable is equal to 'yes'.</p>
</if>
<if condition="%a + %b > 10">
<p>This message will only be displayed if the sum of "a" and "b" is greater than 10.</p>
</if>
<unless condition="%hide_message">
<p>This message will only be displayed if the "hide_message" variable is false.</p>
</unless>
</body>
</html>
Dans cet exemple, les balises
<if> et
<unless> vérifient la valeur de la variable spécifiée et affichent le contenu à l'intérieur du bloc si la condition est remplie. Chaque variable doit être encadrée de crochets pour être évaluée, et vous pouvez utiliser des opérateurs de comparaison tels que
==,
>,
<,
>=,
<= et
!=.
Fonctions d'aide
Vous pouvez utiliser des fonctions d'aide pour formater et manipuler des données dans votre modèle. Les fonctions d'aide sont des fonctions prédéfinies que vous pouvez utiliser pour effectuer des tâches courantes telles que le formatage et le calcul de valeurs. Vous pouvez utiliser des fonctions d'aide en enveloppant le nom de la fonction et ses arguments entre crochets et en le préfixant d'un signe égal. Voici quelques exemples de l'utilisation des fonctions d'aide :
<html>
<body>
<p>The sum of all items price: {=SUM(%items, 'price')}</p>
<p>The average of all items price: {=AVG(%items, 'price')}</p>
<p>Rounded number: {=ROUND(%amount, 2)}</p>
<p>Formatted date: {=DATE(%date, 'Y-m-d')}</p>
<p>Uppercase: {=UPPER(%name)}</p>
<p>Lowercase: {=LOWER(%name)}</p>
<p>Capitalize: {=CAPITALIZE(%name)}</p>
</body>
</html>
QR Codes
Vous pouvez également inclure des codes QR dans votre modèle pour générer des codes QR dynamiques basés sur des variables. Vous pouvez définir un code QR en utilisant la balise spéciale
<qr-code>. Par exemple, si vous souhaitez afficher un code QR avec une URL, vous pouvez utiliser le code suivant :
<html>
<body>
<qr-code content="{url}" size="100"></qr-code>
</body>
</html>
La balise
<qr-code> accepte trois attributs:
data,
width et
shape. L'attribut
data est le contenu du code QR, et l'attribut
width est la largeur et la hauteur du code QR en pixels. L'attribut
shape est facultatif et peut être défini sur "square" ou "dot" pour changer la forme du code QR.
<qr-code data="123" /> ne fonctionnera pas, vous devez utiliser <qr-code data="123"></qr-code> à la place.Graphiques (Chart.js)
Vous pouvez également inclure des graphiques dans votre modèle pour visualiser des données. Vous pouvez définir un graphique en utilisant la balise spéciale
<chart-js>. Par exemple, si vous souhaitez afficher un graphique à barres avec des données, vous pouvez utiliser le code suivant :
<html>
<body>
<chart-js
type="bar"
:data="{
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
}"
:options="{
scales: {
y: {
beginAtZero: true
}
}
}"
></chart-js>
</body>
</html>
Le tag
<chart-js> accepte trois attributs:
type,
data et
options. Vous pouvez en savoir plus sur les types de graphiques disponibles et les formats de données et d'options dans la documentation de Chart.js.
Vous pouvez également utiliser des variables pour définir les données et les options du graphique. Par exemple, vous pouvez utiliser le code suivant pour afficher un graphique à barres avec des données dynamiques :
<html>
<body>
<!-- Send the entire data object -->
<chart-js type="bar" :data="{=JSON(%data)}"></chart-js>
<!-- Only part of the data object -->
<chart-js
type="bar"
:data="{
labels: {=JSON(%labels)},
datasets: [
{ label: 'Sales', data: {=JSON(%sales)}
}]
}"
></chart-js>
</body>
</html>
Dans cet exemple, l'attribut
data est défini sur un objet JSON qui est généré par la fonction d'aide
JSON. La fonction
JSON convertit la valeur de la variable en une chaîne JSON, qui est ensuite analysée par le composant de graphique.