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.

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.