OUTILS PDF

Comment imprimer un fichier PDF en JavaScript

Publié mai 23, 2023
Partager:

1.0 Introduction

Le format de document portable(PDF (EN ANGLAIS)) a été développé par Adobe dans le but de partager des documents contenant 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 invoquera 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 de caractères

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

IronPDF est une bibliothèque Node.js PDF complète qui excelle en termes de précision, de facilité d'utilisation et de 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 d'enregistrement d'un document PDF à partir deFichier HTML, chaîne HTML, etURL afin de préserver le formatage 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 au PDF, veuillez consulter le site suivantExemples de code IronPDF pour Node.js page.

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.

Grâce au processus d'intégration simple d'IronPDF pour les frameworks et les bibliothèques construits en JavaScript, d'excellentsDocumentation 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 ordre pour générer et imprimer des PDF de qualité professionnelle dans les applications liées à Node.js.

IronPDF offre un service deessai gratuit pour Node.jsafin 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 langues telles queC# .NET, Java etPython. Visitez le siteSite web d'IronPDF pour plus de détails. Téléchargez IronPDF pour Node.js à partir du site web de l'entreprisePage de téléchargement d'IronPDF for Node.js.

< 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)

Prêt à commencer ? Version : 2024.11 vient de paraître

Installation gratuite de npm Voir les licences > ;