Générer une facture en pdf dans Salesforce avec jsPdf

Récemment, nous avons eu à générer des factures au format pdf dans Salesforce.

D'habitude, nos clients utilisent Sofacto (BillWerk+) et leurs modèles. Mais là, pas de Sofacto, on a dû le faire à la mano 🙂

Générer un pdf depuis une page visualforce, c'est pas compliqué : il suffit de créer une nouvelle page, construire sa structure en HTML et simplement ajouter l'attribut renderAs="pdf" dans la balise page de votre document.

<apex:page standardController="Account" renderAs="pdf">

Ça fonctionne très bien sur des documents "basiques", mais niveau style c'est pas le top.

Nous avons donc cherché une autre solution et nous sommes tombé sur la librairie jsPDF qui semblait être une des librairies les plus utilisées pour ce besoin.

Et voici le résultat:

Pour en arriver là, nous avons d'abord créé un composant LWC contenant un bouton que l'on peut intégrer facilement dans la page des opportunités. Ce bouton appelle le code Javascript du composant qui lui utilise la librairie jsPDF et effectue également des appels à des controllers APEX pour récupérer des infos de la base Salesforce.

Pour pouvoir utiliser la librairie jsPDF, nous avons dans un premier temps chargé ce fichier dans Salesforce en tant que Ressource Statique. Nous avons fait de même avec le plugin jsPdf-Autotable qui nous a permis de réaliser nos tableaux. Nous avons aussi utilisé ces ressources statiques pour insérer notre logo dans la facture.

Il n'y a ensuite plus qu'à les importer dans votre fichier .js...

... et les charger tour à tour pour pouvoir les utiliser. Nous avons choisi de les charger tour à tour pour être sûr que la librairie jsPDF soit bien disponible lors du chargement de jsPDF-Autotable et éviter d'éventuels conflits.

Voilà, vous êtes prêts pour générer vos plus beaux PDF !

Pour générer cette facture, nous avons utilisé les données d'une opportunité, ses lignes d'opportunité et le compte qui y est rattaché dans notre org Salesforce. Pour les récupérer nous avons simplement fait une requête SOQL en Apex. Nous avons également effectué une requête pour récupérer les données relatives à TrueLines qui sont utilisées sous le logo, mais cette fois-ci dans des métadonnées personnalisées.

La fonction generateData() est appelée grâce à un bouton que nous avons placé sur la page de détails de l'opportunité.

La création de la facture en elle-même n'est pas compliqué, le plus difficile à faire est sûrement de bien positionner les différents éléments dans votre document. Chaque fois que vous ajoutez quelque chose, vous devez préciser sa position verticale et horizontale et selon ce vous ajoutez, il est plus ou moins facile de savoir où vous en êtes 😅

Si vous voulez voir l'intégralité du code, il est disponible ci-dessous. Au menu : de l'insertion d'image, du texte, des tableaux horizontaux et verticaux, du paragraphe et même un pied de page !

pdfGenerator.zip

Download ZIP • 4.98MB

En résumé, nous avons trouvé cette librairie vraiment top pour le besoin que nous avions, elle offre de nombreuses possibilités et est facile à prendre en main. Il est fort probable que nous l'utilisions dans d'autres cas de figure 🙂

N'hésitez pas à nous faire un petit retour si vous utilisez notre template !