Comment générer un fichier PDF à l'aide de JavaScript

1.0 Introduction

Adobe a développé le format de document portable (PDF) dans le but de partager des documents avec du texte et des graphiques. Un programme supplémentaire est nécessaire pour ouvrir un fichier PDF en ligne. Dans le monde moderne, les fichiers PDF sont indispensables pour les documents importants. De nombreuses entreprises utilisent des fichiers PDF pour créer des documents et des factures. Les développeurs produisent et génèrent des documents au format PDF pour répondre aux besoins des clients. La création de PDF n'a jamais été aussi facile grâce aux bibliothèques modernes. Lors de la sélection de la bibliothèque idéale pour un projet, nous devons tenir compte d'un certain nombre de facteurs, notamment les capacités de construction, de lecture et de conversion de la bibliothèque.

Dans cet article, nous aborderons différentes bibliothèques JavaScript pour la création de PDF. Nous explorerons les fonctionnalités et les cas d'utilisation de la bibliothèque JS, en nous concentrant sur trois aspects clés :

• Compatibilité avec l'environnement d'exécution
• Prise en charge des polices personnalisées et des modules de typographie

• Facilité d'utilisation

  À la fin de cet article, vous serez en mesure de choisir la bibliothèque PDF la mieux adaptée à votre application JavaScript. Nous présenterons également IronPDF, une bibliothèque PDF puissante et pratique.

  Étapes à suivre pour générer des fichiers PDF en Javscript

  1. Utilisez la méthode text de la bibliothèque PDFKit pour insérer du texte dans le PDF
  2. Utiliser la méthode createPdf de la bibliothèque pdfmake en JavaScript
  3. Instancier la classe jsPDF de la bibliothèque jsPDF pour créer le PDF
  4. Passer des configurations à la méthode html2pdf de la bibliothèque html2pdf
  5. Utilisez la méthode RenderHtmlAsPdf de la bibliothèque IronPDF

2.0 Bibliothèques

Supposons que nous souhaitions que le client puisse télécharger et imprimer une facture que nous avons établie. Nous voulons également que cette facture s'imprime correctement, avec un bon formatage. Nous examinerons ici quelques-unes des bibliothèques les plus populaires pour convertir cette facture du format HTML au format PDF.

2.1 PDFKit

PDFKit est l'une des premières bibliothèques PDF à avoir été introduites dans le vaste écosystème JavaScript. Depuis sa sortie initiale en 2012, elle a gagné une popularité substantielle et continue de recevoir des mises à jour régulières en 2021. PDFKit offre un support à la fois pour Node.js et les navigateurs web via Webpack, bien qu'il puisse présenter un niveau de complexité légèrement plus élevé par rapport aux autres bibliothèques discutées ici. De plus, comme nous le verrons dans la comparaison, certaines bibliothèques PDF sont essentiellement des enveloppes pour PDFKit.

Les polices personnalisées et l'intégration d'images sont prises en charge, mais il n'existe pas d'API de haut niveau. En outre, la documentation est souvent compliquée. Comme vous pouvez vous en douter, il faut un peu de temps pour s'y habituer et, au début, vous découvrirez que la création de PDF n'est pas la tâche la plus simple.

const PDFDocument = require('pdfkit');
const fs  = require('fs');
// create a document the same way as above
const doc = new PDFDocument;
// add your content to the document here, as usual
doc.text('Hello world!');
// get a blob when you're done
doc.pipe(fs.createWriteStream('Demo.pdf'));
doc.end();

const PDFDocument = require('pdfkit');
const fs  = require('fs');
// create a document the same way as above
const doc = new PDFDocument;
// add your content to the document here, as usual
doc.text('Hello world!');
// get a blob when you're done
doc.pipe(fs.createWriteStream('Demo.pdf'));
doc.end();

2.2 pdfmake

Une bibliothèque d'encapsulation pour PDFKit s'appelle pdfmake. La principale différence entre les deux réside dans leurs paradigmes de programmation :

pdfmake adopte une approche déclarative, tandis que PDFKit suit la technique impérative traditionnelle. Par conséquent, il est plus facile de se concentrer sur la fonctionnalité souhaitée de la génération de PDF avec la bibliothèque pdfmake, plutôt que de passer du temps à donner des instructions à la bibliothèque sur la manière d'obtenir un résultat spécifique.

Toutefois, il convient de noter que tout ce qui semble prometteur n'est pas sans faille. L'utilisation de Webpack et la tentative d'intégration de polices personnalisées avec pdfmake peuvent potentiellement conduire à des problèmes. Malheureusement, peu d'informations sont disponibles en ligne sur ce problème. Si vous n'utilisez pas Webpack, vous pouvez toujours cloner le dépôt Git et exécuter le script d'intégration des polices.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            function downloadPdf() {
                var docDefinition = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                pdfMake.createPdf(docDefinition).print();
            }
        </script>
        <button onclick="downloadPdf()">Print pdf</button>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            function downloadPdf() {
                var docDefinition = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                pdfMake.createPdf(docDefinition).print();
            }
        </script>
        <button onclick="downloadPdf()">Print pdf</button>
    </body>
