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.

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


Cet article Embarquer des PDF dans une page Web avec pdf.js est apparu en premier sur RootsLabs.
tags : javascript page pdf planet mozilla planet php web
0 vote
16/06/2014 10:00
Ecrit par Progi1984 - Afficher l'article originel
Vus : 890
Publié par Progi1984 : 78