Icône de message
Passer au contenu du pied de page
  1. IronPDF
  2. Blog IronPDF
  3. Outils PDF pour Node
  4. Créer un PDF avec JavaScript
OUTILS PDF

Comment créer des fichiers PDF en JavaScript

Darrius Serrant
Darrius Serrant
Mis à jour:

Dans le domaine du partage de documents, le format de document portable (PDF), pionnier par Adobe, joue un rôle crucial dans la préservation de l'intégrité des contenus riches en texte et visuellement attrayants. Accéder à un fichier PDF en ligne nécessite généralement un programme dédié. Dans le paysage numérique actuel, les fichiers PDF sont devenus indispensables pour diverses publications importantes. De nombreuses entreprises s'appuient sur les fichiers PDF pour créer des documents et des factures professionnels. De plus, les développeurs exploitent souvent des bibliothèques de création de PDF pour répondre à des exigences spécifiques des clients. Le processus de génération de PDF a été simplifié avec l'avènement des bibliothèques modernes. Lors de la sélection de la bibliothèque la plus adaptée pour un projet impliquant la génération de PDF, il est essentiel de prendre en compte des facteurs tels que la construction, la lecture et les capacités de conversion, garantissant une intégration sans faille et des performances optimales.

Bibliothèques JavaScript

Considérons, par exemple, le scénario où nous voulons que le client puisse télécharger et imprimer une copie de notre facture PDF sans effort. De plus, il est crucial pour nous de maintenir la disposition précise de la facture et d'assurer une qualité d'impression irréprochable.

Dans cette section, nous allons examiner une série de bibliothèques JavaScript très prisées qui excellent dans la conversion et la création de documents HTML en PDF, nous fournissant des outils polyvalents pour une génération et une conversion de documents efficaces et précises.

1. PDFKit

PDFKit était une bibliothèque PDF qui a été l'une des premières à être lancée dans l'écosystème des bibliothèques JavaScript. Elle a considérablement gagné en popularité depuis sa sortie initiale en 2012, et à partir de 2021, elle reçoit encore des mises à jour régulières.

En utilisant Webpack, PDFKit offre un support à la fois pour les bibliothèques Node et les navigateurs web, les polices personnalisées et l'intégration d'images sont pris en charge.

Cependant, comme nous le verrons dans la comparaison, certaines bibliothèques PDF ne sont en fait que des wrappers PDFKit et sont peut-être un peu plus faciles à utiliser que PDFKit.

Il n'y a pas d'API de haut niveau disponible pour PDFKit. La documentation est souvent difficile aussi. Il faut un certain temps pour s'y habituer, comme on pourrait s'y attendre, et vous pourriez constater que produire des PDFs en utilisant JavaScript n'est pas toujours la tâche la plus facile.

// Requiring the necessary modules for file system and PDF document creation.
const fs = require('fs');
const PDFDocument = require('pdfkit');

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

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

// Define the output file location and start writing the PDF content to it
doc.pipe(fs.createWriteStream('Demo.pdf'));

// Finalize the PDF file
doc.end();
// Requiring the necessary modules for file system and PDF document creation.
const fs = require('fs');
const PDFDocument = require('pdfkit');

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

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

// Define the output file location and start writing the PDF content to it
doc.pipe(fs.createWriteStream('Demo.pdf'));

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

2. pdfmake

Contrairement à PDFKit qui utilise la méthode impérative conventionnelle pour générer quelque chose, pdfmake utilise une approche déclarative. En conséquence, l'utilisation de la bibliothèque pdfmake facilite la concentration sur la fonctionnalité souhaitée de la production de PDF plutôt que de perdre du temps à enseigner à la bibliothèque comment réaliser un certain résultat.

Il est crucial de garder à l'esprit que bien que certaines solutions puissent sembler prometteuses, il se peut qu'elles ne soient pas parfaites. Un exemple est l'intégration de polices personnalisées avec pdfmake lors de l'utilisation de Webpack, ce qui peut potentiellement entraîner des problèmes. Malheureusement, il y a peu de documentation en ligne disponible concernant ce problème spécifique. Cependant, si vous n'utilisez pas Webpack, vous pouvez facilement cloner le dépôt Git et exécuter le script d'intégration de polices pour surmonter les éventuels obstacles liés à l'intégration de polices personnalisées.

<!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 to create and print a PDF document
        function CreatePdf() {
            // Define document content and styles
            var docDefinition = {
                content: [
                    { text: "Hello world" } // Text content to be included in the PDF
                ],
                defaultStyle: {}
            };
            // Create and print the PDF using pdfMake library
            pdfMake.createPdf(docDefinition).print();
        }
    </script>
    <!-- Button to trigger PDF creation and printing -->
    <button onclick="CreatePdf()">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 to create and print a PDF document
        function CreatePdf() {
            // Define document content and styles
            var docDefinition = {
                content: [
                    { text: "Hello world" } // Text content to be included in the PDF
                ],
                defaultStyle: {}
            };
            // Create and print the PDF using pdfMake library
            pdfMake.createPdf(docDefinition).print();
        }
    </script>
    <!-- Button to trigger PDF creation and printing -->
    <button onclick="CreatePdf()">Print pdf</button>
