Depuis http://www.flickr.com/photos/garrtron/4469056722/sizes/o/in/photostream/

Inclure des PDF sans plugin sur votre site avec PDF.js (créé par Mozilla)

Stop au players Flash pour lire des PDF ! Depuis Firefox 19 sorti en février 2013, la Fondation Mozilla a inclus dans son navigateur un lecteur PDF embarqué permettant de se passer de logiciel tiers pour lire des PDF.

S’il résout la problématique de l’internaute, il est cependant parfois nécessaire au webmaster d’avoir encore recourt à une technologie abandonnée depuis 2011, le Flash, pour insérer des documents PDF dans des pages Web. Hors le support du Flash est désastreux : mobiles, tablettes, Linux, TV connectées, consoles de jeux ou média center sont dotés de navigateurs dépourvus de plugin Flash, là où le JavaScript a un support universel.

Avertissements

Dans un monde de plus en plus mobiles et de moins en moins PC, la nécessité de s’adapter et de prendre en compte les nouveaux usages est une question récurrente qui se pose en entreprise. Faire ses choix techniques devient délicat lorsqu’il faut jongler entre le support morcelé mais fonctionnel du Flash, et le support universel mais imparfait du JavaScript, du CSS et du HTML qui peuvent littéralement foirer votre rendu selon le navigateur.

Si le Portable Document Format créé par Adobe est une norme ISO depuis le 1er juillet 2008, il n’est en plus pas facile de l’implémenter. Ainsi la solution que je vous propose est jeune et peut ne pas réussir le rendu parfait de toutes les présentations complexes possibles. Elle vous permettra néanmoins d’afficher la plupart des documents de la vie courante (CV, rapports, brochures) sur toute plateforme disposant d’un navigateur !

PDF.JS

Nous y voilà ! Le projet débuté en 2011 propose aujourd’hui une démonstration en ligne à cette adresse. Cette démo est mise à jour régulièrement par Mozilla et vous permet, via des paramètres d’url, de l’utiliser directement pour l’inclure sur vos pages Web.

Exemple :

<p style="text-align: center;"><object id="cv" data="http://mozilla.github.io/pdf.js/web/viewer.html?file=http%3A%2F%2Finfluence-pc.fr%2Fenvois%2Fdocuments%2Fcv.pdf#zoom=page-fit" type="text/html">La visualisation n’est pas encore disponible sur votre navigateur, veillez à le mettre à jour.</object></p>

<script>
pdfDocument = document.getElementById("cv");
pageWidth = document.getElementById("content").offsetWidth;
documentWidth = 0.3 * pageWidth;
pdfDocument.style.width = documentWidth + "px";
pdfDocument.style.height = documentWidth * 1.2 + "px";
</script>

Explication :

  • Avec la balise HTML object, nous obtenons le même comportement d’inclusion d’une page Web externe dans la page courante que le faisait iframe en son temps, à ceci prêt que object dispose d’attributs bien plus nombreux et intéressants.
  • Le petit bout de JavaScript que j’ai ajouté me permet de dimensionner le player dynamiquement en fonction de la largeur de l’écran de celui qui l’affiche (le ratio stipule ici 30% de la largeur de l’article, dans la variable documentWidth), tout en conservant le ratio du format A4 pour sa hauteur.

Résultat :

La visualisation n’est pas encore disponible sur votre navigateur, veillez à le mettre à jour.

Rendu sur un smartphone sous Firefox OS :

PDF.js sous Firefox OS

Si vous n’aimez pas la dépendance à un service externe, vous pouvez récupérer sur le dépôt du projet le player dans le dossier « web » qui sera une version packagée prête à l’emploi. Je n’ai cependant pas réussi à trouver de branche stable, c’est pourquoi je fais appel à la démo.

