Afficher un document PDF dans un article

webassowebasso Member

Bonjour,
existe-t-il un plugin permettant d'afficher un PDF dans un article ?

Ou une autre solution ?
Merci d'avance

Réponses

  • 15 mai modifié

    Bonjour,

    Il y a plusieurs solutions :
    un <iframe> et en passant par Google pour éviter de le télécharger :

    <iframe src="https://docs.google.com/gview?url=https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>
    

    une balise <embed>

    <embed src="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf" width="718" height="700">
    

    ou pour eviter un telechargement par certain navigateurs.

    <embed src="https://docs.google.com/gview?url=https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf&embedded=true" width="718" height="700">
    

    Tu peut aussi télecharger pdf.js mais cela devient lourd . https://github.com/mozilla/pdf.js

    Cdt


    Cordialement,
    gcyrillus , simple membre du forum et utilisateur de PluXml

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RÉSOLU] dans le titre de votre question une fois le soucis réglé, Merci

  • webassowebasso Member

    Bonjour,
    Merci pour ce retour.
    Sur la page de mon article, je souhaiterais avoir un rendu de la sorte (plutôt dans le sens vertical) et que l'on puisse télécharger le document comme ici : https://odysee.com/@Quilucru:c/Petit-Manuel-dAutodefense-Souveraine:c
    — Que me conseilles-tu ?
    — Et où va le code que tu proposes ?

  • bonjour,

    ton lien à justement le défaut de ne rien montré de ton PDF dans mon navigateur et m'ouvre directement une une fenêtre pour télécharger en local le PDF.
    En regardant le source via les outils de développeur :

    <iframe title="Aperçu du fichier" src="https://player.odycdn.com/v6/streams/cb3c2507ba3dcda0900eca096b049996af725f5c/32ee24.mp4"></iframe>
    

    on voit qu'ils utilisent aussi un iframe et qu'il est dimensionner via une feuille de style .

    Regarde si odysee propose un snippet pour intégré tes contenus dans ta page perso, je doute que tu puisse juste copier/coller leur iframe sur un autre domaine .

    cdt


    Cordialement,
    gcyrillus , simple membre du forum et utilisateur de PluXml

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RÉSOLU] dans le titre de votre question une fois le soucis réglé, Merci

  • webassowebasso Member

    Voilà ce que permet Odysee :

    ... et quand je copie l'ifram dans le code source de ma page, la vidéo contenant le pdf est bien là, mais en cliquant sur la vidéo pour la démarrer c'est une fenêtre qui s'ouvre sur le lien : https://odysee.com/@Quilucru:c/Petit-Manuel-dAutodefense-Souveraine:c
    Le code d'intégration proposé par Odysee est donc le suivant : <iframe id="odysee-iframe" style="width:100%; aspect-ratio:16 / 9;" src="https://odysee.com/%24/embed/%40Quilucru%3Ac%2FPetit-Manuel-dAutodefense-Souveraine%3Ac?r=CW2aJAegn8JFZ5uCX4c6iajEWLmbjWvX" allowfullscreen></iframe>
    — Comment lire le pdf sur ma page plutôt que via le lien ?

  • — Comment lire le pdf sur ma page plutôt que via le lien ?

    Il te faudrait le lien direct vers le pdf si odysee autorise de l'ouvrir en direct.

    Enfin, l'interface que tu veut pour ton PDF est apparemment celle du lecteur PDF de chrome (api du browser) , un autre navigateur aura un affichage différent si il permet l'ouverture au lieu de vouloir le télécharger.


    Cordialement,
    gcyrillus , simple membre du forum et utilisateur de PluXml

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RÉSOLU] dans le titre de votre question une fois le soucis réglé, Merci

  • webassowebasso Member

    ... du côté de Odysee, j'ai envoyé une demande parce que je ne vois rien dans mon compte chez eux qui me permette un lien direct !
    mais je suis étonné qu'il n'y ait pas de solution locale (pluxml) qui permette d'insérer et de lire en direct un pdf sur une page !
    — Il me semble qu'une dizaine d'années en arrière, j'avais un site sous pluxml dans lequel j'utilisais cette fonction de lire le pdf en direct sur ma page et de pouvoir aussi le télécharger... est-ce qu'une des solutions de ta première réponse pourrait convenir ?

  • est-ce qu'une des solutions de ta première réponse pourrait convenir ?

    ?? Je pensais que tu aurais déjà testé, il n'y a que ça qui peut te décider à choisir ou rejeter l'une ou l'autre des solutions.


    Cordialement,
    gcyrillus , simple membre du forum et utilisateur de PluXml

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RÉSOLU] dans le titre de votre question une fois le soucis réglé, Merci

  • webassowebasso Member

    Alors admettons cette solution : <embed src="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf" width="718" height="700">
    — Comment fait-on parce que je ne comprends pas comment la mettre en œuvre ?

  • Hello,

    bon et bien l'attribut src est l'adresse de ton pdf .
    Cet exemple devrait passer dans tous les navigateur qui ont la possibilité de lire un pdf . L'interface visuelle sera celle du lecteur pdf du navigateur, géneralement la barre d'outils en haut et le pdf affiché dessous. Tu peut utiliser une feuille de style pour lui donner une dimension (les attributs width et height serviront de valeurs par défaut)

    cdt


    Cordialement,
    gcyrillus , simple membre du forum et utilisateur de PluXml

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RÉSOLU] dans le titre de votre question une fois le soucis réglé, Merci

  • webassowebasso Member

    Bonjour,
    Merci pour ton retour,
    ... je viens de voir que l'éditeur CKEditor 4.11.1 que j'utilise pour la rédac des articles, propose la possibilité d'incorporer un média (je ne l'avais pas encore utilisé). J'ai donc rentré l'adresse de mon fichier se trouvant dans "Médias" sous cette forme : https://spirit.ouvaton.org/data/medias/petit-manuel-dautodefense-souveraine_compressed.pdf
    Dans la partie "source" de l'éditeur j'ai ce code qui s'est installé :
    <div data-oembed-url="https://spirit.ouvaton.org/data/medias/petit-manuel-dautodefense-souveraine_compressed.pdf"> <div> <div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 129.4118%;"> <iframe allowfullscreen="" src="//if-cdn.com/eBvshrrU" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" tabindex="-1"> </iframe> </div> </div> </div>
    Est-ce bien normal tous ces "div" entrant et fermant ?
    Dans l'aperçu, le pdf s'ouvre, mais ne figure pas les boutons permettant de le télécharger directement à partir de ce pdf sans avoir besoin de rajouter un lien sous le pdf... ?

  • 16:49 modifié

    Pour les divs, c'est le script ckEditor , donc normal :).

    Voici une version de ckEditor 4.11.1 avec un bouton supplémentaire qui te permettra d’insérer un pdf dans une balise embed (celle-ci aura la class embedPDF pour que tu puisse la styler à ta guise) : https://ressources.pluxopolis.net/banque-plugins/plugins/ckeditor.4.11.1-3.zip

    (Pour infos : le plugin autosave y est actif et tu peut tester sur le site de test que j'avais mis en place pour toi))

    balise embed en test sur codepen: https://codepen.io/gc-nomade/pen/xbRqxPR ;)


    Cordialement,
    gcyrillus , simple membre du forum et utilisateur de PluXml

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RÉSOLU] dans le titre de votre question une fois le soucis réglé, Merci

  • webassowebasso Member
    18:17 modifié

    Merci pour le retour, j'ai chargé le nouveau ckeditor et inséré l'adresse du pdf dans la fenêtre proposé par l'éditeur...
    J'ai ajouté dans la config CSS : .embedPDF {display:block;width:80%;height:100vh;margin:auto;}
    Mais il y a un truc que j'ai dû louper : car dans ma page de rédaction le fichier n'apparait pas, par contre, le code est bien dans le source ! et une fois le brouillon enregistré, l'aperçu montre le pdf !
    Mais si je publie l'article, le pdf n'y est pas !
    Où est le problème ?
    En substance, comment supprimer l'autosave de ckeditor ?

    J'ajoute que dans la console, j'ai ce message : JQuery 3.7.1 preview:1:9
    PDF 75e7e6b78e6912d4548cc1627003ce33 [1.4 iLovePDF / Vellum 4.1.2] (PDF.js: 5.7.99 [b72ae81a8]) viewer.mjs:17399:13
    En-tête de rapport : la valeur JSON reçue est invalide.


  • 18:29 modifié

    Dans l'éditeur, on ne voit pas la balise embed , seulement dans l'aperçu de pluxml ou en front à l'affichage de l'article.
    Enfin, pour désactiver l'autosave : revoir : https://forum.pluxml.org/discussion/comment/66944/#Comment_66944

    (quel est l'article ou ton pdf n'est pas visible ? )

    cdt


    Cordialement,
    gcyrillus , simple membre du forum et utilisateur de PluXml

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RÉSOLU] dans le titre de votre question une fois le soucis réglé, Merci

Connectez-vous ou Inscrivez-vous pour répondre.