Génération d'un fichier PDF à l'aide de JavaScript et du didacticiel de la bibliothèque JSPDF

Dans ce tutoriel, vous apprendrez à Générer ou créer un fichier PDF pour vos applications web sur le côté client en utilisant Javascript et Bibliothèque JSPDF. Le didacticiel vise à fournir aux étudiants en informatique/informatique et aux nouveaux développeurs Web une référence pour apprendre à générer PDF fichiers à l’aide de JavaScript. Ici, des extraits simples qui démontrent l’objectif de ce didacticiel sont fournis. Un exemple de fichier zip de code source fonctionnel est également fourni et peut être téléchargé gratuitement.

Pourquoi implémenter une Génération PDF dans les applications web ?

Les développeurs implémentent une fonctionnalité de génération de PDF dans les applications Web pour répondre aux exigences du système qu’ils construisent. C’est l’une des fonctionnalités courantes que les utilisateurs finaux demandent ou recherchent dans une application Web, en particulier lors de l’exportation d’informations ou de rapports à partir du système.

Comment générer des fichiers PDF en utilisant JavaScript ?

Il existe de nombreuses bibliothèques JS disponibles en ligne qui ont été conçues pour Génération de fichiers PDF dans les applications Web. L’une de ces bibliothèques est la Bibliothèque JSPDF. Bibliothèque JSPDF est une bibliothèque JS gratuite pour générer des PDF. Voir le processus d’installation du Bibliothèque JSPDF au GithubGenericName.

Extraits de démonstration

Voici quelques exemples d’extraits pour l’utilisation de Bibliothèque JSPDF.

Génération simple de PDF

L’extrait suivant montre comment générer un fichier PDF. Le script explique comment ajouter du contenu sur un PDF par ligne ou paragraphe. L’extrait charge le Cadre d’amorçage en utilisant CDN qui nécessite une connexion Internet pour afficher correctement l’interface utilisateur.

Interface

<!DOCTYPE html>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
 
    <script src=" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <!-- HTML2 Canvas Library -->
    <!-- JSPDF Library -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient">
            <a class="navbar-brand" href="./">jsPDF Library - DEMO</a>
                <a href=" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
    </nav>
    <div class="container-fluid px-5 my-3">
        <div class="col-lg-6 col-md-8 col-sm-12 mx-auto">
            <div class="card rounded-0">
                <div class="card-header">
                    <div class="d-flex w-100 align-items-end">
                        <div class="col-auto flex-shrink-1 flex-grow-1">
                            <div class="card-title text-muted"><b>Simple PDF Content</b></div>
                        <div class="col-auto flex-shrink-1">
                            <button class="btn btn-primary rounded-0 btn-sm" type="button" id="simple_pdf">Export to PDF</button>
 
                <!-- Simple Exporting PDf Card -->
                <div class="card-body rounded-0">
                    <div class="container-fluid">
                        <div id="simple_pdf_container" class="page-container">
                            <p>jsPDF Library DEMO</p>
                            <p>I love SourceCodester</p>
                            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed alias nam nesciunt soluta unde nemo provident vero sit architecto veniam expedita ab, non illum nulla pariatur error magni! Ducimus, facere.</p>
                            <p>I love SourceCodester</p>
                <!-- End of Simple Exporting PDf Card -->

Production

Javascript

    var simple_pdf_btn = document.getElementById('simple_pdf')
    window.simple_pdf = function(){
        var container = document.getElementById('simple_pdf_container')
        let pdf = new jsPDF();
 
        var p = container.querySelectorAll('p')
        var line = 10;
        p.forEach(el => {
            pdf.text(pdf.splitTextToSize(el.innerText, 180), 10,line);
            line += 10
        })
        pdf.save('simple_pdf.pdf')
    }
    window.onload = function(){
 
        simple_pdf_btn.addEventListener('click', function(e){
            e.preventDefault()
            simple_pdf()
        })
 
    }

Production

Conversion d’éléments HTML en PDF

L’extrait de code suivant montre comment générer un fichier PDF qui, à partir de l’utilisation de Nœud HTML comme contenu.

Interface

<!DOCTYPE html>

  


    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
 
    <script src=" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <!-- HTML2 Canvas Library -->
    <!-- JSPDF Library -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient">
            <a class="navbar-brand" href="./">jsPDF Library - DEMO</a>
                <a href=" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
    </nav>
    <div class="container-fluid px-5 my-3">
 
        <div class="col-lg-6 col-md-8 col-sm-12 mx-auto">
            <!-- Converting and Exporting an HTML Element as PDF -->
            <div class="card rounded-0">
                <div class="card-header">
                    <div class="d-flex w-100 align-items-end">
                        <div class="col-auto flex-shrink-1 flex-grow-1">
                            <div class="card-title text-muted"><b>Exporting HTML Element to PDF</b></div>
                        <div class="col-auto flex-shrink-1">
                            <button class="btn btn-primary rounded-0 btn-sm" type="button" id="html_pdf">Export Element to PDF</button>
                <div class="card-body rounded-0">
                    <div class="container-fluid">
                        <div id="html_pdf_container" class="page-container">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque est odio, lobortis eget pharetra et, commodo non felis. Pellentesque dui dolor, lobortis et blandit vel, commodo nec tellus. Nunc ac metus iaculis, scelerisque quam et, luctus ipsum. Proin euismod nec mi sed venenatis. Suspendisse id nibh ipsum. Sed vestibulum vulputate purus, ac ultricies nulla finibus at. Maecenas vel lacus erat. Nam odio magna, porttitor luctus efficitur ac, auctor sit amet lorem. Etiam ultrices tempus molestie. Sed sagittis nulla nec nibh auctor finibus.
 
                                <table class="table table-bordered">
 
            <!-- End of Converting and Exporting an HTML Element as PDF -->

Production

Javascript

    var html_pdf_btn = document.getElementById('html_pdf')
 
    window.html_pdf = function(){
        var container = document.getElementById('html_pdf_container').cloneNode(true)
 
        let pdf = new jsPDF('p', 'pt', 'letter');
        container.querySelectorAll('table').forEach(el=>{
            el.removeAttribute('class')
            el.style.borderCollapse = 'collapse'
            el.style.width = '100%'
            el.querySelectorAll('td, th').forEach(cell=>{
                cell.style.border = '1px solid'
            })
        })
            console.log(container.innerHTML)
 
        pdf.html(`<div style='position:absolute;left:0; top:0; bottom:0; height:auto; width:600px; padding:10px;'>${container.innerHTML}<div>`, {
                callback: function (pdf) {
                    pdf.save('html_pdf.pdf')
                },
                windowWidth: 100
            }
        )
        // pdf.save('html_pdf.pdf')
    }
 
    window.onload = function(){
 
        html_pdf_btn.addEventListener('click', function(e){
            e.preventDefault()
            html_pdf()
        })
    }

Production

Pour en savoir plus sur l’utilisation Bibliothèque JSPDFvous pouvez visiter leur site documentaire.

J’ai également fourni le fichier zip de code source de travail que j’ai créé pour ce tutoriel. Vous pouvez le télécharger en cliquant sur le Bouton de téléchargement situé après le contenu de cet article.

C’est ça! J’espère Cela Génération d’un fichier PDF à l’aide de JavaScript et du didacticiel de la bibliothèque JSPDF vous aide dans vos recherches et vous sera utile pour vos projets d’applications web actuels et futurs.