(Résolu) Afficher un document pdf

trentanel · mai 2017

Bonjour,
Sur une page statique, je voudrais afficher le contenu d'un document pdf.
Ne sachant pas le faire, j'ai contourné en créant un lien pour le télécharger et j'affiche aussi sur la page un copier-coller de la version .doc de ce même document. Le résultat n'est pas aussi bien présenté qu'avec le pdf et je cherche à améliorer les choses.

Existe-t-il une solution pour afficher directement un pdf sur une page pluxml ? Ou alors pour que la copie du .doc garde toutes les subtilités de présentation.

Cordialement à tous
Trentanel

Jerry Wham · mai 2017

Essaie ça :

[== Indéfini ==]
<object data="urlDuPdf" type="application/pdf" width="600" height="600">Pdf non trouvé</object>

En remplaçant urlDuPdf par une url valide menant vers ton pdf.

trentanel · mai 2017

Merci beaucoup, c'est ce dont j'avais besoin. Le résultat est parfait en adaptant les dimensions.

webasso · mai 2017

Bonjour
C'est une application intéressante...
Je viens d'essayer en local mais ça ne marche pas complètement, le pdf s'affiche en mode "aperçu" http://127.0.0.1/spirit/index.php?preview mais pas en mode page http://127.0.0.1/spirit/article10/page-test
- au dessus du menu à gauche j'ai ce bout de code qui apparait: Pdf AFFICHAGE" />
- j'ai installé ce code sur la page test:

[== Indéfini ==]
<object data="
http://127.0.0.1/spirit/data/medias/fiche-des-groupes-ra.pdf" height="800" type="application/pdf" width="640">Pdf AFFICHAGE</object>

Jerry Wham · mai 2017

C'est que l'url vers ton pdf n'est pas la bonne...

webasso · mai 2017

Bonjour
Je suis désolé mais je crois avoir bien collé le bon code de l'url dans la page test: http://127.0.0.1/spirit/data/medias/fiche-des-groupes-ra.pdf

- Ou alors faut-il enlever le http:// devant ?

webasso · mai 2017

.. Je viens de faire un essai sur un site distant, le problème est le même !

accueil du site: http://spirit.ouvaton.org/
la page en question: http://spirit.ouvaton.org/article14/liste-des-groupes-rhone-alpes
le code inséré dans la page: <object data="
http://spirit.ouvaton.org/data/medias/fiche-des-groupes-ra.pdf\" height="800" type="application/pdf" width="640">Pdf AFFICHAGE</object>

je-evrard · mai 2017

Le data / semble enlevé automatiquement alors. Quel sont tes plugins actifs ? ++ jeje

Yannic · mai 2017

webasso a écrit:

.. Je viens de faire un essai sur un site distant, le problème est le même !

accueil du site: http://spirit.ouvaton.org/
la page en question: http://spirit.ouvaton.org/article14/liste-des-groupes-rhone-alpes
le code inséré dans la page: <object data="
http://spirit.ouvaton.org/data/medias/fiche-des-groupes-ra.pdf\" height="800" type="application/pdf" width="640">Pdf AFFICHAGE</object>

Salut, test en desactivant le plugin "Share Me"

webasso · mai 2017

Les plugins actifs:
MyContact - Version 1.7.3 (31/01/2017)
CKEditor - Version 4.6.2 (11/04/2017)
scrollToTop - Version 2.1 (05/07/2014)

Je viens de désactiver Share Me - Version 1.02 (08/05/2017)

Le problème est toujours existant (en lacal) mais vu que jusqu'à présent c'était identique en local et distant...

Yannic · mai 2017

webasso a écrit:

Les plugins actifs:
MyContact - Version 1.7.3 (31/01/2017)
CKEditor - Version 4.6.2 (11/04/2017)
scrollToTop - Version 2.1 (05/07/2014)

Je viens de désactiver Share Me - Version 1.02 (08/05/2017)

Le problème est toujours existant (en lacal) mais vu que jusqu'à présent c'était identique en local et distant...

ok si je regarde le code source générée de ta page en-ligne cela donne :

"http://spirit.ouvaton.orgdata/medias/fiche-des-groupes-ra.pdf"

au lieu de "http://spirit.ouvaton.org/data/medias/fiche-des-groupes-ra.pdf"

