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

La méthode la plus simple

{up pdf=files/doc/demo/UP-memo-actions.pdf | background=#336699}

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.

v2.1 J'ai ajouté la nouvelle option "background" proposée par Pascal. Elle permet de changer la couleur du fond perdu pour le PDF. La couleur doit être au format hexadécimal RGB.

Choisir la méthode d'affichage

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

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

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

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

Telecharger UP - Aide mémoire actions.pdf

{up pdf=files/doc/demo/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/demo/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 : 🆙 fichier custom/prefs.ini

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

Ouvrir le fichier PDF des actions UP dans une fenêtre modale

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

{up pdf=files/doc/demo/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éthodeLocalhostOrdinateurAndroidiPhone

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/demo/UP-doc-actions.pdf | method=PDFJS  | flip
| btn | btn-target=popup | btn-text=Voir %s en mode magazine}

Pour mémoire, le mode classique :

Notes

Pour les utilisateurs d'aesecure

Si vous avez une erreur 782 à la place du pdf, il faut :

• éditer votre fichier .htaccess
• rechercher la ligne avec la mention 782
• quelques lignes avant, rechercher cette ligne :

  RewriteCond %{QUERY_STRING} !option=com_akeeba&view=backup(.*)$ [NC]

• ajouter cette ligne au-dessous en remplaçant votresite\.fr par le nom de votre site

  RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?votresite\.fr [NC]