Lancer l'impression d'une URL en un clic

Bonjour

Je galère un peu pour réaliser une impression en un clic, d'une page fournie en paramètre (et non de la page courante).

Je vais essayer de préciser ma pensée par un exemple concret :
- rendez-vous sur la page http://dev.jldenois.com/fr/les-vins/
- cliquez sur la 2e bouteille : Chardonnay Extra Brut
- la fiche du vin s'affiche en overlay
- je souhaite que lorsqu'on clique sur le bouton "Imprimer", on imprime non pas la page courante (qui contient toutes les fiches vins en display:none), mais la page "nue" du vin, dans mon exemple : http://dev.jldenois.com/fr/les-vins/bulles/chardonnay-extra-brut
- autrement dit, je souhaiterai donc imprimer la page "destination" (http://dev.jldenois.com/fr/les-vins/bulles/chardonnay-extra-brut) sans pour autant quitter la page d'origine dans laquelle j'ai ouvert le popup de la fiche vin (http://dev.jldenois.com/fr/les-vins/).

Je pensais que ça serait un jeu d'enfants, mais que neni !
Je m'arrache les cheveux sur cette histoire.

Donc si vous avez un tuyau, je suis preneur

Je pense pas que ce soit possible. En général on fait un lien vers une version imprimable ou une fiche en pdf. Mais imprimer une page différente en JS, non.

PS : joli site.

Bonjour,

Ça pourrait fonctionner si la lightbox ouvrait le contenu dans une iframe. Tu peux aussi créer une feuille de style pour l'impression qui serait utilisée lorsqu'on clic sur Imprimer la fiche. Cette feuille cacherait les autres éléments du site à l'exception du contenu désiré.
Modifié par Tony Monast (14 May 2013 - 19:14)

Tony Monast a écrit :
Tu peux aussi créer une feuille de style pour l'impression qui serait utilisée lorsqu'on clic sur Imprimer la fiche. Cette feuille cacherait les autres éléments du site à l'exception du contenu désiré.

OK à la limite (soupir inside ), mais quel serait le code javascript pour ça ?

jb_gfx a écrit :
Je pense pas que ce soit possible. En général on fait un lien vers une version imprimable ou une fiche en pdf. Mais imprimer une page différente en JS, non.

Bon ok.
Et faire en sorte qu'une fois la page destination ouverte, une fonction jquery/javascript déclenche l'impression, c'est pas envisageable non plus ?

jb_gfx a écrit :
PS : joli site.

Merci

Pour l'idée du iframe, t'en dit quoi?

Ah oui! Effectivement, le site est magnifique.
Modifié par Tony Monast (14 May 2013 - 21:04)

a écrit :
Pour l'idée du iframe, t'en dit quoi?

Pour être honnête, j'ai un peu la flemme de refondre ce système de popup maintenant que le site est prêt à être lancé
D'autant plus que je suis peu familiarisé avec les iframes.

Mais bon si c'est l'unique solution qui se confirme, je reconsidèrerai (peut-être!) la question...

Autre chose à propos des iframes : ça va poser un soucis au niveau du référencement.
En effet, de ce que j'ai compris, on charge une page entière dans une iframe (et pas seulement une portion de code).

Aujourd'hui, tous les vins bénéficient d'une page avec entête et pied de page, prête à être indexée correctement par Google et visuellement correcte pour un visiteur.

Si je devais passer par une iframe, je devrais épurer mes pages vins en ne laissant QUE le contenu de la fiche.
Résultat : page non valide et sans entête pour Google, et visuellement peu attrayante pour les visiteurs qui tomberaient dessus directement.

Sauf si j'ai raté un truc...
Modifié par Spheerys (14 May 2013 - 21:33)

Techniquement, rien n'empêche de personnaliser le contenu en retirant l'entête et le pied de page uniquement lorsqu'il est chargé dans une iframe. Ça ne poserait aucun problème pour le référencement ou les visiteurs.

Pour un iframe en popup, c'est simple avec JQuery et le plugin Fancybox, mais si c'est fait maison, faut voir.

Si ni le iframe ni le changement de feuille de style d'impression ne t'intéresse, j'ai une dernière idée, parce que pour l'instant, je préfère proposer des idées et approndir seulement si l'une d'elles t'intéresse :

- Le bouton Imprimer cette fiche amènerait l'utilisateur vers la page de détails, en passant un paramètre dans l'url (ex : imprimer=1)
- Lorsque la page de détails apparaît et que le paramètre imprimer existe dans l'url, tu lances la fenêtre d'impression avec window.print en Javascript.

Spheerys a écrit :
Et faire en sorte qu'une fois la page destination ouverte, une fonction jquery/javascript déclenche l'impression, c'est pas envisageable non plus ?

Ce genre de truc ?

<script type="text/javascript">window.onload = window.print();</script>

Tony Monast a écrit :
Si ni le iframe ni le changement de feuille de style d'impression ne t'intéresse, j'ai une dernière idée, parce que pour l'instant, je préfère proposer des idées et approndir seulement si l'une d'elles t'intéresse :

- Le bouton Imprimer cette fiche amènerait l'utilisateur vers la page de détails, en passant un paramètre dans l'url (ex : imprimer=1)
- Lorsque la page de détails apparaît et que le paramètre imprimer existe dans l'url, tu lances la fenêtre d'impression avec window.print en Javascript.

Merci pour tes propositions

Toutefois la solution de benj réponds assez bien à ma problématique.
Je l'ai mise en place sur le site : http://dev.jldenois.com/fr/les-vins/

Bon c'est vrai qu'idéalement j'aurai préféré rester sur le popup plutôt que d'ouvrir la page de destination, mais en l'état actuel, ça me semble une solution peu coûteuse en temps d'implémentation (40 secondes, c'est le moins que je puisse dire ).

N'y aurait-il pas moyen, tjrs en javascript, de revenir à la page précédente (une fois l'impression lancée) ?


Edit : quelques désagréments de la solution de benj toutefois :
- si un visiteur tombe directement sur la page du vin, ça va lui proposer l'impression
- sur Opera, ça ne marche pas... je creuse la question
Modifié par Spheerys (14 May 2013 - 23:17)

Pour le premier désagrément, j'ai trouvé la solution : je passe un paramètre à l'ur lors du clic sur le bouton imprimer, et je ne charge la ligne javascript de déclenchement de l'impression que s'il est renseigné.
Ainsi, si un visiteur tombe sur le lien direct de la fiche vin via Google, je suppose que l'URL ne contiendra pas le paramètre (je vais faire un sitemap), et donc l'impression ne se lancera pas.

Pour le désagrément n°2 concernant Opera, j'ai trouvé la solution.
Le code qui marche pour tous les navigateurs est le suivant :

window.onload = function() { window.print(); }

Reste plus qu'à trouver la solution pour revenir à la page précédente après avoir lancé l'impression

Sinon joli site, cependant quand j'ouvre la page d'un vin et que j'ai un bouton "imprimer" la fiche, je m'attends à un truc sympa, mais je me fait trimballer sans comprendre ce qui m'arrive pour obtenir au final une page avec une photo et un titre. Sous firefox le titre est collé aux headers et le tout fait franchement cheap… enfin si j'avais utilisé du toner, j'aurais été un peu déçu de le faire pour ça

kustolovic a écrit :
mais je me fait trimballer sans comprendre ce qui m'arrive pour obtenir au final une page avec une photo et un titre. Sous firefox le titre est collé aux headers et le tout fait franchement cheap…

Prend une bouteille avec du contenu, la mise en page est sympa

Par contre le

overflow: scroll;

sur le body c'est normal ?

Pour le coup de la photo de la bouteille, moi j'étais pas pour.
Mais le client la voulait absolument : "les cavistes doivent pouvoir voir la tête de la bouteille qd ils impriment une fiche"
Après j'ai un peu baclé ma feuille de style print il est vrai.
Je vais me repencher dessus histoire d'avoir un truc plus clean.

Merci pour le retour en tout cas
Modifié par Spheerys (15 May 2013 - 00:50)

benj a écrit :
Prend une bouteille avec du contenu, la mise en page est sympa

Par contre le

overflow: scroll;

sur le body c'est normal ?

Vieille habitude pour avoir le site tjrs positionné horizontallement quelque soit la quantité de contenu de la page.
Mais bon t'as raison, je l'ai viré.

Salut,

J'ai déjà utilisé la technique suivante :
- Bouton print t'ouvre popup (window.open) avec ton contenu à imprimer
- Dans ta page à imprimer, au chargement (onload) :
- window.print()
- setTimeout("window.close();", tpsAvantFermetureEnMilliSecondes);

Mais bon, j'ai fait ça il y des années. Je ne sais pas comment j'aborderais la chose aujourd'hui...

tm

J'ai réussi à faire en sorte qu'une fois la fenêtre d'impression ouverte, le navigateur retourne à la page des Vins du site :

<script type="text/javascript">
  window.onload = function() { 
    window.print(); 
    history.back() 
  }
</script>

Si quelqu'un à une idée pour réaliser la même chose sans quitter la page d'origine, je suis preneur, même si c'est dans 6 mois

En attendant merci à vous pour votre aide

C'est vrai que sur une fiche remplie ça donne bien mieux Et par contre je trouve bien d'avoir la bouteille dans la fiche pour imprimmer.

Sinon j'ai une petite idée:

#1 Au chargement de la popup, on rajoute la classe "popin" sur le body, et on la retire lors de la fermeture.

#2 Dans la css print, on masque les vins et tout ce qu'on ne veut pas en cas de popin:

  body.popin #Vins, body.popin #MenuVins {
    display: none;
  }

Ainsi on imprimera bien la liste des vins lorsque la popin est fermée.

#3 De la même façon il ne reste plus qu'à adapter les styles de la popin:

au vu de ce que tu as fait ajouter la classe .popin sur la popup et tu as tout ce que tu veux.