</html>

Le résultat de l'opération susmentionnée est affiché ci-dessous.

2.3 jsPDF

jsPDF est un logiciel libre qui utilise exclusivement du JavaScript pur pour générer des fichiers PDF. Il crée une page PDF et la met en forme en fonction du formatage que vous avez fourni. jsPDF est la bibliothèque PDF la plus utilisée sur GitHub. Elle est très fiable et bien entretenue. Il propose des modules faciles à utiliser pour Node.js et les navigateurs web, car ils sont exportés conformément à la norme de module AMD.

En ce qui concerne PDFKit, ses API adhèrent à un paradigme impératif, ce qui peut compliquer la conception de mises en page complexes. En ce qui concerne l'intégration des polices, la seule étape supplémentaire requise est la conversion des polices en fichiers TTF, ce qui est un processus simple.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
        <script>
            function generatePDF() {
                var pdf = new jsPDF({
                    orientation: 'p',
                    unit: 'mm',
                    format: 'a5',
                    putOnlyUsedFonts:true
                    });
                pdf.text("Hello World", 20, 20);
                pdf.save('Demopdf.pdf');
            }
        </script>
    </head>
    <body>
        <button onclick="generatePDF()">print Pdf</button>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
        <script>
            function generatePDF() {
                var pdf = new jsPDF({
                    orientation: 'p',
                    unit: 'mm',
                    format: 'a5',
                    putOnlyUsedFonts:true
                    });
                pdf.text("Hello World", 20, 20);
                pdf.save('Demopdf.pdf');
            }
        </script>
    </head>
    <body>
        <button onclick="generatePDF()">print Pdf</button>
    </body>
</html>

La sortie du code ci-dessus est illustrée ci-dessous.

2.4 html2pdf

Pour convertir les pages web et les modèles en fichiers PDF, html2pdf combine les fonctionnalités de jsPDF et de Html2Canvas en un seul module.

Pour convertir votre site web en PDF, suivez les étapes suivantes :

1. Installez la bibliothèque JavaScript html2pdf localement sur votre serveur à l'aide de NPM ou incluez-la dans votre code HTML comme indiqué dans l'exemple ci-dessous :

2. Ajoutez une fonction "générer PDF" qui sera appelée pour convertir le segment spécifié de la page web en un PDF. Vous pouvez utiliser la méthode getElementById pour sélectionner le segment souhaité.

3. Personnalisez les options de formatage en les ajoutant à la variable "opt" avant de la transmettre à html2pdf. Cela vous permet de définir divers paramètres pour la génération de PDF.

4. Incluez un bouton sur votre page HTML qui déclenche la fonction generatePDF lorsqu'il est cliqué.