27 commentaires sur “Inclure des PDF sans plugin sur votre site avec PDF.js (créé par Mozilla)

  1. Hélas non je ne partage pas les sources de mes documents pour éviter toute modification par le public, mais il ne n’agit que d’un tableau à deux colonnes dont celle de gauche est une succession de « | » adroitement centrés !

  2. Bonjour,
    Très intéressant, mais quand je copie ce code dans un module html en utilisant iWeb ou webacapella, je vois bien mon document, mais il est tout petit.
    Les morceaux de javascript ajoutés ne sont pas actifs : j’ai commencé par changer les réglages (ex 0.3 en 1) puis je les ai effacés et le résultat est toujours le même.

  3. modifie la taille de la balise object ex:
    La visualisation n’est pas encore disponible sur votre navigateur, veillez à le mettre à jour.

  4. Bonjour,

    Comment avez-vous fait pour contourner les paramètres de sécurité du js? En théorie, il n’est pas possible d’aller chercher un fichier sur un serveur tiers avec js. Avez-vous simplement autorisé le serveur du webplayer à venir aspirer le pdf sur votre serveur? Auquel cas êtes vous passé par un htaccess ou ??

    Merci pour votre retour!

  5. C’est une excellente question ! 🙂

    J’utilise d’une part la balise HTML5 « Object » qui se comporte comme l’ancienne balise « iframe » pour charger le player. Je passe ensuite effectivement le PDF stocké sur ce blog en paramètre au player qui se charge de l’afficher. Et le tour est joué !

  6. Bonjour,

    Merci pour cette article !
    Lorsque j’essaye de mettre en oeuvre votre code, la visionneuse ne fonctionne et le retour suivant apparaît : La visualisation n’est pas encore disponible sur votre navigateur, veillez à le mettre à jour.
    Avez vous une idée de ou pourrait provenir le problème?

  7. Bonjour, est-ce que la visualisation du PDF dans cet article fonctionne chez vous ? Si oui, l’erreur provient surement de votre code, si non de votre navigateur qui est trop ancien.

  8. MErci pour votre retour.
    Le lecteur s’affiche bien par contre cela m’indique que le pdf n’est pas trouvable sur le serveur. Quelle droit d’accès avez vous mis sur votre fichier PDF pour y accéder?

  9. Rien de particulier il me semble, est-ce que le document est librement accessible sur Internet ? Quelle est l’url ?

  10. Je viens de regarder et effectivement cela ne marche pas non plus par chez moi. Je regarde depuis quelques jours et je pense avoir une idée : le PDF n’est pas hébergé sur le même domaine que la page où est exécuté le script.

    Il me semble me rappeler qu’il y avait une limitation de sécurité, j’avais du lire ça quelque part, peux tu vérifier ?

  11. Je viens de faire le test inverse et en fait non, avec le PDF de mon CV tout se passe bien dans votre page web. À l’inverse, avec l’URL de votre PDF, j’ai la même erreur sur mon site. Je pense que vous devriez essayer de télécharger mon CV au même endroit que votre PDF pour vérifier si ce n’est pas votre fichier ou votre serveur qui poserait problème tout simplement.

  12. Bonjour,

    Lorsque j’essaye de mettre en oeuvre votre code, la visionneuse ne fonctionne et le message d’erreur suivant apparaît, même en reprenant votre fichier cv.pdf sur notre serveur :
    « PDF.js v1.3.20 (identifiant de compilation : 0029000)
    Message : Unexpected server response (0) while retrieving PDF
    « http://****.fr/doc/cv.pdf ».
    Y a-t-il une limitation connue ?
    Merci

  13. Bonjour,

    Tout d’abord merci beaucoup pour votre exemple qui semble correspondre exactement à ce que je cherche.

    Sauf que mon exemple http://www.thotm.net/gfi/test-9.html ne fonctionne pas : le fichier Acrobat n’est pas trouvé !

    Auriez-vous l’amabilité de me dire ce qui ne, selon vous, ne « collerait » pas ?

    D’avance merci de votre réponse.

    Bien cordialement,

    Olivier Cabon

  14. Bonsoir, vous rencontrez le même problème que les autres personnes ci-dessus mais hélas je n’ai aucune idée de ce que ça peut être :/ Vu que le document est accessible, j’imagine que le logiciel qui a généré le PDF utilise des éléments de présentation que PDF.JS ne peut pas afficher. Pourriez vous tenter de réenregistrer le document avec un autre logiciel ? Ou d’utiliser un autre document pour vérifier si cela vient de votre site ?

  15. Bonjour. Merci de votre réponse. J’ai téléchargé votre CV et j’ai le même problème. J’ai testé avec une adresse sans www et j’ai le même problème. J’ai modifié les autorisations sur le document Acrobat et j’ai le même problème. Depuis mon site je peux afficher votre cv et rien d’autre !

  16. J’ai trouvé ! Pour vous trois, Olivier, Rémy et Chamy : vous avez la même erreur dans la console JavaScript sur vos site !

    Blocage d’une requête multi-origines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://www.thotm.net/gfi/9.pdf. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.

    C’est au niveau de la configuration de votre serveur que ça se passe : vous devez ajouter l’entête en question dans les entêtes de la réponse que le serveur fourni avec le fichier. C’est pour cela que vous pouvez afficher mon PDF sur vos sites.

    Si vous avez la main sur la configuration du serveur (ou la possibilité de mettre un .htaccess) vous pouvez résoudre ce problème. Si non, vous devez trouver un endroit où le serveur est configuré correctement pour héberger le document.

  17. Pour contourner le Access-Control-Allow-Origin , dans le répertoire qui contient vos pdfs, vous pouvez créer un .htaccess avec le contenu suivant :

    Header set Access-Control-Allow-Origin « * »

L'espace de discussion de cet article est désormais fermé.