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

Comment imprimer un fichier PDF en JavaScript

Darrius Serrant
Darrius Serrant
Mis à jour:

1.0 Introduction

Le format de document portable (PDF) a été développé par Adobe dans le but de partager des documents avec texte et 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é actuelle. De nombreuses entreprises créent des documents et des factures en utilisant des 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 qui utilise ce type de bibliothèque, nous devons peser plusieurs facteurs, y compris les capacités de construction, de lecture et de conversion.
Dans ce tutoriel, nous passerons en revue une variété de bibliothèques JavaScript pour produire des PDF. Nous analyserons la bibliothèque JS et les scénarios d'application réels en nous concentrant sur trois points principaux :

  • La configuration d'exécution
  • Les modules qui facilitent la saisie et les polices personnalisées
  • Facilité d'utilisation

Après avoir lu ceci, vous serez en mesure de sélectionner la bibliothèque PDF idéale pour votre application JavaScript. Enfin, nous aborderons également IronPDF, une bibliothèque PDF utile et efficace.

class="hsg-featured-snippet">

Comment imprimer un fichier PDF en JavaScript

  1. Intégrer le PDF dans une balise iframe
  2. Accéder à l'option d'impression qui est fournie avec le visualiseur PDF de l'iframe
  3. Imprimer le PDF de la page actuelle en utilisant JavaScript
  4. Invoquer la méthode printJS et passer l'ID de l'élément à la propriété imprimable
  5. Utiliser une bibliothèque alternative pour imprimer en .NET C# en utilisant la méthode Print

2.0 Bibliothèques

Considérons le scénario où nous voulons que le client puisse télécharger et imprimer une copie de notre facture. Nous avons besoin que cette facture soit imprimée avec précision et de manière appropriée. Ici, nous allons examiner de plus près quelques-unes des nombreuses bibliothèques disponibles pour convertir cette facture du format de fichier HTML en PDF.

2.1 Code JavaScript Pur

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 depuis une page Web. Tout ce dont vous avez besoin est une iframe sur votre site Web ou la capacité d'en construire une 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.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Print PDF</title>
</head>
<body>
    <!-- Embedding the PDF in an iframe -->
    <iframe 
        src="Demo.pdf" id="myFrame" 
        frameborder="0" style="border:0;" 
        width="300" height="300">
    </iframe>
    <p>
        <!-- Button to trigger the print function -->
        <input type="button" id="bt" onclick="printPdf()" value="Print PDF" />
    </p>

    <script>
        // JavaScript function to print the PDF inside the iframe
        let printPdf = () => {
            // Access the iframe
            let objFra = document.getElementById('myFrame');
            // Focus the iframe's window
            objFra.contentWindow.focus();
            // Trigger the print dialog
            objFra.contentWindow.print();
        }
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Print PDF</title>
</head>
<body>
    <!-- Embedding the PDF in an iframe -->
    <iframe 
        src="Demo.pdf" id="myFrame" 
        frameborder="0" style="border:0;" 
        width="300" height="300">
    </iframe>
    <p>
        <!-- Button to trigger the print function -->
        <input type="button" id="bt" onclick="printPdf()" value="Print PDF" />
    </p>

    <script>
        // JavaScript function to print the PDF inside the iframe
        let printPdf = () => {
            // Access the iframe
            let objFra = document.getElementById('myFrame');
            // Focus the iframe's window
            objFra.contentWindow.focus();
            // Trigger the print dialog
            objFra.contentWindow.print();
        }
    </script>
</body>
</html>
HTML

Pour imprimer un PDF, le contenu d'un document peut être affiché à l'aide d'une iframe, puis le contenu peut être imprimé en utilisant JavaScript. Dans les deux cas, une iframe est requise. Dans l'exemple ci-dessus, il y a une iframe avec une source (le PDF). Il y a aussi un élément d'entrée de type bouton.

La propriété onclick du bouton invoquera la méthode printPdf.

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

2.2 Print.js