<!DOCTYPE html>
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script>
    function generatePDF() {
    const page = 'Hello World!';
    var opt = {
        margin:       1,
        filename:     'Demopdf.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2 },
        jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    html2pdf().set(opt).from(page).save();
    }
    </script>
    </head>
    <body>
    <button onclick="generatePDF()">print Pdf</button>
</body>
</html>

<!DOCTYPE html>
<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script>
    function generatePDF() {
    const page = 'Hello World!';
    var opt = {
        margin:       1,
        filename:     'Demopdf.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2 },
        jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    html2pdf().set(opt).from(page).save();
    }
    </script>
    </head>
    <body>
    <button onclick="generatePDF()">print Pdf</button>
</body>
</html>

Voici le résultat du code ci-dessus.

2.5 IronPDF

IronPDF pour Node.js simplifie le processus de création et de personnalisation de documents PDF de manière programmée. Développé par Iron Software, fournisseur de confiance de bibliothèques de traitement de documents haute performance, IronPDF offre une solution robuste pour la génération de PDF dans les environnements Node.js. Il s'intègre de manière transparente aux projets Node.js, offrant aux développeurs des outils puissants pour générer, formater et éditer des PDF en toute simplicité.

La bibliothèque IronPDF offre un large éventail de fonctionnalités, notamment la possibilité de diviser et de combiner des pages dans des documents PDF nouveaux ou existants, de lire et de modifier des fichiers PDF existants, d'extraire des images de fichiers PDF, d'ajouter du texte, des graphiques, des signets, des filigranes, des en-têtes et des pieds de page à des fichiers PDF, le tout sans avoir besoin d'Acrobat Reader. Des documents PDF peuvent être produits à partir de fichiers CSS et CSS Media. IronPDF permet aux utilisateurs de créer, de télécharger et de mettre à jour des formulaires PDF nouveaux ou préexistants.

Principales caractéristiques d'IronPDF pour Node.js :

• Génération polyvalente de PDF : Avec IronPDF, les développeurs peuvent générer des PDF à partir de diverses sources, notamment HTML, CSS, JavaScript, images et autres types de fichiers. Cette souplesse permet de créer des documents PDF dynamiques et visuellement attrayants, adaptés à des besoins spécifiques.
• Personnalisation avancée des documents : IronPDF permet aux développeurs d'améliorer les documents PDF grâce à des fonctions telles que les en-têtes, les pieds de page, les pièces jointes, les signatures numériques, les filigranes et les signets. Cela permet de créer des PDF de qualité professionnelle avec un contenu riche et des éléments interactifs.
• Fonctions de sécurité : IronPDF offre de solides fonctions de sécurité pour protéger les PDF contre les accès non autorisés. Les développeurs peuvent mettre en œuvre des mesures de sécurité telles que des mots de passe, des signatures numériques, des métadonnées et d'autres paramètres de sécurité pour protéger les informations sensibles contenues dans les documents PDF.

• Performance optimisée : IronPDF est conçu pour offrir des performances optimales, avec une prise en charge complète du multithreading et de l'asynchronisme. Cela garantit une génération efficace de PDF, ce qui le rend adapté aux applications critiques où les performances sont primordiales.

  Ensemble complet de fonctions : Avec plus de 50 fonctions de création, de formatage et d'édition de documents PDF, IronPDF constitue une solution complète pour toutes les tâches liées aux PDF. De la génération de documents de base à la personnalisation avancée et à la sécurité, IronPDF offre un large éventail de possibilités pour répondre aux besoins des développeurs.

  Pour générer un fichier PDF en utilisant JavaScript personnalisé, regardez le code suivant qui rend le contenu HTML plus attrayant sans effort :

import {PdfDocument} from "@ironsoftware/ironpdf";

(async () => {
   // Define the JavaScript code to change text color to red
   const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";

   // Create rendering options object
   const renderOptions = {
       enableJavaScript: true,
       javascript: javascriptCode,
   };

   // HTML content to be rendered
   const htmlContent = "<h1>Hello World!!</h1>";

   // Render HTML content to a PDF
   const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("result1.pdf");
})();

import {PdfDocument} from "@ironsoftware/ironpdf";

(async () => {
   // Define the JavaScript code to change text color to red
   const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";

   // Create rendering options object
   const renderOptions = {
       enableJavaScript: true,
       javascript: javascriptCode,
   };

   // HTML content to be rendered
   const htmlContent = "<h1>Hello World!!</h1>";

   // Render HTML content to a PDF
   const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("result1.pdf");
})();

Dans le code ci-dessus, tout d'abord, un extrait de code JavaScript est défini pour changer la couleur de tous les éléments <h1> en rouge. Ce code est ensuite intégré dans les options de rendu avec l'activation de l'exécution de JavaScript. Ensuite, un contenu HTML contenant un élément <h1> avec le texte "Hello World!!" est spécifié. Le document PDF est généré à partir de ce contenu HTML avec les options de rendu définies, en veillant à ce que le code JavaScript soit exécuté pendant le processus de rendu. Enfin, le document PDF résultant est enregistré sous le nom de "result1.pdf". Ce code illustre la capacité d'IronPDF à incorporer des modifications JavaScript dynamiques dans la génération de PDF, ce qui permet aux développeurs de créer des documents PDF personnalisés et interactifs de manière programmatique.

3.0 Conclusion

En conclusion, le code JavaScript présenté ci-dessus peut faire l'objet d'une utilisation abusive et présenter des risques potentiels pour la sécurité lorsqu'il est utilisé par d'autres personnes. Il est important de prendre en compte la possibilité d'un accès non autorisé et les vulnérabilités en matière de sécurité des données lors de la mise en œuvre d'un tel code sur un site web. Les questions de compatibilité entre les différents navigateurs et plateformes doivent également être prises en compte, y compris la nécessité d'assurer la prise en charge des anciens navigateurs qui peuvent ne pas disposer de toutes les fonctionnalités requises.

En revanche, la bibliothèque IronPDF Node.js offre des mesures de sécurité renforcées pour se prémunir contre les menaces potentielles. Il ne dépend pas de navigateurs spécifiques et est compatible avec tous les principaux navigateurs. Avec seulement quelques lignes de code, les développeurs peuvent facilement créer et lire des fichiers PDF à l'aide d'IronPDF.

La bibliothèque offre diverses options de licence pour répondre aux différents besoins des développeurs, y compris une version d'essai gratuite pour les développeurs et des licences supplémentaires disponibles à l'achat. Le forfait Lite, au prix de $749, comprend une licence permanente, un an de support produit et des options de mise à niveau, sans frais récurrents. Ces licences peuvent être utilisées dans des environnements de développement, d'essai et de production. De plus, est également disponible pour d'autres langues comme C# .NET, Java et Python. Visitez le site IronPDF pour plus de détails.