OUTILS PDF

Comment imprimer un fichier PDF en JavaScript

Jordi Bardia
Jordi Bardia
mai 23, 2023
Partager:

1.0 Introduction

Le format de document portable (PDF) a été développé par Adobe dans le but de partager des documents avec du texte et des graphiques. Un programme supplémentaire est nécessaire pour ouvrir un document PDF en ligne. Les fichiers PDF sont très importants pour les informations critiques dans la société d'aujourd'hui. De nombreuses entreprises créent des documents et des factures à l'aide de fichiers PDF. Pour répondre aux besoins des clients, les développeurs produisent des documents PDF. Il n'a jamais été aussi facile de créer des PDF grâce aux bibliothèques modernes.

Pour sélectionner la bibliothèque idéale pour un projet utilisant ce type de bibliothèque, nous devons prendre en compte un certain nombre de facteurs, notamment les capacités de construction, de lecture et de conversion.

Dans ce tutoriel, nous passerons en revue diverses bibliothèques JavaScript pour la production de PDF. Nous analyserons la bibliothèque JS et les scénarios d'application du monde réel en nous concentrant sur trois points principaux :

2.0 Bibliothèques

Prenons l'exemple d'un scénario dans lequel nous voulons que le client puisse télécharger et imprimer une copie de notre facture. Cette facture doit être imprimée avec précision et de manière appropriée. Nous allons examiner de plus près quelques-unes des nombreuses bibliothèques disponibles pour convertir cette facture du format HTML au format PDF.

2.1 Code JavaScript simple

Normalement, pour imprimer le contenu d'un fichier PDF, nous le téléchargeons sur notre ordinateur, l'ouvrons et sélectionnons l'option d'impression. JavaScript, en revanche, facilite l'impression d'un fichier PDF directement à partir d'une page web. Tout ce dont vous avez besoin, c'est d'un iframe sur votre site web ou de la possibilité d'en créer un dynamiquement, d'ajouter le document et de l'imprimer. Je vais vous montrer comment utiliser JavaScript pour imprimer un fichier PDF. Une page web à l'intérieur d'une autre page web est affichée à l'aide d'une iframe. Pour que la page web s'affiche, l'iframe doit connaître sa source.

<html>
<head>
    <title>javascript print pdf</title>
</head>
<body>
    <iframe 
        src="Demo.pdf" id="myFrame" 
            frameborder="0" style="border:0;" 
                width="300" height="300">
    </iframe>
    <p>
        <input type="button" id="bt" onclick="print()" value="Print PDF" />
    </p>
</body>

<script>
    let print = () => {
        let objFra = document.getElementById('myFrame');
        objFra.contentWindow.focus();
        objFra.contentWindow.print();
    }
</script>
</html>
<html>
<head>
    <title>javascript print pdf</title>
</head>
<body>
    <iframe 
        src="Demo.pdf" id="myFrame" 
            frameborder="0" style="border:0;" 
                width="300" height="300">
    </iframe>
    <p>
        <input type="button" id="bt" onclick="print()" value="Print PDF" />
    </p>
</body>

<script>
    let print = () => {
        let objFra = document.getElementById('myFrame');
        objFra.contentWindow.focus();
        objFra.contentWindow.print();
    }
</script>
</html>
HTML

En ce qui concerne l'impression de PDF, le contenu d'un document peut être affiché à l'aide d'une iframe, puis le contenu peut être imprimé à l'aide de JavaScript. Dans les deux cas, une iframe est nécessaire. Dans l'exemple ci-dessus, il y a une iframe avec une source (le PDF). Il existe également un élément de saisie de type bouton.

La propriété onclick du bouton déclenchera la méthode print.

Comment imprimer un fichier PDF en JavaScript : Figure 1 - Impression

2.2 Print.js

Print.js a été créé pour nous permettre d'imprimer des fichiers PDF à partir de nos applications sans avoir à naviguer à l'extérieur, à les importer et à les imprimer à partir de l'interface utilisateur, ou à utiliser des embeds. Il s'agit de circonstances particulières dans lesquelles les utilisateurs n'ont besoin que d'imprimer les fichiers PDF et n'ont pas besoin de les ouvrir ou de les télécharger.

Lorsque les utilisateurs demandent à imprimer des rapports générés côté serveur, par exemple, cela peut s'avérer utile. Ces rapports vous sont renvoyés sous forme de documents PDF. Ces fichiers peuvent être imprimés sans avoir besoin d'être ouverts. Dans nos applications, Print.js offre un moyen pratique d'imprimer ces fichiers.

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
        <link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">   
    </head>
    <body>
        <div id="print-area" class="print-main">
            <table>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
                <tr>
                    <td>AAA</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>BBB</td>
                    <td>24</td>
                </tr>
            </table>
        </div>
        <button id="btnPrint">Print</button>
        <script>
                $(document).ready(function(){
                    $("#btnPrint").on("click",function(){
                        printJS({
                            printable: 'print-area',
                            type: 'html'});
                    })
                })
        </script>
    </body>
