Lecteur pdf javascript pdf.js

Ce plugin est basé sur le projet pdf.js qui permet une lecture en ligne des pdfs depuis le navigateur.

Ce plugin est expérimental et les contributions sur la zone sont les bienvenues.

Avantages

  • Open source
  • Ne requiert pas flash et donc compatible avec les smartphones
  • Aucune technologie tierce requise sur le serveur et donc compatible avec des hébergements mutualisés

Limitations

  • Basé sur Javascript/HTML5, le lecteur ne fonctionne que sur les navigateurs modernes: Internet explorer 9+, Firefox 4+?, Opera ? , Safari ? ...
  • Certains pdfs (polices non standards, trop lourd) ne passent pas bien.
  • Interface un peu lourde à charger

Utilisation

Sous SPIP 3

Une fois le plugin installé, utiliser le raccourci <emb23898> pour faire apparaitre le lecteur.

Il est aussi possible de préciser la taille du cadre <emb23898|largeur=800|hauteur=600>

On peut aussi utiliser le lecteur en mode plein écran via la page
spip.php?page=pdfjs&id_document=3

Sous 2.1

Une fois le plugin installé, au lieu d’insérer vos documents pdfs par le raccourci <doc23898>, utiliser le raccourci <lecteurpdf23898> pour faire apparaitre le lecteur [1].

Il est aussi possible de préciser la taille du cadre <lecteurpdf23898|largeur=800|hauteur=600>

On peut aussi utiliser le lecteur en mode pleine écran via la page
spip.php?page=pdfjs&id_document=3

Utilisation avec les modèles <media>

Cette section est valable uniquement si vous utiliser le plugin modèles media.

Une fois installé, pour inclure le document 12 dans un texte, il suffit d’utiliser le modèle <media12|embed> de manière classique. Tous les autres paramètres des modèles <media> (alignement, taille, legende...) peuvent être utilisés (voir la documentation des modèles media).

Cette syntaxe assure une pérennité des appels de modèles dans vos textes. Ainsi, si par la suite vous désactiver le plugin pdf.js pour utiliser un autre plugin étendant les modèles média pour les fichiers pdf (comme le plugin Google Viewer), le raccourci <media12|embed> sera pris en compte par cet autre plugin.

Il est également possible de « forcer » l’utilisation du lecteur pdf.js en utilisant la variante de modèle pdfjs. Par exemple : <media12|pdfjs>.

Apercus

Apercu du lecteur en mode normal
Apercu du lecteur avec le volet mode plan
Aperçu du lecteur inclu dans un article

Incompatibbilités

Le plugin ne fonctionne pas correctement avec Acces Restreint 3.0 lorsque l’option Interdire la lecture des documents joints est activée.

Note : à partir de la version 0.5.1, le plugin devrait être compatible avec la dernière version du plugin Accès Restreint, tant que les documents ne sont pas distants (il est donc nécessaire d’avoir une copie locale des PDFs affichés avec pdfjs). Cependant, l’interaction entre pdf.js et Accès restreint n’a pas encore été testée de manière approfondie et des bugs ne sont donc pas à exclure.

Footnotes

[1Le raccourci <lecteurpdf23898> est aussi fonctionnel sous SPIP 3.

Discussion

57 discussions

  • 2

    Bonjour
    Pour préparer la venue de Spip 4, je fais des essais sous Spip 4.0.0-alpha.
    Le plugin pdf.js ne “passe” pas, même après avoir changé les bornes de compatibilité.
    Si d’aventure quelq’un·e savait si ce plugin sera actualisé pour Spip 4...
    Merci.

    • 1-tu remplace 3.2.* par 4.0.* pour voir le plugin dans
      dans plugin.xml
      on obtient
      dans paquet.xml
      on obtient compatibilite=“[2.0.0;4.0.*]”

      2- tu renommes le fichier emb_pdf du plugin ou mieux tu le copie en le renommant sous le dossier modeles de ton dossier squelettes en file_emb_pdf

      et cela fonctionne en faisant <embxx|center> ou <docxx|center>

    • cela fonctionne aussi avec <lecteurpdfxxx>

    Reply to this message

  • 1

    Bonjour,
    je suis en 3.3 dans la dist de spip.css il ya

    .spip_documents_center { clear: both; display: block; width: 100%; }
    .spip_documents_left { float: left; margin-right: 1.5em; max-width: 33%; }
    .spip_documents_right { float: right; margin-left: 1.5em; max-width: 33%; }

    ce qui fait que si on insere un pdf center avec largeur=80 elle est ramenée a 100%
    et si on met right ou left le modele emb_pdf met le fichier à 33% quelle que soit la largeur demandée.

    • peut être spip 3.3 definitif ou le plugin reglera le pb en attendant
      dans emb_pdf copie du modele du plugin j’ai rajouté «style=“max-width:#ENVlargeur”» pour left et right

      name="pdf_#ENV{id}" allowfullscreen></iframe>

      est devenu

      name="pdf_#ENV{id}" allowfullscreen style="max-width:#ENV{largeur}"></iframe>

      et j’ai enleve le width:100% dans une copie de spip.css de

      .spip_documents_center { clear: both; display: block; width: 100%; }
      est devenu
      .spip_documents_center { clear: both; display: block;  }

    Reply to this message

  • Bonjour,

    Tout d’abord, bravo pour cet excellent plugin.
    Fonctionnement sans aucun problème.
    J’aurais une question assez spécifique, quand je lance ma page, l’affichage se fait en zoom automatique par défaut, y a t’il un moyen de forcer le mode zoom “pleine largeur” en mode par défaut.
    J’entend par là un moyen simple, sinon je m’en contenterais.

    Merci d’avance

    Reply to this message

  • Merci pour ce plugin qui affiche les pdf sur tous les supports, android inclus !
    Cerise sur le gateau, en imposant la largeur en % (par exemple |largeur=100% ) la fenêtre d’affichage est responsive en largeur. Et ceci sans faire faire un aller-retour du document pdf jusqu’aux serveurs de google si on utilise le plugin “google viewer” : quelques watts de gagnés, c’est bon pour la planète !

    Reply to this message

  • Bonjour,

    Suite au passage de la mutualisation en SPIP 3.3.0-dev GIT [master: be3b4611], je rencontre un soucis d’affichage des pdf pour lecture.

    pour les pdf que je dépose, j’utilise la ligne

    <embxxxx|insert|center|largeur=800|hauteur=720>

    xxxx étant le numéro du document PDF

    Là, il n’y a que la vignette du pdf qui est présente plus d’affichage du document.

    Merci à vous

    Reply to this message

  • Bonjour

    Je n’ai pas accès restreint d’activé et pourtant j’ai un fichier manquant qui s’affiche

    L’article de test se situe ici

    Je ne comprends pas pourquoi ??

    Quelqu’un peut il m’aider ?

    Cordialement
    rémi

    Reply to this message

  • bonjour,
    pourriez vous me dire quand il y aura une version compatible avec php 7.4 / spip 3.3
    merci

    Reply to this message

  • 1

    Bonjour,

    Nous avons mis notre site à jour avec spip 3.2.1
    Nous avons voulu désinstaller accès restreint qui nous posait régulièrement problème (sous spip 3.2.0)
    Et nous avons maintenant un message d’erreur quand nous voulons lire un pdf, qu’il ait été installé avant ou après notre mise à jour :

    Fichier API docrestreint introuvable.

    Quelqu’un a-t-il une idée de ce qu’il y a à faire pour éviter cette erreur ?
    Merci de votre aide.

    • Bonjour,
      J’ai moi même été dans l’obligation de faire cette manip car avec “Accès restreint” activé cela empéchait l’ouverture et donc la lecture du pdf directement dans le navigateur ( il ne faisait que l’enregistrer systématiquement sur le disque dur).
      j’ai donc carrément désinstallé “Accès restreint” dans l’interface privée de SPIP (3.2.5), et là boum

      Fichier API docrestreint introuvable.

      Plus moyen de lire les PDF et les images agrandies dans IMG/
      seuls les vignettes s’affichent...
      même après avoir vider le cache

      Quelqu’un aurait il une solution ?

      Merci

    Reply to this message

  • avec le fichier standard backend et inc-item-rss de squelettes-dist et le plugin . Lorsque j’ai <embxx|center> d’un pdf dans le texte , j’obtiens

    <content:encoded><div class='rss_texte'><!--[if !IE]><!--><iframe src="spip.php?page=pdfjs&id_document=2191" width="490" height="600" class="lecteurpdf lecteufpdf-2191 spip_documents spip_documents_center" name="pdf_2191" allowfullscreen></iframe><!--<![endif]-->
    <!--[if IE]><iframe src="IMG/pdf/lefichier.pdf" width="490" height="600" class="lecteurpdf lecteufpdf-2191 spip_documents spip_documents_center" name="pdf_2191" allowfullscreen></iframe><![endif]--></div>
                    
                    </content:encoded><enclosure url="https://nomsite/IMG/pdf/lefichier.pdf" length="375840" type="application/pdf"/>

    ce qui peut poser un problème de récupération des informations.
    Savez comment il faudrait gérer ce cas dans le backend pour que cela soit correct
    merci

    Reply to this message

  • 1

    est-ce que cela peut fonctionner si on regarde le site depuis un mobile ?
    merci

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom