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

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

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.

Rédigé le 14 mars 2014 dans "Entre-aide"
  1. qwerty écrit le 14 mars 2014 à 14 h 06 min#

    Hors sujet, mais j’aime bien ton CV, c’est quel modèle LaTeX ?

  2. Vincent écrit le 14 mars 2014 à 23 h 24 min#

    Fait à la main sous Libre Office. :)

  3. qwerty écrit le 15 mars 2014 à 9 h 29 min#

    OK :) Et comme a tu fait la timeline ? Est-ce possible d’avoir les sources ?

  4. Vincent écrit le 15 mars 2014 à 11 h 01 min#

    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 !

  5. abcd écrit le 25 avril 2014 à 20 h 02 min#

    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.

Pseudo*: E-Mail*: Site: