Embarquer des PDF dans une page Web avec pdf.js
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.
<!doctype html>
<html>
<head>
<script src="pdf.js"></script>
<script>
PDFJS.workerSrc = 'pdf.worker.js';
</script>
<script src="file.js"></script>
</head>
<body>
<canvas id="canvasPDF" style="border:1px solid black;"/>
</body>
</html>
Code JavaScript
Etape #0 : définissions quelques variables globales
var numPage = 1; // Numéro de page courante var totalPage = null; // Nombre de pages
Etape #1 : il faut créer un objet PDFJS et définir un document.
var oPdf = PDFJS.getDocument('monfichier.pdf');
Etape #2 : il faut le déclarer via un promise la fonction de rendu.
oPdf.then(renderPDF);
Etape #3 : la fonction de rendu du fichier PDF
function renderPDF(pdf){
// au premier appel de la fonction, on récupère le nombre de pages
if(totalPage == null){
totalPage = pdf.numPages;
}
// Si on est dans les pages du PDF, on récupère la page et via Promise, on demande le rendu de la page
if(numPage <= totalPage){
pdf.getPage(numPage).then(renderPage);
numPage++;
// Puis 1 seconde plus tard, on affiche la page suivante
setTimeout(function() {
renderPDF(pdf);
}, 1000);
}
}
Etape #4 : la fonction de rendu d'une page PDF
function renderPage(page){
// L'échelle de l'image
var scale = 1;
var viewport = page.getViewport(scale);
// Le canvas qui contiendra le rendu du PDF
var canvas = document.getElementById('canvasPDF');
var context = canvas.getContext('2d');
// On définit la taille du canvas pour lui appliquer la taille du PDF
canvas.height = viewport.height;
canvas.width = viewport.width;
// Contexte de rendu avec le contexte 2D du canvas et le viewport pour la page PDF à afficher
var renderContext = {
canvasContext: context,
viewport: viewport
};
// On lance le rendu de la page
page.render(renderContext);
}
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
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.
@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.
Bonjour,
Malheureusement, il semble que le viewer de Mozilla ne supporte que les fichiers legers (taille petite).
Bonjour,
Lorsque j’utilise votre code, j’ai une erreur dans le code HTML me disant qu’il ne trouve pas la variable PDFJS, pourriez vous m’aider ?
merci d’avance
@jimmy : Bonjour, il semble que depuis 2014 Mozilla a fortement amélioré leur librairie et changer le nom des variables. Mais vous pouvez trouver des exemples (avec le code) à cette adresse : https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples. Bonne journée
Ajouter un commentaire