pdf ~ affiche un fichier PDF

affiche un fichier PDF dans un bloc de la page ou un lien pour le voir ou le télécharger

Cette action utilise principalement la bibliothèque pdf.js de Mozilla

D'autres méthodes sont proposées, mais présentent moins de fonctionnalités et ne sont pas compatibles avec tous les navigateurs

➠ pdf : Affiche un PDF dans le contenu ou génère un bouton pour l'afficher dans une fenêtre

Cliquer pour lire la documentation

Le fichier PDF peut-être hébergé sur le serveur ou ailleurs (url absolue)
syntaxe {up pdf=chemin du fichier PDF}
voir : https://rootslabs.net/blog/538-embarquer-pdf-page-web-pdf-js
integration libraire TurnJs http://turnjs.com/ depuis https://github.com/iberan/pdfjs-flipbook
author LOMART version 1.1 license GNU/GPLv3 credit Mozilla PDF.js
  • pdf: chemin du fichier pdf
  • method (methode) = PDFJS: ou Google, Embed ... ou 0
  • view = 1: ou Google, Embed ... ou 0
  • pdfjs-model = web: ou mobile (non opérationnel)
  • width (l,largeur,w) = 100%: largeur iframe
  • height (h,hauteur) = 500px:
  • class: classe(s) pour bloc parent
  • style: style inline pour bloc parent
  • download = 1: 1 pour afficher lien téléchargement
  • download-name: nom du fichier téléchargé
  • download-text = en=Download %s;fr=Telecharger %s: texte pour lien
  • download-icon: image affichée devant le lien
  • download-class: class(s) pour bouton lien seul
  • download-style: style inline pour bouton lien seul
  • btn (bouton) = 0: 1 pour afficher un bouton
  • btn-target = _blank: cible : _blank, _parent, popup ou _popup
  • btn-text = voir %s: texte pour bouton
  • btn-icon: image affichée devant le texte du bouton
  • btn-class = btn btn-primary: class(s) pour bouton lien seul
  • btn-style: style inline pour bouton lien seul
  • close-left = 0: croix de fermeture en haut à gauche. haut-droite par défaut
  • flip = 0: activer le mode flipbook uniquement si pdfJs

    La méthode la plus simple

    {up pdf=files/doc/UP-Memo-actions.pdf}

    Il suffit d'indiquer le chemin du fichier PDF pour obtenir la vue ci-dessous.

    L'action utilise la bibliothèque JavaScript PDF.js de Mozilla. La vue occupe toute la largeur de son bloc parent pour une hauteur de 500px. Au-dessous, un lien permet télécharger le fichier.

    Choisir la méthode d'affichage

    PDFJS

    {up pdf=files/doc/UP-Memo-actions.pdf 
    | method=PDFJS}

    GOOGLE

    {up pdf=https://up.lomart.fr/files/doc/UP-Memo-actions.pdf 
    | method=Google}

    Le fichier PDF doit être accessible d'Internet

    EMBED

    {up pdf=files/doc/UP-Memo-actions.pdf 
    | method=Embed}

    Ne fonctionne pas sur mobile

    Le lien pour téléchargement

    Ce lien est disponible si le fichier est hébergé sur le même serveur que le site.

    Il est possible de renommer le fichier téléchargé avec le paramètre download-name

    {up pdf=files/doc/UP-Memo-actions.pdf | debug
      | view=0 
      | download-icon=images/img16/pdf.png
      | download-name=lang[en=UP Actions - my memo.pdf;fr=UP - Aide mémoire actions.pdf]
    }

    view=0 empêche l'affichage du PDF. download-icon est le chemin pour l'icône affichée. download-name permet d'indiquer le nom sous lequel sera téléchargé le fichier PDF. Cette possibilité permet d'avoir un nom "sans espace, ni caractères accentués" pour être "Unix friendly", mais avoir un nom humanisé pour le fichier téléchargé.

    Généralisées avec la version 1.4 de UP, les chaînes de texte peuvent être en plusieurs langues. Il suffit d'indiquer le code pays (en, fr, de, it, ..), le signe égal (=), la traduction, un séparateur point-virgule (;)/ Plus d'infos sur cette page :Gestion des traductions

    Un bouton pour afficher le PDF

    {up pdf=files/doc/UP-Memo-actions.pdf | btn }

    Le shortcode est minimal. Le paramètre btn demande l'affichage sous forme d'un bouton et exclut de fait l'affichage du PDF et du lien de téléchargement.

    Aucune indication pour btn-text, et pourtant le style et le texte du bouton sont différents de ceux par défaut (btn-text=voir %s | btn-class=btn btn-primary) ?

    Il s'agit d'une nouveauté introduite avec la version 1.4 de UP. Les préférences des actions sont surchargeables par le concepteur du site. Dans notre cas, le fichier plugins/content/up/actions/pdf/custom/prefs.ini contient les lignes suivantes :

    [options]
    btn-class = btn btn-success
    btn-text="<img src=""plugins/content/up/actions/file/img32/pdf.png""> Afficher le fichier : %s"

    Attention si cela évite la saisie répétitive des mêmes paramètres, cela veut aussi dire que les paramètres par défaut indiqués dans les démonstrations sont à relativiser

    Plus d'infos sur cette page : Programmation : personnaliser une action

    Astuce le texte du bouton devenait bleu après le clic. Plutôt qu'ajouter une règle dans le fichier custom du template, j'ai simplement utilisé l'action addCssHead ci-dessous

    {up addcsshead=a.btn-success:visited[color:yellow]}

    Ouverture dans une fenêtre modale

    Pour éviter que votre visiteur quitte la page, vous pouvez demander l'affichage dans une fenêtre modale avec l'option btn-target=popup

    Cette démonstration montre l'utilisation de btn-icon et btn-text pour personnaliser le bouton

    {up pdf=files/doc/UP-Memo-actions.pdf
    | btn | btn-target=popup 
    | btn-text=Ouvrir le fichier PDF des actions UP dans une fenêtre modale 
    | btn-icon=images/img32/pdf.png
    | close-left
    }

    Notes

    Tableau des compatibilités selon serveurs et navigateurs

    Méthode Localhost Ordinateur Android iPhone
    PDF.js OUI OUI OUI
    Google NON OUI OUI ?
    Embed OUI OUI NON ?
    Download Uniquement si fichier sur serveur du site

    Mode magazine

    Sur une idée de Pascal Leconte, parcourir un PDF comme un magazine en tournant les pages

    La syntaxe :

    {up pdf=files/doc/UP-Documentation-actions.pdf | method=PDFJS  | flip
    | btn | btn-target=popup | btn-text=Voir %s en mode magazine}

    Pour mémoire, le mode classique :