RootsLabs

More than a tool ! GitHub Google+ LinkedIn RSS

Embarquer des PDF dans une page Web avec pdf.js

Progi1984 - Commentaires (2)

Vous aviez l’habitude d’utiliser le plugin Adobe pour embarquer un PDF dans votre page. Mais vous préféreriez utiliser quelque chose de libre pour afficher vos PDFs et ne pas dépendre d’une solution propriétaire. Mozilla a pensé à nous avec PDF.JS : une bibliothèque JavaScript qui permet de parser et afficher dans un navigateur des fichiers PDF.

Logo PDF.js

Installation

Il faut tout d’abord récupérer une version compressée de la librairie que l’on va pouvoir utiliser dans notre exemple.
Un petit avantage est pdfjsbot : un bot de chez Mozilla qui compresse à chaque commit l’ensemble des fichiers dans deux fichiers (pdf.js et pdf.worker.js).
Pour les récupérer, on va aller sur la branche gh-pages du dépôt Github, puis dans le dossier build où on y trouve les deux fichiers.

Mise en place

Dans notre exemple, nous allons afficher dans notre un fichier PDF nommé monfichier.pdf dans notre page Web. Toutes les secondes, les

Code HTML

Le code HTML de base est simple. Toute la partie rendu se fera dans un canvas HTML5. Il faut donc que le doctype de la page HTML soit du HTML5.
On fait évidemment les appels aux deux fichiers Javascript que l’on a récupéré. Ainsi qu’à un fichier JavaScript où nous feront nos appels à pdf.js.

Code JavaScript

Etape #0 : définissions quelques variables globales

Etape #1 : il faut créer un objet PDFJS et définir un document.

Etape #2 : il faut le déclarer via un promise la fonction de rendu.

Etape #3 : la fonction de rendu du fichier PDF

Etape #4 : la fonction de rendu d’une page PDF

Et voilà, cela reste assez simple et avec un peu de code pour afficher un PDF et passer d’une page à l’autre d’un fichier PDF.

Conclusion

En fait, pdf.js m’a stupéfait de la simplicité de mise en place. Par contre, deux choses manquent : de la DOCUMENTATION et une version minifiée prête à être utilisé sur un site. Mais comme on le voit avec le visualiseur PDF que Mozilla a mis à disposition, il est encore possible de faire beaucoup de choses : zoom, recherche textuelle, vignettes, signets, pièces jointes, rotation, outil main ou propriétés du document. Après les fichiers PDF, Mozilla a décidé de s’attaquer à un autre format propriétaire : les fichiers Adobe Flash avec la bibliothèque Shumway.

Commentaires

1. Vincent, le 19 juin 2014 à 23:15

Article intéressant, c’est amusant car il m’est venu la même idée il y a quelques mois => http://influence-pc.fr/14-03-2014-inclure-des-pdf-sur-votre-site-avec-pdf-js-cree-par-mozilla

Bon le soucis que tu as eu a été le même qu’à mon « époque », aucune documentation et surtout pas moyen de dégoter une version stable. Comment as tu trouvé le dépôt dont tu parles ? Est-ce vraiment stable ?

J’en suis venu à la conclusion qu’utiliser le script proposé en démo hébergé chez Mozilla était le meilleur moyen d’avoir une version stable maintenue à jour, triste quand même.

Tu n’as pas parlé du type de documents supportés, j’ai remarqué que quand il y avait trop de mise en forme cela devenait hasardeux. Pour un usage pro ce serait vraiment à tester au cas par cas par exemple.

2. Progi1984, le 25 juin 2014 à 17:30

@Vincent : Merci de ton commentaire.

Le « dépôt » dont je parle est en fait la branche -du dépôt PDF.JS – représentant la page Web de PDF.JS. Elle est mise à jour à chaque fois qu’elle passe les tests à chaque commit.

En fait, la version que tu utilises est la même que moi vu que c’est le viewer de leur version basée sur les GitHub Pages.
Pour les formats supportés, je dirais : c’est de l’open source, cela s’améliore de jour en jour, et si cela ne marche pas, un ticket ou un pull-request est toujours le bienvenu.

Ajouter un commentaire

Commentaire :