</html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
        <link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">   
    </head>
    <body>
        <div id="print-area" class="print-main">
            <table>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
                <tr>
                    <td>AAA</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>BBB</td>
                    <td>24</td>
                </tr>
            </table>
        </div>
        <button id="btnPrint">Print</button>
        <script>
                $(document).ready(function(){
                    $("#btnPrint").on("click",function(){
                        printJS({
                            printable: 'print-area',
                            type: 'html'});
                    })
                })
        </script>
    </body>
</html>
HTML

Le code ci-dessus peut être utilisé pour imprimer des fichiers PDF directement à partir du site web. Il montre que l'impression imprimera toutes les chaînes HTML disponibles à l'intérieur de l'élément HTML avec l'ID nommé "print-area".

Comment imprimer un fichier PDF en JavaScript : Figure 2 - Impression de ces chaînes

2.3 IronPDF for Node.js PDF Library (en anglais)

IronPDF est une bibliothèque PDF pour Node.js complète qui excelle en précision, facilité d'utilisation et rapidité. Il offre un large éventail de fonctionnalités pour générer, éditer et formater des PDF directement à partir de HTML, d'URL et d'images dans React. Grâce à la prise en charge de diverses plateformes, notamment Windows, macOS, Linux, Docker et des plateformes cloud comme Azure et AWS, IronPDF garantit une compatibilité multiplateforme. Son API conviviale permet aux développeurs d'intégrer rapidement la génération et la manipulation de PDF dans leurs projets Node.js.

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.

    Voici un exemple de génération et de sauvegarde d'un document PDF à partir d'un fichier HTML, d'une chaîne HTML et d'une URL pour préserver la mise en forme pour l'impression :

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

(async () => {
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    await pdfFromUrl.saveAs("website.pdf");

    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    await pdfFromHtmlFile.saveAs("markup.pdf");

    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();
JAVASCRIPT

Pour plus d'exemples de code sur les tâches liées aux PDF, veuillez visiter cette page d'exemples de code IronPDF pour Node.js.

Comment imprimer un fichier PDF en JavaScript : Figure 3 - IronPDF

3.0 Conclusion

L'utilisateur peut voir le code JavaScript ci-dessus, mais d'autres personnes pourraient l'utiliser à mauvais escient. L'utilisation du code source de cette manière est possible. En outre, il n'est pas difficile d'ajouter au site web un code qui met en péril la sécurité des données envoyées par son intermédiaire. La bibliothèque JavaScript mentionnée ci-dessus est perçue différemment par les différents navigateurs. Le code doit donc être exécuté sur plusieurs systèmes avant d'être publié. Certaines nouvelles fonctionnalités n'étant pas prises en charge par les anciens navigateurs, nous devons également nous pencher sur la compatibilité de ces derniers. Les bibliothèques mentionnées ci-dessus peuvent produire des fichiers PDF. L'utilisateur doit également avoir une certaine familiarité avec le script avec lequel il travaille.

Avec le processus d'intégration simplifié d'IronPDF pour les frameworks et bibliothèques développés en JavaScript, une excellente documentation IronPDF pour Node.js et des exemples de code, ainsi qu'un support technique réactif, les développeurs peuvent être opérationnels en un rien de temps, ce qui en fait un choix de premier plan pour générer et imprimer des PDF de qualité professionnelle dans les applications liées à Node.js.

IronPDF propose un essai gratuit pour Node.js, afin que vous puissiez tester l'ensemble de ses fonctionnalités avant de prendre une décision éclairée. Il est également disponible pour d'autres langages comme C# .NET, Java et Python. Visitez le site Web d'IronPDF pour plus de détails. Téléchargez IronPDF pour Node.js depuis la page de téléchargement IronPDF Node.js.

Jordi Bardia
Ingénieur logiciel
Jordi maîtrise parfaitement Python, C# et C++. Lorsqu'il ne met pas à profit ses compétences chez Iron Software, il se consacre à la programmation de jeux. Partageant des responsabilités en matière de tests de produits, de développement de produits et de recherche, Jordi apporte une valeur ajoutée considérable à l'amélioration continue des produits. Cette expérience variée le stimule et l'engage, et il dit que c'est l'un des aspects qu'il préfère dans son travail chez Iron Software. Jordi a grandi à Miami, en Floride, et a étudié l'informatique et les statistiques à l'université de Floride.
< PRÉCÉDENT
Comment générer un fichier PDF à l'aide de JavaScript
SUIVANT >
Comment convertir HTML en PDF avec React (Tutoriel du développeur)