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
    1. <embNNN|center>

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

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

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

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

updated on 6 April 2020

Discussion

6 discussions

  • 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

    Reply to this 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

    Reply to this message

  • 3

    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 ?

    Reply to this 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)

    Reply to this message

  • 4
    Bernard

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

    Reply to this 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

    Reply to this message

Ajouter un commentaire

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