</body>
</html>
HTML

Comment créer des fichiers PDF en JavaScript : Figure 1

3. IronPDF

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

IronPDF pour Node.js simplifie le processus de création et de personnalisation de documents PDF par programmation. 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 de PDF polyvalente : Avec IronPDF, les développeurs peuvent générer des PDF à partir de diverses sources, y compris HTML, CSS, JavaScript, images et d'autres types de fichiers. Cette flexibilité permet de créer des documents PDF dynamiques et visuellement attrayants adaptés à des exigences spécifiques.
  • Personnalisation avancée des documents : IronPDF permet aux développeurs d'enrichir 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 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 des performances optimales, avec un support complet pour le multithreading et l'asynchrone. Cela garantit une génération efficace des PDF, ce qui le rend adapté aux applications critiques pour les performances.
  • Jeu de fonctionnalités complet : 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.

Le code ci-dessous démontre comment utiliser JavaScript pour rendre HTML dans un fichier PDF pixel-parfait :

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

(async () => {
    // HTML content containing JavaScript to be executed upon rendering
    const htmlWithJavaScript = `<h1>This is HTML</h1>
    <script>
        document.write('<h1>This is JavaScript</h1>');
        window.ironpdf.notifyRender(); // Notify IronPDF when rendering is done
    </script>`;

    // Rendering options to enable JavaScript
    const renderOptions = {
        enableJavaScript: true,
    };

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

    // Save the PDF to a file
    await pdf.saveAs("javascript-in-html.pdf");
})();
import { PdfDocument } from "@ironsoftware/ironpdf";

(async () => {
    // HTML content containing JavaScript to be executed upon rendering
    const htmlWithJavaScript = `<h1>This is HTML</h1>
    <script>
        document.write('<h1>This is JavaScript</h1>');
        window.ironpdf.notifyRender(); // Notify IronPDF when rendering is done
    </script>`;

    // Rendering options to enable JavaScript
    const renderOptions = {
        enableJavaScript: true,
    };

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

    // Save the PDF to a file
    await pdf.saveAs("javascript-in-html.pdf");
})();
JAVASCRIPT

Vous pouvez également exécuter du JavaScript personnalisé qui modifie facilement l'apparence du contenu HTML :

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

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

    // HTML content which will be affected by the custom JavaScript
    const htmlContent = "<h1>Happy New Year!</h1>";

    // Rendering options to enable and apply the custom JavaScript
    const renderOptions = {
        enableJavaScript: true,
        javascript: javascriptCode,
    };

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

    // Save the PDF with the applied JavaScript effects
    await pdf.saveAs("executed_js.pdf");
})();
import { PdfDocument } from "@ironsoftware/ironpdf";

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

    // HTML content which will be affected by the custom JavaScript
    const htmlContent = "<h1>Happy New Year!</h1>";

    // Rendering options to enable and apply the custom JavaScript
    const renderOptions = {
        enableJavaScript: true,
        javascript: javascriptCode,
    };

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

    // Save the PDF with the applied JavaScript effects
    await pdf.saveAs("executed_js.pdf");
})();
JAVASCRIPT

Comment créer des fichiers PDF en JavaScript : Figure 2

Lorsque nous cliquons sur le bouton de téléchargement, il téléchargera le fichier PDF comme il l'indique sur la page PDF de l'image ci-dessus. Le fichier PDF créé sera comme celui ci-dessous.

Comment créer des fichiers PDF en JavaScript : Figure 3

Des tutoriels plus détaillés peuvent être trouvés dans le tutoriel de création de PDF en C# d'IronPDF.

Conclusion

Il convient de mentionner que lorsque le code JavaScript montré ci-dessus est utilisé par d'autres, il a le potentiel de mauvais usage et de problèmes de sécurité. Il est crucial de prendre en compte les risques tels que les accès non autorisés et les vulnérabilités de sécurité des données tout en plaçant un tel code sur une page web ou un site web. De plus, il est également important de prendre en compte la nécessité de supporter des navigateurs obsolètes qui pourraient ne pas avoir toutes les fonctionnalités nécessaires et des problèmes de compatibilité avec différents systèmes et navigateurs.

IronPDF is not only available for Node.js but also for other popular platforms including .NET, Java, and Python. Cette disponibilité multiplateforme assure la cohérence et la flexibilité pour les développeurs travaillant sur différentes piles technologiques. Avec ses riches fonctionnalités, son intégration transparente et ses performances robustes, IronPDF est un outil précieux pour les développeurs cherchant à rationaliser la génération de PDF au sein de leurs projets Node.js.

To accommodate various developer demands, the library provides a variety of licensing options, including a free trial license and additional developer licenses that are available for purchase. Le package $799 Lite est livré avec une licence permanente, une garantie satisfait ou remboursé de 30 jours, un an de support logiciel, et des options de mise à niveau. Il n'y a aucune autre dépense au-delà de l'achat initial.

Darrius Serrant
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 ...

Lire la suite

Articles connexes

Essai de 30 jours → Produit complet. Pas de limites. Pas de carte. Démarrer l'essai gratuit