En testant cela me fait pareil chez moi si je rentre juste comme pour une image "data/medias/monpdf" j'aurais le même souci (ok en prévisualisation mais, mauvais lors du véritable affichage de l'article)
En mettant le domaine avec ( "http://monsite.com/data/medias/monpdf" ), par contre pas de souci pour le pdf

bazooka07 · juin 2017

Il y a des trucs bizarres avec cette balise Object.

Si on désactive la ré-écriture d'urls, le pdf s'affiche bien partout: aperçu, page d'accueil et article seul
Si on ré-active la ré-écriture d'urls, ok pour l'aperçu et la page d'accueil. Par contre pas de rendu du document pdf pour l'article seul.

Si on remplace object par iframe, il semble qu'il a moins de souci :

[== PHP ==]
<iframe src="data/medias/fiche-des-groupes-ra1.pdf" width="100%" height="600"></iframe>

Si on regarde le source généré par Firefox, il y a 2 balises </html> qui se suivent. (touche F12)

D'après le lien suivant, le pdf doit être balisé :
https://www.abracadabrapdf.net/le-pdf-parfait/balisage-et-accessibilite/

webasso · juin 2017

@ Yannic

En mettant le domaine avec ( "http://monsite.com/data/medias/monpdf" ), par contre pas de souci pour le pdf

Je n'ai pas compris ce que tu voulais dire et quelle différence il y a dans le contenu de l'adresse par rapport à la précédente

@ Bazooka
Avec iframe ça le fait bien
Je n'ai pas compris l'histoire du html:

D'après le lien suivant, le pdf doit être balisé :
https://www.abracadabrapdf.net/le-pdf-p … ssibilite/

et le lien ne s'affiche pas correctement: https://www.abracadabrapdf.net/le-pdf-parfait/balisage-et-accessibilite/

bazooka07 · juin 2017

Il faut ouvrir les outils de développement de Firefox ou de Chrome en appuyant sur la touche F12 dans le navigateur et en cliquant sur l'onglet Inspecteur pour voir le code source modifié de la page HTML.

Apparemment il y a un souci sur la page d'accueil du site abracadabrapdf ce matin.

P.S.: N'oublie pas d'enlever la balise Object. Inutile de mettre l'Iframe dans un paragraphe <p>...</p>

webasso · juin 2017

@ Bazooka
- Ok pour les outils de dev de FF mais j'ai du mal à rentrer dans tout ça et comprendre !
- Pour les balises <p>...</p> j'ai beau les enlever, elles réapparaissent automatiquement !
- Ce n'est pas très jolie que le pdf soit collé aux symboles réseaux sociaux... ya une astuce pour l'éviter ?

bazooka07 · juin 2017

Ajouter une class à Iframe pour la feuille CSS. on rajoute également border pour éviter une bordure supplémentaire :

[== PHP ==]
<iframe class="pdf" src="data/medias/fiche-des-groupes-ra1.pdf" width="100%" height="600" border="0"></iframe>

Et dans le fichier themes/defaut/css/theme.css, rajouter la règle suivante:

[== CSS ==]
.pdf {
  margin-top: 2rem;
}

bazooka07 · juin 2017

Bon, il manque une fonctionnalité à PluXml.

Pour la plupart des balises, quand elles ont besoin d'une image, d'un document, d'une adresse, d'un son,.. elles spéficient l'URL correspondante dans leurs attributs href ou src.

La balise <object ...> précise cette url dans l'attribut data. A première vue, il semble bien qu'elle soit la seule.

Quand on active la ré-écriture d'URLs dans PluXml, on fait appel à la fonction plxUtils::rel2abs(..) pour transformer les adresses relatives en adresses absolues.
Hors cette fonction n'a jamais été prévue pour traiter cette balise <object> si particulière et apparemment pas très employée.

Voici la fonction corrigée et simplifiée qui doit résoudre ce cas particulier:

