RootsLabs

More than a tool ! GitHub Google+ LinkedIn RSS

Embarquer des PDF dans une page Web avec pdf.js

Progi1984 - Commentaires (5)

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.

<!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

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.

3. Lotfi, le 27 novembre 2018 à 00:18

Bonjour,
Malheureusement, il semble que le viewer de Mozilla ne supporte que les fichiers legers (taille petite).

4. jimmy, le 22 décembre 2019 à 14:32

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

5. Progi1984, le 22 décembre 2019 à 15:19

@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

Commentaire :