OUTILS PDF

Comment générer un fichier PDF en utilisant JavaScript

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Darrius Serrant

Mis à jour:juillet 28, 2025

1.0 Introduction

Adobe a développé le format Portable Document (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 assez cruciaux pour les documents importants. Pour créer de la documentation et des factures, de nombreuses entreprises utilisent des fichiers PDF. Les développeurs produisent et génèrent des PDF de documents pour répondre aux besoins des clients. La capacité de créer des PDF n'a jamais été aussi facile grâce aux bibliothèques modernes. Lorsque nous sélectionnons la bibliothèque idéale pour un projet, nous devons prendre en compte plusieurs facteurs, notamment les capacités de construction, de lecture et de conversion de la bibliothèque.

Dans cet article, nous discuterons de diverses 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 plus appropriée pour votre application JavaScript. Nous présenterons également IronPDF, une bibliothèque PDF puissante et pratique.

class="hsg-featured-snippet">

Étapes pour générer des fichiers PDF en JavaScript

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

2.0 Bibliothèques

Imaginons que nous voulons que le client puisse télécharger et imprimer une facture que nous avons. Nous voulons également que cette facture s'imprime correctement, avec un bon formatage. Ici, nous examinerons certaines des bibliothèques les plus appréciées pour convertir cette facture du format HTML au PDF.

2.1 PDFKit

L'une des premières bibliothèques PDF à être introduite dans l'écosystème JavaScript étendu est PDFKit. Depuis sa sortie initiale en 2012, elle a gagné en popularité et continue de recevoir des mises à jour régulières depuis 2021. PDFKit offre une prise en charge pour Node.js et les navigateurs web via Webpack, bien qu'elle puisse présenter un niveau de complexité légèrement supérieur par rapport à d'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 ; cependant, il n'y a pas d'API de haut niveau. De plus, la documentation est souvent compliquée. Comme vous pouvez le prévoir, il faut un certain temps pour s'y habituer, et au début, vous découvrirez que créer des PDF n'est pas la tâche la plus simple.

// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');

// Create a new PDF document
const doc = new PDFDocument();

// Add your content to the document here
doc.text('Hello world!');

// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));

// Finalize the PDF file
doc.end();

// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');

// Create a new PDF document
const doc = new PDFDocument();

// Add your content to the document here
doc.text('Hello world!');

// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));

// Finalize the PDF file
doc.end();

JAVASCRIPT

2.2 pdfmake

Une bibliothèque d'enveloppe pour PDFKit s'appelle pdfmake. La principale distinction 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. En conséquence, se concentrer sur la fonctionnalité souhaitée de la génération de PDF est plus facile avec la bibliothèque pdfmake, au lieu de passer du temps à instruire la bibliothèque sur la façon d'atteindre un résultat spécifique.

Cependant, il vaut la peine de noter que tout ce qui semble prometteur n'est pas parfait. Utiliser Webpack et tenter d'intégrer des polices personnalisées avec pdfmake peut potentiellement entraîner des problèmes. Malheureusement, il y a peu d'informations disponibles en ligne concernant ce problème. Si vous n'utilisez pas Webpack, vous pouvez toujours cloner facilement le dépôt Git et exécuter le script d'intégration de 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() {
            // Define the document structure
            var docDefinition = {
                content: [
                    { text: "Hello world" }
                ],
                defaultStyle: {}
            };
            // Create and print the PDF
            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() {
            // Define the document structure
            var docDefinition = {
                content: [
                    { text: "Hello world" }
                ],
                defaultStyle: {}
            };
            // Create and print the PDF
            pdfMake.createPdf(docDefinition).print();
        }
    </script>
    <button onclick="downloadPdf()">Print pdf</button>
</body>
</html>

HTML

Le résultat du code mentionné ci-dessus est affiché ci-dessous.

Comment générer un fichier PDF en utilisant JavaScript : Figure 1

2.3 jsPDF

jsPDF est un package open-source qui utilise exclusivement le JavaScript pur pour générer des fichiers PDF. Il crée une page PDF et la format en fonction de votre formatage fourni. jsPDF est la bibliothèque PDF la plus utilisée sur GitHub et est très fiable et bien entretenue. Il offre des modules faciles à utiliser pour Node.js et les navigateurs web, car ils sont exportés conformément à la norme de module AMD.

Concernant PDFKit, ses API suivent un paradigme impératif, ce qui peut rendre la conception de mises en page complexes difficile. Quant à 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() {
            // Create a new instance of jsPDF
            var pdf = new jsPDF({
                orientation: 'p',
                unit: 'mm',
                format: 'a5',
                putOnlyUsedFonts: true
            });
            // Add text to the PDF
            pdf.text("Hello World", 20, 20);
            // Save the PDF
            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() {
            // Create a new instance of jsPDF
            var pdf = new jsPDF({
                orientation: 'p',
                unit: 'mm',
                format: 'a5',
                putOnlyUsedFonts: true
            });
            // Add text to the PDF
            pdf.text("Hello World", 20, 20);
            // Save the PDF
            pdf.save('Demopdf.pdf');
        }
    </script>
</head>
<body>
    <button onclick="generatePDF()">Print Pdf</button>
</body>
</html>

HTML

Le résultat du code ci-dessus est montré ci-dessous.

Comment générer un fichier PDF en utilisant JavaScript : Figure 2

2.4 html2pdf

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

Pour convertir votre site web en un PDF, suivez ces étapes :

Installez la bibliothèque JavaScript html2pdf localement sur votre serveur en utilisant NPM ou incluez-la dans votre code HTML comme montré dans l'exemple ci-dessous :
Ajoutez une fonction "générer un 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é.
Personnalisez les options de formatage en les ajoutant à la variable "opt" avant de la passer à html2pdf. Cela vous permet de définir divers paramètres pour la génération de PDF.
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() {
            // Define the HTML content
            const page = 'Hello World!';
            // PDF options
            var opt = {
                margin: 1,
                filename: 'Demopdf.pdf',
                image: { type: 'jpeg', quality: 0.98 },
                html2canvas: { scale: 2 },
                jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
            };
            // Convert HTML to PDF
            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() {
            // Define the HTML content
            const page = 'Hello World!';
            // PDF options
            var opt = {
                margin: 1,
                filename: 'Demopdf.pdf',
                image: { type: 'jpeg', quality: 0.98 },
                html2canvas: { scale: 2 },
                jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
            };
            // Convert HTML to PDF
            html2pdf().set(opt).from(page).save();
        }
    </script>
</head>
<body>
    <button onclick="generatePDF()">Print Pdf</button>
</body>
</html>

HTML

Ci-dessous se trouve le résultat du code ci-dessus.

Comment générer un fichier PDF en utilisant JavaScript : Figure 3

2.5 IronPDF

IronPDF pour Node.js simplifie le processus de création et de personnalisation de documents PDF de manière programmatique. Développé par Iron Software, un 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 parfaitement avec les projets Node.js, fournissant aux développeurs des outils puissants pour générer, formater et éditer des PDF avec facilité.

La bibliothèque IronPDF a une large gamme de fonctionnalités, y compris la capacité de diviser et de combiner des pages dans des documents PDF nouveaux ou existants, lire et éditer des fichiers PDF existants, extraire des images de fichiers PDF, ajouter du texte, des graphiques, des signets, des filigranes, des en-têtes et des pieds de page aux fichiers PDF, le tout sans besoin d'Acrobat Reader. Depuis les fichiers CSS et CSS media, des documents PDF peuvent être produits. IronPDF permet aux utilisateurs de créer, télécharger et mettre à jour à la fois des formulaires PDF nouveaux et existants.

Caractéristiques clés d'IronPDF pour Node.js :

Génération versatile de PDF : Avec IronPDF, les développeurs peuvent générer des PDFs à partir de différentes sources, y compris HTML, CSS, JavaScript, images, et d'autres types de fichiers. Cette flexibilité permet de créer des documents PDF dynamiques et attrayants adaptés aux exigences spécifiques.
Personnalisation avancée de documents: IronPDF permet aux développeurs d'améliorer les documents PDF avec des fonctionnalités 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.
Fonctionnalités de sécurité : IronPDF offre des fonctionnalités de sécurité robustes pour protéger les PDFs 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 des performances optimales, incluant un support complet du multithreading et asynchrone. Cela garantit une génération efficace des PDF, ce qui le rend adapté aux applications critiques pour les performances.

Ensemble complet de fonctionnalités : Avec plus de 50 fonctionnalités pour créer, formater et éditer des documents PDF, IronPDF fournit 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 une large gamme de capacités pour répondre aux besoins des développeurs.

Pour générer un fichier PDF en utilisant du 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");
})();

JAVASCRIPT

Dans le code ci-dessus, initialement, 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 tout en permettant l'exécution JavaScript. Subséquemment, 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 s'assurant que le code JavaScript est exécuté pendant le processus de rendu. Enfin, le document PDF résultant est enregistré sous le nom "result1.pdf". Ce code illustre la capacité d'IronPDF à incorporer des modifications JavaScript dynamiques dans la génération de PDF, permettant aux développeurs de créer des documents PDF personnalisés et interactifs de manière programmatique.

Comment générer un fichier PDF en utilisant JavaScript : Figure 4

3.0 Conclusion

En conclusion, le code JavaScript présenté ci-dessus peut être susceptible d'un usage abusif et de risques de sécurité potentiels lorsqu'il est utilisé par d'autres. Il est important de prendre en compte la possibilité d'accès non autorisé et de vulnérabilités de sécurité des données lors de la mise en œuvre de ce code sur un site web. Les problèmes de compatibilité entre différents navigateurs et plates-formes doivent également être pris en compte, y compris la nécessité de garantir le support pour les anciens navigateurs qui peuvent ne pas avoir toutes les fonctionnalités requises.

En revanche, la bibliothèque IronPDF Node.js offre des mesures de sécurité renforcées pour se protéger contre les menaces potentielles. Elle 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 en utilisant IronPDF.

The library provides various licensing options to cater to different developer needs, including a free trial license for developers and additional licenses available for purchase. Le package Lite, au prix de $799, 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, de préproduction et de production. Additionally, it is also available for other languages like C# .NET, Java, and Python. Visitez le site IronPDF pour plus de détails.

Darrius Serrant

Discutez maintenant avec l'équipe d'ingénierie

Ingénieur logiciel Full Stack (WebOps)

Darrius Serrant est titulaire d'un baccalauréat en informatique de l'université de Miami et travaille comme ingénieur marketing WebOps Full Stack chez Iron Software. Attiré par le codage dès son plus jeune âge, il a vu l'informatique comme à la fois mystérieuse et accessible, en faisant le ...

Articles connexes

Mis à jourjuillet 28, 2025

Éditeur de PDF JavaScript (Tutoriel pour Développeurs)

Dans ce guide approfondi, nous nous embarquerons dans un voyage pour démêler les complexités de la construction d'un éditeur de PDF JavaScript en utilisant les formidables capacités offertes par IronPDF

Mis à jourjuillet 28, 2025

Comment créer un fichier PDF en React

nous explorerons diverses bibliothèques pour générer des PDFs et apprendrons à utiliser la bibliothèque populaire jsPDF pour créer des fichiers PDF directement depuis vos composants React

Mis à jourjuillet 28, 2025

Comment créer des fichiers PDF en JavaScript

IronPDF a été créé pour faciliter aux développeurs la création, la navigation et l'édition de documents PDF. Il fonctionne comme un puissant convertisseur PDF et offre une API de base pour créer, éditer et traiter des fichiers PDF.

Comment visualiser des fichiers PDF en JavaScript

Comment imprimer un fichier PDF en ...