[== PHP ==]
    public static function rel2abs($base, $html) {

        if (substr($base, -1) != '/')
            $base .= '/';

        # réécriture des liens commençant uniquement par une ancre
        $url = plxUtils::getRacine().plxUtils::getGets();
        $html = preg_replace('/(href=["|\'])#/', '$1'.$url.'#', $html);

        # on protège tous les liens externes au site, et on transforme tous les liens relatifs en absolus
        # on ajoute le hostname si nécessaire
        $mask = '=<<>>=';
        $patterns = array(
            '@(href|src|<object\s[^>]*data)=("|\')(#|[a-z]+:)@i', # lien interne ou protocole utilisé
            '@(href|src|<object\s[^>]*data)=("|\')(?:\./)?([^/])@i' # lieu relatif à transformer
        );
        $replaces = array(
            '$1'.$mask.'$2$3',
            '$1=$2'.$base.'$3'
        );
        if (preg_match('#^[a-z]+://#i', $base)) {
            $patterns[] = '#(href|src)=("|\')/([^/])#i';
            $replaces[] = '$1=$2'.$base.'$3';
        }
        $result = preg_replace($patterns, $replaces, $html);
        # on retire la protection des liens externes. Expressions régulières lentes et inutiles
        $result = str_replace($mask, '=', $result);
        return $result;

    }

La modif est à faire dans le script core/lib/class.plx.utils.php.

Explication de l'erreur:
Supposons que le pdf soit à afficher à l'adresse à l'adresse http://monsite.com/article99/la-liste et que object a la data égale à: data/medias/ma-liste.pdf, et que ce lien relatif n'est pas transformé en lieu absolu, alors le navigateur cherche à récupérer le pdf à l'adresse http://monsite.com/article99/data/medias/ma-liste.pdf. Alors que l'adresse réelle du pdf est http://monsite.com/data/medias/ma-liste.pdf.
CQFD

bazooka07 · juin 2017

Au final, la fonction plxUtils::rel2abs() peut se réduire à ceci:

[== PHP ==]
public static function rel2abs($base, $html) {

		if (substr($base, -1) != '/')
			$base .= '/';

		# Ne pas convertir Les liens commençant avec href="#....". Liens internes à la page !
		# on protège tous les liens externes au site, et on transforme tous les liens relatifs en absolus
		# on ajoute le hostname si nécessaire
		$mask = '=<<>>=';
		$patterns = array(
			'@(href|src|<object\s[^>]*data)=("|\')(#|[a-z]+:)@i', # lien interne ou utilisation d'un protocole type href="xxxx:...." à protéger.
			'@(href|src|<object\s[^>]*data)=("|\')(?:\./)?([^/])@i' # lieu relatif à transformer
		);
		$replaces = array(
			'$1'.$mask.'$2$3',
			'$1=$2'.$base.'$3'
		);
		$result = preg_replace($patterns, $replaces, $html);

		# on retire la protection des liens externes. Expressions régulières lentes et inutiles
		return str_replace($mask, '=', $result);

	}

J'ai fait un pull-request

webasso · juin 2017

@ Bazooka07
Merci, je viens de faire la modif... mais d'après ce que je comprends, en remettant le code initial je n'ai plus rien qui s'affiche
Où est mon erreur ?

[== PHP ==]
<object data="
http://spirit.ouvaton.org/data/medias/fiche-des-groupes-ra.pdf" height="600" type="application/pdf" width="100%"></object>

bazooka07 · juin 2017

Il faut laisser les adresses relatives sans http://...

[== PHP ==]
<object data="data/medias/fiche-des-groupes-ra.pdf" height="600" type="application/pdf" width="100%">
   <a href="data/medias/fiche-des-groupes-ra.pdf">Télécharger le document pdf</a>
</object>

webasso · juin 2017

... Merci Bazooka
J'ai modifié ton code en ajoutant la class pdf afin de conserver l'espace entre les symboles des réseaux sociaux et le pdf... j'ai bien fait ?

[== Indéfini ==]
<object class="pdf" data="/data/medias/fiche-des-groupes-ra.pdf" height="600" type="application/pdf" width="100%"><a href="/data/medias/fiche-des-groupes-ra.pdf">Télécharger le document pdf</a></object>

bazooka07 · juin 2017

Il n'y a pas de souci.
En fouillant dans PluXml, j'ai vu qu'il existe une class full-width pour afficher en pleine largeur. C'est mieux de gérer les dimensions avec CSS et ses class:

[== PHP ==]
<object class="pdf full-width" data="/data/medias/fiche-des-groupes-ra.pdf" height="600" type="application/pdf">
    <a href="/data/medias/fiche-des-groupes-ra.pdf">Télécharger le document pdf</a>
</object>

webasso · juin 2017

Merci Bazooka07
... Il n'y a rien de plus à modifier et/ou rajouter dans le css concernant l'appel à cette class full-width reliée au pdf ?

bazooka07 · juin 2017

Non, cela existe déjà dans la dernière version de PluXml.

(Résolu) Afficher un document pdf

Réponses