Comment convertir HTML en PDF à l’aide de JavaScript

La création de documents PDF à partir de HTML est une fonction utile dans de nombreuses applications. Générer des PDF entièrement sur le frontend est encore plus avantageux car cela vous permet de simplifier vos applications et de construire des applications entièrement frontend.

En générant des documents du côté client, vous réduisez la quantité de travail que le serveur doit effectuer. Cela signifie que vous utiliserez moins de ressources et que vous économiserez la puissance de calcul requise.

La génération de documents côté client signifie que vos applications n’auront pas besoin d’un backend. Cela signifie que vous pouvez créer une application avec seulement un front-end et la distribuer en tant que telle.

Il est également plus facile de générer des PDF à l’aide de HTML, car il est plus facile de spécifier la mise en page de votre document.

Comment convertir HTML en PDF

Il existe de nombreuses options pour convertir votre document HTML en PDF. Dans cette section, je les présenterai toutes. Avant de commencer, configurons un projet de base.

Créez un fichier HTML avec le contenu suivant :

DocumentHTML à PDFCe document a été converti de HTML en PDF Ce document a été converti de HTML en PDF Script src=""
    </script&gt
  </body&gt
</html&gt
</code></pre>

Ce fichier affiche un balisage simple. Ce balisage sera converti en PDF ultérieurement. Nous lions également un script JavaScript. Ce script génère le code HTML.

Si vous ouvrez la page dans le navigateur, elle ressemblera à ceci :

Ensuite, créez le fichier script.js et laissez-le vide pour l’instant.

En appelant la fonction Print

La première méthode, qui est aussi la plus simple, s’appelle la fonction print. Cette fonction, mise à disposition par l’API du navigateur, appelle la bibliothèque système par défaut pour imprimer le rendu HTML de la page. L’utilisateur peut ensuite choisir d’imprimer le document au format PDF.

Pour utiliser cette méthode, ajoutez le code suivant à votre script.js

function generatePDF() {
  print() ;
}

generatePDF() ;

Dans ce code, nous avons créé une fonction generatePDF qui appelle la fonction print. Cette fonction generatePDF peut ensuite être appelée à partir de n’importe quel endroit de votre code. Par exemple, elle peut être attachée en tant que gestionnaire d’événements à l’appel d’un bouton d’impression.

Dans le cas présent, nous l’appelons simplement. La boîte de dialogue d’impression s’ouvre alors dans le navigateur comme suit.

L’utilisateur a alors la possibilité de spécifier la destination de l’imprimante, dont le PDF est l’une des options. Cela générera le PDF que vous souhaitez.

En utilisant la bibliothèque jsPDF

La première méthode, bien que simple, est un peu fastidieuse. De plus, il n’est pas toujours évident pour vos utilisateurs de savoir que vous voulez qu’ils impriment la version PDF. Une méthode plus simple consiste à utiliser la bibliothèque jsPDF. Cette bibliothèque vous permet de convertir votre document HTML en PDF et de le télécharger immédiatement.

Pour commencer, nous allons reprendre le balisage de la page précédente :

DocumentHTML à PDFCe document a été converti de HTML en PDF Ce document a été converti de HTML en PDF Script src=""
    </script&gt
  </body&gt
</html&gt</code></pre>

Ensuite, nous ajouterons des balises de script pour charger la bibliothèque jsPDF et les autres bibliothèques dont elle a besoin pour fonctionner correctement, avant la balise de script pour le fichier script.js.

</script&gt
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script&gt</code></pre>

Votre code HTML devrait donc ressembler à ceci :

DocumentHTML vers PDFCe document a été converti de HTML en PDF Scriptum
    </script&gt
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script&gt
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script&gt
    <script src="./script.js"></script&gt
  </body&gt
</html&gt</code></pre>

Dans le fichier script.js, nous pouvons commencer à écrire le JavaScript pour générer le PDF. Nous commençons donc par ajouter la fonction boilerplate.

function generatePDF() {

}

generatePDF() ;

Ensuite, nous pouvons commencer à écrire le code de la fonction.

function generatePDF() {
  let pdf = new jsPDF("p", "pt", "a4") ;
  let options = { pagesplit : true } ;

  pdf.addHTML($("body"), options, () => {
    pdf.save("myDocument.pdf") ;
  }) ;
}

generatePDF() ;

Le code de la fonction generatePDF effectue les opérations suivantes :

Il instancie la classe jsPDF. Cela crée un nouveau document PDF. Ensuite, nous créons un objet d’options. Dans cet objet, nous attribuons la valeur true à la propriété pagesplit. Cela permet de diviser le document PDF en plusieurs pages.

Enfin, nous ajoutons le code HTML. Pour ce faire, nous ciblons l’élément dont nous voulons ajouter les balises au PDF. Dans ce cas, nous avons spécifié la balise body. Nous passons également notre objet d’options. Nous avons également passé une fonction de rappel, qui sera exécutée une fois que le document PDF aura été généré. Cette fonction de rappel appelle la méthode save pour télécharger le document, et nous fournissons le nom du document.

Si vous exécutez le code ci-dessus, vous devriez obtenir une invite de téléchargement ou un téléchargement automatique, en fonction des paramètres de votre système.

Par html2pdf

La dernière méthode que nous aborderons dans cet article est la méthode html2pdf. Elle est similaire à la méthode jsPDF. Cette méthode est plus simple que la précédente mais offre moins d’options de configuration.

Pour l’utiliser, commençons par le modèle HTML des exemples précédents :

DocumentHTML vers PDFCe document a été converti de HTML en PDF Ce document a été converti de HTML en PDF Script src=""
    </script&gt
  </body&gt
</html&gt</code></pre>

Ensuite, ajoutez la balise script ci-dessous juste avant la balise script pour script.js. Cette balise de script doit charger le paquet jsPDF.

Ensuite, modifions le fichier script.js pour télécharger le PDF. Une fois encore, nous commençons par le code de base.

function generatePDF() {
  
}

generatePDF() ;

À l’intérieur de la fonction, nous ajouterons du code pour télécharger le PDF

function generatePDF() {
  html2pdf().from(document.body).save('monDocument.pdf')
}

generatePDF() ;

Ce code appelle la fonction html2pdf, qui renvoie un objet doté d’une méthode from. Nous appelons ensuite cette méthode from et transmettons une référence à un élément DOM à partir duquel nous souhaitons créer le document PDF. Ensuite, nous appelons la méthode save sur l’objet retourné. Nous transmettons le nom du fichier à la méthode save.

L’exécution de ce code devrait vous inviter à télécharger le fichier PDF.

Conclusion

Dans cet article, nous avons abordé trois des méthodes les plus populaires pour convertir votre balisage HTML en PDF à partir de l’interface utilisateur. Cette méthode présente de nombreux avantages, notamment celui de vous permettre de créer des applications entièrement frontales.

Cependant, les PDF générés par les méthodes 2 et 3 sont d’abord rendus sous forme d’images, puis ajoutés au PDF. Cela signifie que le texte ne peut pas être mis en évidence. Cela peut être un avantage ou un inconvénient.