Certains visiteurs préféreront une partie du contenu de votre site web sous un format différent que l’HTML, et souhaiterait par exemple transformer un tableau de données lisible par Excel ou le contenu d’une page en PDF. Il existe des outils pour le faire et je voulais partager mon expérience d’utilisation de l’un d’entre eux.
Votre page web en PDF
Un site web peut offrir du contenu via des vidéos ou des images en plus du texte qu’il contient. Il est une source d’information mise en ligne par laquelle son propriétaire peut vous en apprendre plus sur ce quoi il veut communiquer. Mais le web offre d’autres formats plus faciles à utiliser pour celui qui souhaiterait utiliser ces données différemment.
(ou à l’inverse, comme ici par exemple)
Depuis longtemps, j’utilise PHP pour transformer un tableau de données en format CSV, lisible par des tableurs par exemple. Aujourd’hui, je me suis penché sur le format PDF. Très vite, je me rends compte que le format PDF est plus difficile à mettre en place. C’est que les données ne sont simplement séparées par des « ; », comme on pourrait le faire avec le CSV pour définir les colonnes. Heureusement, d’autres développeurs se sont penchés sur le sujet et des outils existent. Il en existe en PHP mais comme le Javascript prend de plus en plus d’ampleur sur la toile, je me suis tourné vers des bibliothèques Javascript. J’en ai trouvées quatre :
Choix de la librairie
Je n’en ai essayé que 2 sur les 4, mais globalement, il semblerait qu’ils fonctionnent tous de la même manière. J’avais déjà testé il y a longtemps htmlToPDF, mais aujourd’hui, je voulais vous faire partager mon expérience d’utilisation de pdfMake. Ce dernier bénéficie entre autres d’une documentation bien faite et plus complète, ce qui m’aide beaucoup à préférer une librairie. Je vous propose de regarder mon code pour ensuite le commenter :
Je commencerai par commenter la ligne 39, où l’on déclare le tableau « content ». En réalité, c’est là que tout se passe ; vous y placez le contenu de votre document. Après, j’ai testé pour vous 3 fonctionnalités : l’ajout d’une image, la stylisation de certains éléments du texte et enfin un texte mise en fond de page. On peut bien sûr aller plus loin, en créant des tableaux, des listes ou des Headers/Footers plus détaillés.
L’ajout d’une image
Pour l’image, la librairie JS a prévu de parler à une API. C’est ce que j’ai fait dans mon exemple. Mais j’ai également commenté à la ligne 34, un exemple de code pour insérer une image à vous. Il faut pour cela la transformer en base 64. Une fois le code généré, vous pouvez le remplacer par les « !!! » que j’ai placé dans mon code par votre image en base 64.
Le texte stylisé
Vous remarquerez que le tableau « content » renferme des objets possédant plusieurs propriétés. C’est à travers elles que l’on peut définir les marges, le style et le contenu par exemple, de chaque paragraphe. Mais sachez qu’il y a d’autres propriétés. Si vous regardez bien, devant la propriété « style », vous pouvez appeler un autre objet où vous pouvez définir ce dernier via des propriétés CSS (voir à la ligne 68). Par contre, pour styliser un ou plusieurs mots dans un paragraphe, vous devez créer un tableau renfermant eux-mêmes les propriétés précitées (voir ligne 63). Attention que les marges ne fonctionnent pas comme en CSS !
Watermark
Le watermark ou le texte écrit en diagonale et en arrière-plan, est appelé différemment. Il suffit de créer un objet nommé « watermark », à travers lequel vous définissez des attributs et des propriétés pour le styliser.
Enfin, vous pouvez appeler des fontes en ligne (ici, c’est Roboto, à la ligne 6).
Bonus
On le comprend assez vite, il faut s’habituer à l’outil pour espérer customiser au mieux son PDF. Ici, c’est un jeu d’objets et de tableau qu’il faut mettre en place pour construire sa page.
Je voulais néanmoins vous donner d’autres ressources pour vous aider à construire votre PDF. MakePDF propose des exemples, que vous pouvez trouver sur Github à cette adresse : https://github.com/bpampuch/pdfmake/tree/master/examples – chaque exemple vous propose le PDF généré et le code source qui le génère, ce qui a été pour ma part très utile. Enfin, et c’est pour cela que je pense que MakePDF fait partie des meilleurs outils dans le domaine, c’est qu’il vous propose un éditeur en ligne pour visualiser en direct la construction de votre PDF. Le voici : http://pdfmake.org/playground.html
Voilà, j’espère que vous avez pu avoir un aperçu de MakePDF à travers cet article et que vous allez pouvoir générer un PDF avec le contenu de votre site. Avec l’exemple ci-dessus, vous remarquerez que le contenu est dynamique, en ajoutant des valeurs dans la fonction principale goPDF. Ainsi, vous pourriez réaliser des PDFs dynamiques suivant le contenu dynamique de votre page.
Documentation officielle : https://pdfmake.github.io/docs/0.1/
Mon exemple sur codepen : https://codepen.io/lintermediaire/pen/BamQdyw
