pdf.js Afficher correctement un pdf sur une page web sans flash

Il y a deux ans déjà, j'écrivais sur ce blog quelques solutions pour transformer à la volée du pdf en flash afin de l'afficher sur une page web. A présent, je vous propose de vous passer du flash grâce à pdfjs. J'ai bien bataillé à tenté de l'intégrer sur une page web, mais finalement l'utilisation du "viewer" avec une iframe ça marche au top.

Pdf.js est développé par une équipe de Mozilla. il est aussi décliné en pluggin firefox.

Prérequis installer node

Je l'ai fait sur le serveur, mais il est très probable que l'installation de node (et de python 2.7) puisse être faite sur votre ordinateur local. Vous pousserez le dossier pdfjs à la main sur votre serveur web ultérieurement.

wget http://nodejs.org/dist/v0.8.16/node-v0.8.16.tar.gz
tar -zxvf node-v0.8.16.tar.gz
./configure
make
make install

Télécharger pdf js

sur la racine du site, j'ai fait:

git clone git://github.com/mozilla/pdf.js.git pdfjs
cd pdfjs
#afin de créer un buid.js
node make generic

Un dossier pdfjs a été créé contenant tout ce qu'il faut.

Dans ma page web pour intégrer un pdf:

<iframe width="100%" height="700px;" src="pdfjs/web/viewer.html?file=<?php echo (urlencode($file)); ?>"></iframe>

$file est l'URL du fichier pdf. Il doit etre situé sur le même site que le viewer pdfjs.

Pensez à encoder l'URL du fichier mis en parametre. (urlencode() en php)

Démonstration

J'ai constaté un défaut avec internet explorer, et le navigateur de mon android. Le PDF était un tableau, Il inversait quelques couleurs mais ça restait lisible. Quand à firefox et Safari, ça marchait nickel!

gnieark jeudi, janvier 3 2013, 10:51 Serveurs http web et autres

Commentaires

1. Le jeudi, mai 2 2013, 11:40 par plucile

Bonjour,
comment faire pour désactiver pdfjs ?
merci

2. Le jeudi, mai 2 2013, 16:59 par Gnieark
hello plucile Pour un site qui a mis le pdf dans pdf.js le code de la page, comme c'est le cas pour ce tuto, Pas possible sans être le webmaster. Je pense que ta question c'était surtout parceque sur les dernières versions de firefox, pdf.js est devenu le lecteur de pdf par défaut. dans firefox Edition>préférences>Onglet application Rechercher "pdf" et on peut choisir ce que doit faire firefox avec un PDF preferencesFirefoxApplications.jpeg
3. Le jeudi, mai 2 2013, 18:59 par plucile

Oui, c'était exactement ça, merci :)

4. Le dimanche, mai 5 2013, 22:48 par Todg

Salut,
j'utilise un simple iframe pour appeler le viewer de pdf.js dans une de mes pages d'un autre projet. J'aimerais savoir s'il est possible d'ouvrir un pdf stocké dans mon projet utilisant symfony.
Merci!!!

5. Le jeudi, mai 9 2013, 00:09 par gnieark

Todg> C'est sûrement possible. Je n'utilise pas Symfony, et ne le maîtrise pas assez pour t'aider là dessus.

La difficulté en utilisant un site de dev et un framework , c'est qu'il faut que l'iframe et le pdf soient sur le même site.

6. Le dimanche, mai 12 2013, 02:39 par Todg

En fait je tiens à te préciser que j'utilise l'iframe de la même manière que toi avec le ?file=... sauf que pour moi le paramètre ne passe pas donc pas d'affichage. Sachant que j'utilise wamp server et comme arborescence jai www/pdf.js et www/monProjet.
Merci.

7. Le dimanche, mai 12 2013, 19:18 par Todg

Désolé pour le double post mais j'ai réussi a faire ce que je voulais. J'ai tout simplement rajouté dans la balise script de viwer.js ceci et ca fonctionne :
<script type="text/javascript" src="viewer.js">
var file = $_GET['file'];
</script>

Page top