Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

La librairie JSPDF

Par Adeline BASTIDE Publié le 07/08/2016 à 12:31:35 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Introduction

JSPDF, une solution HTML5 coté client, est une librairie open source qui permet de générer des documents PDF depuis son site web.

Il est compatible sur les diffférents navigateurs Internet tels que : Chrome, Firefox (3+), Safari (3+), Opera et IE (6+).

Il fournit plusieurs fonctionnalités afin de créer divers éléments pour les pages PDF.

Elle est disponible en téléchargement gratuit depuis le site officiel de la librairie jspdf.

Mise en place

Une fois la librairie téléchargée, il suffit d'inclure le script jspdf.js dans la page html, avec la balise <script></script>, comme ci-dessous :

<script type="text/javascript" src="scripts/jspdf.js"></script>

Il est aussi possible de l'installer via les gestions de paquets.

	bower install jspdf
	npm install jspdf
	

Utilisation

Une utilisation basique de cette librairie, est de créer un PDF avec du texte et de le sauvegarder.

var pdf = new jsPDF();
pdf.text(25, 25, 'Hello world!');
pdf.save('HelloWord.pdf');
	

La fonction new jsPDF peut prend plusieurs paramètres, tels que :

- orientation, la valeur par défaut est le mode "portrait". Pour le changer, il suffit de préciser "landscape".

var pdf = new jsPDF('landscape');

- unit, la valeur par défaut est le "mm", on peut le changer en points ("pt"), en "cm", ou "in".

- format, permet de changer le format de la page, par défaut elle prend le format "A4". Autres formats "A3", "A5", "letter", ou encore "legal".

La fonction .text prend 3 paramètres : x,y,'string' , permet de préciser la position du texte en précisant les points x et y, et le texte qu'on souhaite.

Les fonctionnalités avancées

pdf.addPage(width, height)

Permet d'ajouter une nouvelle page dans le fichier PDF.

pdf.setFontType('syle')

Personnaliser le style de texte que l'on veut (italique ou gras).

pdf.setFont('fontfaceName')

Personnaliser la police d'écriture, comme Comic, ou Arial.

Il est possible de travailler avec des lignes et des formes afin de les insérer dans le document.

pdf.setFillColor(128,128,128) & pdf.setDrawColor(128,128,128) 

On passe en paramètre les valeurs de la couleur en RGB.

pdf.setLineWidth(1)

Permet de définir la largeur du trait. L'unité de largeur dépendra de l'unité définie dans le constructeur.

Pour voir d'autres exemples d'utilisation des formes géométriques (ellipse, cercle, ligne, etc), il suffit de regarder la documentation sur le site officiel de la librairie jspdf..

Les plugins

Il est possible de personnaliser le document PDF avec des plugins.

JSPDF Autotable

Ce plugin va permettre de générer des tableaux ou des listes dans les documents.

var columns = ["ID", "Name", "Email", "City", "Country",
    "Expenses"]; 

var rows = [ [1, "Chaya Fisher",
    "Braulio42@hotmail.com", "North Samanta chester", "New Caledonia",
    "324.84"], [2, "Ken Graham","Madelyn_Keeling25@gmail.com", "Newell mouth",
    "Cambodia", "653.72"], [3, "Braulio Wilkinson",
    "Tressie.Monahan@yahoo.com", "Anguila",
    "531.0"]];
var pdf = new jsPDF('p', 'pt');
pdf.autoTable(columns, rows);
pdf.save('table.pdf');

Les données qui alimentent le tableau peuvent provenir d'une page HTML ou d'un fichier JS.

Depuis une source externe

Ici un exemple d'utilisation de la librairie avec des données depuis une API.

	    var doc = new jsPDF('p', 'pt');

        var columns = [{title:"Url",dataKey :"url"},{title:"Date", dataKey:"date"},{title:"Titre", dataKey:"Titre"},
                {title:"Section", dataKey:"section"}];
        var rows= [];

        var totalPagesExp = "{total_pages_count_string}";
	    $http.get('http://content.guardianapis.com/search?api-key=test')
                .success(function (data) {
                    $scope.articles = data('results');

                    angular.forEach($scope.articles, function(item){                  
                        rows.push({"url" : item.webUrl,
                            "date" : item.webPublicationDate,
                            "titre": item.webTitle,
                            "section": item.sectionName;                    
                    });

                    doc.setFontSize(14);
                    doc.text('Mon rapport', 220, 60); //titre
                    doc.setFontSize(11);
                    doc.text('Articles à l'honneur', 40, 90); //

                    var footer = function (data) { // Total page 
                        var str = "Page " + data.pageCount;
                        if (typeof doc.putTotalPages === 'function') {
                            str = str + " sur " + totalPagesExp;
                        }
                        doc.text(str, data.settings.margin.left, doc.internal.pageSize.height - 30);
                    };

                    var options = {startY: 120,theme: 'plain',styles: {fontSize: 8}, afterPageContent: footer};
                    doc.autoTable(columns, rows, options);
                    if (typeof doc.putTotalPages === 'function') {
                        doc.putTotalPages(totalPagesExp);
                    }                
                    doc.save('rapport.pdf');   //télécharger                 
                }).error(function (data, status) {
                console.log(data + status);
            });

Il est possible de personnaliser les tableaux comme l'on souhaite, soit avec des thèmes prédéfinis, ou en les créant soi-même. D'ajouter une entête, un pied de page, du contenu texte, selon les besoins.

Les tableaux peuvent prendre plusieurs formes, par exemple, en mettant les entêtes de colonnes à l'horizontale ou à la verticale.

JSPDF png_support

Ajoute des images sur le document PDF.

JSPDF text-align

Gére l'alignement du texte.

Conclusion

Cette librairie est donc un outil puissant, en pur javascript, qui va permettre de générer des documents PDF au sein d'un site. Sa mise en place est relativement simple, et personnalisable grâce à la librairie elle-même, mais aussi avec les plugins associés.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels