Visualiser un PDF dans un article

SoyezCréateurs utilise un modèle pour afficher un PDF dans le corps d’un article

Un peu d’histoire

Avant, les navigateurs n’incluaient pas de lecteur PDF nativement ce qui avait conduit à la création du plugin Lecteur pdf javascript pdf.js.

Mais, puisque les navigateurs modernes permettent désormais d’afficher nativement des PDF, pourquoi se priver de leurs services ?

C’est le but de ce modèle.

Usage du modèle d’insertion de PDF dans le texte

  1. joignez un PDF à un article
  2. insérez-le dans le texte de l’article avec
    <embNNN|center>

Par défaut, la largeur sera de 100% et la hauteur de 600px.

Vous pouvez spécifier l’un et l’autre :

<embNNN|center|largeur=80%|hauteur=400px>

Précisez bien l’unité : px, %, em…

Discussion

10 discussions

  • 7

    Bonjour
    Super ce plugin pour afficher un pdf dans un article
    Si le plugin fonctionne parfaitement sur un ordinateur, j’ai un problème d’affichage sur un terminal mobile
    En effet quand le PDf a plusieurs pages, impossible d’aller à la page 2
    Quelqu’un a déjà eu ce problème ?
    Merci par avance

    • Gérard

      Bonjour,

      Super plugin que j’ai découvert il y a quelques mois (spip 3.3.19, emb.pdf-v1.1.0 puis 1.1.1 .., mais effectivement si sur ordinateur (firefox ou safari) tout va bien, ce n’était pas le cas avec mon iphone 4 (12 d’âge et pas possible d’installer firefox à l’époque !) où le pdf n’affiche que la moitié gauche du document et qu’une seule page .. ! Il est vrai qu’avec l’âge de mon iphone je n’étais pas inquiet.
      Mais j’ai découvert chez un copain le week-end dernier, que ne s’affichait sur un xiaomi récent de premier prix que seul le titre du document s’affichait (heureusement je mets toujours un titre aux documents !), donc cadre blanc comme évoqué par André.

      Ma solution (comme pour le « plugin multimedias » à voir ici), dans le plugin « emb.pdf » ouvrir le dossier -> modeles -> et corriger emb_pdf.html, introduire le lien pour téléchargement du fichier, après le dernier /div et avant la fin de la BOUCLE_tous :

      </div> 
      
      [<!--(#REM) Lien pour le telechargement du fichier -->]
      <br /><img src="#CHEMIN{puce.gif}" class="left" />&nbsp;T&#233;l&#233;charger le fichier : <a href="#URL_DOCUMENT" title='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]'>#TITRE</a> - #TYPE_DOCUMENT - [(#TAILLE|taille_en_octets)]
      <br />&nbsp;
      <!--#Fin du lien de telechargement --> 
      
      </BOUCLE_tous>

      Avec ce lien de téléchargement qui s’affiche automatiquement sous le pdf, qu’il s’affiche ou pas, normalement tous les navigateurs vont ouvrir ce pdf (c’est ce qui se passe avec mon iphone 4 avec chrome ou safari), et dans le cas de plusieurs pages .. elles s’affichent.
      Attention il faut absolument mettre un titre au document !
      Un exemple : ici avec 2 pages

      Pour moi, une solution à priori passe-partout.
      Cordialement ..

    • Bonjour,

      En soi, c’est une bonne idée.
      Mais :

      • l’idéal serait de n’afficher ça que si le PDF n’était pas affiché
      • ou que ça soit désactivé par défaut et activable par configuration (un define dans mes_options.php) parce qu’il y a des squelettes qui listent les documents à télécharger en bas des articles...
    • La version 1.2.0 du plugin devrait faire plaisir : https://git.spip.net/spip-contrib-extensions/emb_pdf/commit/8120d7cb :
      feat : ne pas afficher le PDF sur petit écran ni sur imprimante :
      2 raisons à cela :

    • Gérard

      Bonjour,

      Merci RealET pour ta nouvelle contribution, où tu fais un choix limitatif, tout dépend je pense du genre de site que l’on pilote.

      Or on peut s’apercevoir qu’aujourd’hui beaucoup de personnes utilisent leur smartphone (facture, ticket-facture, rapport quelconque, etc ..), donc pourquoi limiter cette possibilité d’autant que certains ont des écrans de grande taille ...

      Il est vrai aussi que certaines applications internet pour smartphone comme « Qwant » qui sert aussi de navigateur internet pour les téléphones portables, ne lisent pas (carré blanc) et ne téléchargent pas non plus les pdf (je précise, le lien de téléchargement fonctionne mais ils ne les transfèrent vers une autre application éventuelle ... Vérifié sur xiaomi récent et écran beaucoup plus large que le mien ..).

      Donc le choix du lien de téléchargement ou de limitation est un choix suivant le genre du site géré. Il est vrai qu’avec mon exemple très compliqué d’une page A4 sur trois colonnes (dans mon message précédent) n’était pas vraiment adapté, Il était surtout présent pour souligner le fait que l’on pouvait afficher 2 pages ou plus.
      Dans mon cas il s’agit surtout d’afficher des affiches, des rapports, des communiqués de presse la plupart du temps (ex : Communiqué de presse de l’Intersyndicale le 02/05/2023, qui sont presque lisibles sur un petit écran comme mon « iphone 4 (ios 7.1.2, - 51x76 mm) », au moins à l’horizontal .., mais surtout je peux aussi l’imprimer en A4 directement avec le téléphone ...

      En résumé, tout dépend du choix ou du genre du site géré.
      Un plus dans ce plugin serait qu’avec un bouton simple (ou des options choix) dans l’administration de celui-ci on puisse faire le/les choix voulu(s) .., comme ceci il serait possible de suivre l’évolution des versions sans se poser la question ou être obligé de mettre les mains dans la cambouis.

      Merci encore à RealET pour ta contribution.

    • J’ai rien compris ;-)

      Sachant que sur mobile, l’affichage du PDf dans le texte n’est pas possible, et que j’ai fait afficher le lien avec l’icone PDF (le modèle par défaut de SPIP), j’ai un peu de mal à comprendre ce que tu reproches à ce que j’ai fait.

      Ou, autrement dit, qu’est-ce que tu aurais voulu de franchement différent ?

    • Gérard

      Je n’avais pas compris que le lien de téléchargement était toujours présent, mais à l’aide de l’icône PDF !
      Donc à priori, le pdf est téléchargeable sur le téléphone portable (quand ses applications le permettent !) et donc imprimable à partir de celui-ci.
      Du coup je suis désolé !..
      Je ferais un essai sur en local cet été, merci RealET.

    • Gérard

      Désolé, il semble que je n’ai pas compris ta correction !
      Je viens de faire un essai rapide :
      Tu as remplacé le lien de téléchargement par l’icône du document, donc celui-ci est téléchargeable par ce biais (ok), donc également imprimable (ok) à partir d’un téléphone portable.
      Personnellement je préfère le lien, je n’aime pas les icônes document .. mais les gouts et les couleurs .. ?!.

      Désolé donc, RealET, je n’avais pas compris du tout à travers ton message ta nouvelle évolution du plugin sans en avoir au préalable fait un essai. Merci encore ..

    Répondre à ce message

  • 8

    J’ai installé il y a une dizaine de jours la dernière version stable du plugin Modèle PDF (visualiseur) 1.0.1 sur SPIP 3.2.7
    Je l’ai d’abord installé sur une version locale du site sous LAMP. Et cela me convenait : tout fonctionnait bien.

    Aujourd’hui, j’ai voulu l’installer sur le site réel, et j’ai un comportement bizarre :
    j’ai un cadre blanc à bord noir qui a la taille que j’ai défini dans ma commande

    Et j’ai un message m’invitant à télécharger ou à ouvrir le document.

    Je suis retourné sur le site local pour voir où était la différence, mais il n’y en a pas. De plus, maintenant, le site local me donne aussi le cadre blanc au lieu d’y intégrer le pdf.

    Quelqu’un a-t-il une idée de ce qui ne va pas ?
    Merci d’avance.

    • Bonjour
      C’est sans doute une question relative au paramétrage du navigateur utilisé.
      J’ai également installé ce plugin que je trouve pratique, mais je vais l’enlever :
      -  avec mon Firefox, paramétré dans ses options pour « Ouvrir dans Firefox » les fichiers PDF, tout va bien.
      -  avec un Firefox, paramétré dans ses options pour « Toujours demander » quoi faire avec les fichiers PDF, dès que l’on clique le lien d’un article contenant un PDF inséré via la balise « emb », cela conduit bien vers l’article, mais avec l’emplacement vide pour le pdf, et l’ouverture directe de la boîte de dialogue « Que doit faire Firefox avec ce fichier ? »
      -  si Firefox est paramétré sur « Enregistrer le fichier PDF », même affichage pdf « vide » et ouverture de la boîte de dialogue d’enregistrement.
      Je trouve ce fonctionnement déroutant pour l’internaute à qui je ne peux pas demander de paramétrer son Firefox.
      N’utilisant pas d’autre navigateur je ne sais pas ce qui s’y passe.
      Je vais retourner au plugin « Lecteur pdf javascript pdf.js » qui pour sa part correspond à mes attentes quel que soit le paramétrage des options de Firefox.

    • Bonjour,

      J’ai changé la méthode d’inclusion du plugin qui passe maintenant par object et non plus iframe.

      Est-ce que ça résout ton problème ?
      (voir https://formation.soyezcreateurs.net/Test-EMB-PDF.html pour tester).

    • Effectivement, cette nouvelle version « embarque » bien le pdf.
      Mais quelles sont donc les différences entre ce plugin et Lecteur pdf javascript pdf.js ?

    • Ici, c’est les capacités d’affichage natives d’un PDF par le navigateur qui sont utilisés.

      L’autre plugin embarque un script JS capable d’afficher seul des PDF.

    • Bonjour à tous,
      Merci RealET pour l’adaptation.
      Chez moi, avec ta nouvelle version, cela n’a pas marché tout de suite : il y avait un conflit avec un autre plugin (Accès Restreint 3.15.17 ) Mais après avoir mis ce plugin à jour, (Accès Restreint 4.2.4 ) cela a marché.
      Bémol non négligeable toutefois : en allant sur le site avec mon smartphone (Androïd) je ne vois que la légende du fichier pdf (non cliquable) et le fichier n’est donc même pas consultable.

      D’autres que moi ont-ils le même problème ?
      Y a-t-il un moyen de résoudre cela ?

    • Effectivement, depuis mon téléphone android, avec Firefox, le fichier pdf n’affiche que son nom.
      C’est lié au fait que la version android de Firefox est dépourvue de PDF.js : c’est une extension qui peut lui être ajoutée, mais ça semble scabreux (et puis on ne peut exiger cela des internautes de passage) :
      https://addons.mozilla.org/fr/android/addon/android-pdf-js/

      Je ne sais pas ce qui se passe avec un autre système de smartphone.

    • Bonjour tout le monde,

      En effet, ça ne semble pas fonctionner sous android. Avez-vous une solution de contournement à proposer ?

      Vous remerciant par avance,

    • Gérard

      Peut être que mon message ci-dessus sera satisfaisant : Visualiser un PDF dans un article

    Répondre à ce message

  • 1

    Merci Jacques ! :-)

    Je me suis permis un petit ajout, pour rester dans l’esprit SPIP ;-)
    => https://git.spip.net/spip-contrib-extensions/emb_pdf/commit/d6a913f53fad053b0456362bd3c5b019edce9fee

    Répondre à ce message

  • 4

    Ne semble pas fonctionner sur SPIP 3.2.3 ...

    • Je viens de tester ici (SPIP 3.2.4) : https://formation.soyezcreateurs.net/Test-EMB-PDF.html

      Et ça marche très très bien (Chrome sous Win10)

    • Bonjour,

      J"ai suivi votre lien, mais vous avez seulement proposé le fichier PDF en téléchargement. Mon objectif est d’afficher le contenu d’un fichier PDF. Cela, je n’arrive pas à le faire avec cette dernière version de SPIP. Je trouve que SPIP galère trop sur ce plan. Je songe sérieusement à opter pour Wordpress beaucoup plus élaboré et professionnel.

    • Alors, ça doit être une question de navigateur parce que sur le mien, j’ai bien le contenu du PDF affiché.
      Testé avec

      • Chrome / Win10
      • Edge /Win10
      • Firefox / Win10

      ==> Quel est votre navigateur et OS ?

    • Bonjour,

      J’ai changé la méthode d’inclusion du plugin qui passe maintenant par object et non plus iframe.

      Est-ce que ça résout ton problème ?
      (voir https://formation.soyezcreateurs.net/Test-EMB-PDF.html pour tester).

    Répondre à ce message

  • 2
    jeepeedee

    Ne fonctionne plus avec un SPIP passé de 3.3 en 4.0.0.

    • Bonjour,

      Même souci que Jeepeedee ! Le plugin ne fonctionne pas sous SPIP 4.
      Merci.

    • Effectivement

      <embNNN|center>

      ne marche plus.

      Mais

      <emb_pdfNNN|center>

      marche quant à lui.

      Je vais investiguer…

      Et voilà, la v1.0.2 devrait résoudre le problème.

    Répondre à ce message

  • 8

    J’ai installé il y a une dizaine de jours la dernière version stable du plugin Modèle PDF (visualiseur) 1.0.1 sur SPIP 3.2.7
    Je l’ai d’abord installé sur une version locale du site sous LAMP. Et cela me convenait : tout fonctionnait bien.

    Aujourd’hui, j’ai voulu l’installer sur le site réel, et j’ai un comportement bizarre :
    j’ai un cadre blanc à bord noir qui a la taille que j’ai défini dans ma commande <emb66|center|largeur=80%|hauteur=400px>
    Et j’ai un message m’invitant à télécharger ou à ouvrir le document.

    Je suis retourné sur le site local pour voir où était la différence, mais il n’y en a pas. De plus, maintenant, le site local me donne aussi le cadre blanc au lieu d’y intégrer le pdf.

    Quelqu’un a-t-il une idée de ce qui ne va pas ?
    Merci d’avance.

    • Encore quelques précisions :

      • j’utilise Firefox 78.0.1, et je viens d’essayer à partir du site local sous Chrome, et là cela marche...
      • le même test sous chrome mais sur le site réel ne marche toujours pas. ( je constate un nouveau téléchargement et j’ai de nouveau le cadre blanc,)

      Je dois toutefois signaler une petite différence entre le site local et le site réel au niveau de la version PHP : en local je suis en 7.0.33 alors qu’en ligne je suis encore avec 5.4.45. Je ne peux malheureusement pas toucher à la version en ligne pour le moment, car un ancien site tourne sur le même domaine et ne supporte pas les dernières versions.

      De toute façon, cela n’explique pas pourquoi sous FF, cela ne marche pas.

      Quelqu’un a-t-il une idée de ce qui ne va pas ?
      Merci d’avance.

    • Ce que fait ce modèle, c’est juste appeler le fichier pdf dans une iframe.

      Donc, c’est le viewer interne du navigateur qui est utilisé.

      Est-ce que le nom de domaine dans la config du site est bien la bonne ?

      https + http (mixed content) ?

      Que dit la console du navigateur ?

    • Cela dépend du navigateur :

      • sous chrome, je vois l’affiche ;
      • Sous Firefox, je retrouve l’affiche dans le dossier téléchargements, mais elle n’apparait pas dans le html. (l’espace est réservé, mais pas rempli)
    • je ne comprends pas très bien :

      Est-ce que le nom de domaine dans la config du site est bien la bonne ?
      https + http (mixed content) ?

      en tout cas l’URL est bien le nom de domaine suivi par

      /spip.php ?article8

      et pour l’autre question :

      Que dit la console du navigateur ?

      Je n’ai pas de message

    • Finalement, j’ai trouvé la console navigateur... Voilà ce qu’elle me donne :

      This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. spip.php
      JQMIGRATE: Migrate is installed, version 3.0.1 jquery-migrate-3.0.1.js:54:17
      JQMIGRATE: Migrate is installed, version 1.4.1 jquery-migrate.min.js:2:552
      ScrollReveal: reveal on "#main-navigation > *" failed, no elements found.
    • Bonjour à tous,
      Et merci à RealET qui a déjà essayé de m’aider...
      Mais je suis toujours dans la panade :
      En fait, le plugin fonctionne uniquement en local ET sous chrome.
      Il y a donc 2 problèmes distincts, mais je voudrais commencer par au moins voir le pdf sous chrome sur le site en ligne.

      Je précise qu’en local je fonctionne en http, alors que sur le site en ligne, on est forcé en HTTPS.

      Autre précision : le site sur lequel je travaille a été construit dans un sous-répertoire d’un site existant. (dans le sous-répertoire, c’est le site qui remplacera bientôt celui qui est à la racine.)
      Bien sûr, dans l’identité du site sur lequel je travaille, puisque le sous-répertoire est la racine du futur site, j’ai mis http://www.site-actuel/sous-répertoire

      Voici ce que je trouve à l’intérieur de l’Iframe à l’aide de la console de Chrome :

      Sur le site soyezcreateurs :

      <div class='crayon document-titre-520 spip_doc_titre'><a href="sites/formation.soyezcreateurs.net/IMG/pdf/4/4/3/affiche_campagne_megot.pdf">Affiche campagne mégot</a></div>

      En local sous Chrome :
      <html><head></head><body style="height: 100%; width: 100%; overflow: hidden; margin:0px; background-color: rgb(82, 86, 89);"><embed name="2D4B193AC37987D2DC81C8C7F1D21C0F" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" src="about:blank" type="application/pdf" internalid="2D4B193AC37987D2DC81C8C7F1D21C0F"></body></html>

      Sur le site en ligne sous Chrome

      <html><head></head><body></body></html>

      J’ai déjà cherché dans tous les sens, mais n’ai rien trouvé...
      Quelqu’un peut-il m’aider ?

    • Je viens de passer le site en ligne de php 5.4 à php 7.2 .
      J’espérais que cela solutionnerait mon problème.
      En local tout se passe normalement ;
      sur le site hébergé (chez LWS) les pdf qui utilisent la balise <embXXX|center> affichent un cadre blanc devant contenir le pdf, mais il n’y est pas. J’ai également une fenêtre qui s’ouvre à chaque rafraîchissement de la page pour ouvrir ou sauver le document. Si je l’ouvre, il s’ouvre avec FF dans une nouvelle fenêtre. Et si je le sauve, je le retrouve dans mes téléchargements.
      J’ai essayé le document proposé : https://formation.soyezcreateurs.net/Test-EMB-PDF.html là, ça marche, mais c’est du html et pas du pdf.
      Par contre si j’essaye avec le document affiche_campagne_megot.pdf , j’ai de nouveau le cadre blanc.
      Si joint ma page d’essai avec dans l’ordre : 1/ mon pdf, 2/ l’URL en html 3/ affiche_campagne_megot.pdf ,
      Quelqu’un peut-il m’aider ? Car je trouve très frustrant d’avoir un beau résultat en local, mais de ne pas savoir en faire profiter les visiteurs du site.
      Déjà merci pour toute aide.
      Christian

    Répondre à ce message

  • Bonjour,
    le plugin fonctionne bien avec spip 3.2.4 .
    Juste une petite remarque ... on ne visualise pas le pdf en modification dans « voir » et dans la visualisation code gauche/visualisation a droite. ... cela perturbe un peu les rédacteurs bien

    Répondre à ce message

  • 1

    J’ai installé SPIP 3.2.4 [24285], il ne fonctionne pas dessus non plus. Quelqu’un a-t-il une astuce ? Faut-il modifier le squelette ?

    Merci

    • Je viens de tester, et chez moi ça marche™ (voir url dans l’autre réponse faite à l’instant)

    Répondre à ce message

  • 4
    Bernard

    Salut, ce plugin fonctionne t’il uniquement avec les squelettes de soyez créateurs ? Ou avec tous les sites ?

    Répondre à ce message

  • 5

    Hello,

    Je viens de tester et suite à l’inclusion du modèle <embxxx|center> sur un SPIP 3.2.0 [23778] .
    j’ai des effets de bord bizarre : la mise en page de mes articles saute (la navigation à droite passe en-dessous du texte)
    lorsque j’affiche l’article j’ai automatiquement un message pour lire/télécharger le PDF inséré

    et j’ai ce message d’erreur :

    Filtre %##11@) non défini	plugins/auto/emb_pdf/v1.0.0/modeles/emb_pdf.html	_tous

    J’ai regardé le code et je sais pas trop pourquoi il y a

    <iframe>
    <#document>
    <html>
     <head>
    </head>
    <body>
    </body>
    </html>
    <iframe>

    dd

    • xxx est bien le n° du document PDF à inclure ?

      Quelle version de SPIP ?

    • Pour la 2e question, j’ai vu : 3.0.20

    • Oui l’inclure est correct.
      D’ailleurs après saisie de son code dans un article si je clique sur « enregistrer » l’article il me demande direct si je veut télécharger ou ouvrir le PDF (et il trouve le bon fichier)

      Essayé en local avec SPIP 3.2.1 [23954]
      J’ai désactivé quelques plugins liés aux medias

       : idem

      et dans la partie publique j’ai la même erreur

      1 Erreur(s) dans le squeletteNuméro	Message	squelette	boucle	Ligne
      1 	Filtre %##11@) non défini	plugins/auto/emb_pdf/v1.0.0/modeles/emb_pdf.html	_tous
      
    • J’ai installé la dernière version Modèle PDF (visualiseur) 1.0.1 - stable du plugin et je n’ai plus de message d’erreur. Merci
      Par contre j’ai toujours un comportement bizarre de Firefox (avec Chrome c’est bon) : à chaque affichage de la page de l’article (dans l’espace privé ou public) le navigateur me demande d’ouvrir le PDF joint.
      Et je n’ai pas l’aperçu du PDF dans le texte de l’article (uniquement un espace blanc).

      Je tenterai sur une autre install de Firefox

      dd

    Répondre à ce message

Ajouter un commentaire

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
  • 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 apparaît.

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.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom