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
syntaxe
{up pdf=chemin du fichier PDF}integration libraire TurnJs http://turnjs.com/ depuis https://github.com/iberan/pdfjs-flipbook
- pdf: chemin du fichier pdf ou masque si plusieurs (v311)
- method (methode) = PDFJS: ou Google, Embed ... ou 0
- maxi: nombre maxi de fichiers affichés. 0 sans limite
- view = 1: 0 = masque le PDF
- width (l,largeur,w) = 100%: largeur iframe
- height (h,hauteur) = 500px: hauteur iframe
Gestion du lien pour télécharger le PDF
- 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
Gestion bouton pour afficher le PDF
- btn (bouton): 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
Divers
- close-left: 1=croix de fermeture en haut à gauche. 0=haut-droite par défaut
- flip: activer le mode flipbook uniquement si PDFJS
- background: couleur fond perdu du PDF au format #rrggbb
- zoom: zoom par défaut (100%)
- pdfjs-model = web: ou mobile (non opérationnel)
Style CSS
- id: identifiant
- class: classe(s) pour bloc parent
- style: style inline pour bloc parent
- tag = div: balise pour bloc parent - v2.9
- css-head (base-css): style ajouté dans le HEAD de la page
- Version 2.1
- ajout option background pour couleur fond perdu du PDF (merci Pascal)
- Version 2.9
- mode magazine pour method=pdfjs
- Version 3.1.1
- Affichage de plusieurs fichiers PDF
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=https://up.lomart.fr/files/doc/demo/UP-memo-actions.pdf
| method=Google}Le fichier PDF doit être accessible d'Internet
EMBED
{up pdf=files/doc/demo/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
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 modaleCette 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éthode | Localhost | Ordinateur | Android | iPhone |
|---|---|---|---|---|
| PDF.js | OUI | OUI | OUI | |
| 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/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 :
Afficher plusieurs PDF
Pour la mise à disposition de plannings, j'ai eu besoin d'afficher les 2 derniers fichiers (celui du mois en cours et celui du mois suivant).
Comme il est délicat d'utiliser les dates des fichiers, le tri est fait sur le nom du fichier qui doit être du type AAAA-MM-planning ou planning-AAAA-MM
Pour actualiser les plannings, il suffira de copier les nouveaux plannings dans le sous-dossier prévu.
{up pdf=images/plannings/planning-*.pdf
| maxi=2}A la place du nom complet du fichier, j'utilise un masque qui va me retourner tous les fichiers nommés planning suivi de l'année et du mois.
l'option maxi limite l'affichage aux 2 plus récents (dans l'ordre alphabétique)
Cette action peut être incluse dans une action flexauto pour une présentation en colonnes responsive.
Il faut indiquer le chemin à partir de la racine du site.
Pour un fichier dans le sous-dossier pdf du dossier images, on utilise images/pdf/fichier.pdf ou images/pdf/*.pdf
Les formes /images/pdf/fichier.pdf ou ../images/pdf/fichier.pdf ne sont plus reconnues
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]
upactionslist (1) readmore (1) csv2def (1) _scroll-to (1) pdf (9) modal (1) addcsshead (1) csv2table (1) flexauto (1) div (1) jcontent-info (1) tabslide (1) toc (1)