Print.js a été principalement créé pour nous permettre d'imprimer des fichiers PDF à partir de nos applications sans avoir à naviguer, les importer et les imprimer depuis l'interface utilisateur, ou utiliser des intégrations. C'est pour des circonstances particulières où 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 d'imprimer des rapports générés côté serveur, par exemple, cela peut être utile. Ces rapports vous sont renvoyés sous forme de documents PDF. Ces fichiers peuvent être imprimés sans avoir besoin d'être ouverts. Au sein de nos applications, Print.js offre un moyen pratique d'imprimer ces fichiers.

<!DOCTYPE html>
<html>
<head>
    <title>Print.js Example</title>
    <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>
    <!-- Area to be printed -->
    <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 to trigger Print.js -->
    <button id="btnPrint">Print</button>

    <script>
        $(document).ready(function(){
            // When the print button is clicked
            $("#btnPrint").on("click", function(){
                // Use Print.js to print the content of #print-area
                printJS({
                    printable: 'print-area',
                    type: 'html'
                });
            });
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>Print.js Example</title>
    <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>
    <!-- Area to be printed -->
    <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 to trigger Print.js -->
    <button id="btnPrint">Print</button>

    <script>
        $(document).ready(function(){
            // When the print button is clicked
            $("#btnPrint").on("click", function(){
                // Use Print.js to print the content of #print-area
                printJS({
                    printable: 'print-area',
                    type: 'html'
                });
            });
        });
    </script>
</body>
</html>
HTML

Le code ci-dessus peut être utilisé pour imprimer des fichiers PDF directement depuis le site Web. Il montre que l'impression va imprimer 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 - La bibliothèque PDF pour Node.js

IronPDF est une bibliothèque PDF pour Node.js complète qui excelle en précision, facilité d'utilisation et rapidité. Il offre une vaste gamme de fonctionnalités pour générer, éditer et formater des PDF directement à partir de HTML, d'URLs et d'images dans React. Avec la prise en charge de différentes plateformes, y compris Windows, MacOS, Linux, Docker, et les plateformes cloud comme Azure et AWS, IronPDF assure 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.

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 de Fonctionnalités Complet : Avec plus de 50 fonctionnalités pour créer, formater et éditer des documents PDF, IronPDF offre 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.

Here is an example of generating and saving a PDF document from HTML File, HTML String, and URL to preserve formatting for printing:

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

// An async function to demonstrate how to generate PDF documents
(async () => {
    // Create a PDF from a URL
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    // Save it to a file
    await pdfFromUrl.saveAs("website.pdf");

    // Create a PDF from a local HTML file
    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    // Save it to a file
    await pdfFromHtmlFile.saveAs("markup.pdf");

    // Create a PDF from an HTML string
    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    // Save it to a file
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();
import { PdfDocument } from "@ironsoftware/ironpdf";

// An async function to demonstrate how to generate PDF documents
(async () => {
    // Create a PDF from a URL
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    // Save it to a file
    await pdfFromUrl.saveAs("website.pdf");

    // Create a PDF from a local HTML file
    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    // Save it to a file
    await pdfFromHtmlFile.saveAs("markup.pdf");

    // Create a PDF from an HTML string
    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    // Save it to a file
    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 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 il pourrait être abusé par d'autres. L'utilisation du code source de cette manière est possible. De plus, il n'est pas difficile d'ajouter du code au site Web qui met en danger la sécurité des données qui y sont envoyées. La bibliothèque JavaScript susmentionnée est vue différemment par différents navigateurs. Le code doit donc être exécuté sur une variété de systèmes avant d'être publié. Étant donné que certaines nouvelles fonctionnalités ne sont pas prises en charge par les anciens navigateurs, nous devons également examiner la compatibilité des navigateurs pour celles-ci. 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 simple d'IronPDF pour les frameworks et bibliothèques construits en JavaScript, l'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 peu 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 offre un essai gratuit pour Node.js, vous pouvez donc tester sa fonctionnalité complète avant de prendre une décision éclairée. It is also available for other languages like C# .NET, Java and Python. Visitez le site Web de IronPDF pour plus de détails. Téléchargez IronPDF pour Node.js depuis la page de téléchargement de IronPDF pour Node.js.

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