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 :
Rendu sur un smartphone 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.
