Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

VERSION IMPRIMABLE AVEC ENTETE, PIED DE PAGE ET URL DES LIENS IMRPIMÉES


Information sur la source

Catégorie :Fenêtre & Pop-up Classé sous : imprimmable, version, popup, liens, impression Niveau : Initié Date de création : 24/11/2005 Date de mise à jour : 28/11/2005 19:17:02 Vu / téléchargé: 7 990 / 6 368

Note :
7 / 10 - par 1 personne
7,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (13)
Ajouter un commentaire et/ou une note


Description

Cliquez pour voir la capture en taille normale
On trouve un très grand nombre de script permettant de faire uen version imprimable d'une page de son site.
Ha il est loin le temps ou on se paluché les pages imprimables à la main.

ALors il y a les défenseur du tout HTML et ceux du tout Javscript. Personnellement je n'est pas une réelle préférence bien que je trouve que pour des site hautement graphique il est déjà assez compliqué de produire une feuille de style fonctionnant sous plusieurs navigateur.

De tout les scripts que j'ai pu rapidement survolé aucun n'abordé un problème qui m'a souvent mis or de moi... Je m'explqiue:
Si comme moi vous aimez bien imprimmer certaines références, certains bons scripts, et gardé ainsi une trace papier ne vous est-il jamais arrivé de relire ces impressions et de vous retrouvez fasse a des liens imprimmées... du genre "cliquez ici"... vous pourrez essayer ca ne marche pas sur le papier. Alros on se dit pas grave à l'impression l'url de la page a automatiquement était mise en entête... erf zut elle ce termine par trois petit points. On ouvre google, et plus moyen de retrouver le page... bref ce magnifique "cliquez-ici" ne sert a rien... votre papier ne sert a rien... l'amzonie a disparue pour strictement rien.

Et voila avant de complètement devenir chèvre je vous propose ce script qui va trasnformé tous les liens du style "cliquez-ici" en "cliquez-ici [http://codessources.votre-web.com]" C'est pas grand chose mais c'est tellement plus appaisant :)

Deplus le script vous permet d'ajoute une entête et un pied de page.

Enfin le script se dévrouille tous seule avec les feuilles de style... voir plus loin les explications.
 

Source

  • Explications détaillées:
  • ------------------------
  • http://codessources.votre-web.com/js/printableVersion/
  • Démonstration en ligne:
  • -----------------------
  • Sur toute les pages de http://codessources.votre-web.com
Explications détaillées:
------------------------
http://codessources.votre-web.com/js/printableVersion/



Démonstration en ligne:
-----------------------
Sur toute les pages de http://codessources.votre-web.com

Conclusion

Pour la mise en place du script suffit de lancer la fonction printable_version(); en ayant auparavant définit le div qui doit etre imprimmé via:
var divPrintableContentId='monDivId';

Si vous avez des problème n'hésitez pas à le dire.
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

24 novembre 2005 17:20:15 :
Oups, le zip n'était pas correcte. C'est corrigé.
24 novembre 2005 21:18:13 :
Re oups... j'avais laissé mes sources photoshop et les abominables .thumb... bref le zip a finit sa cure de maigrissement.
28 novembre 2005 19:17:02 :
Correction d'un bug sous Firefox: -blocage lors de l'ouverture de la popup, celle-ci ne généré pas d'événement onLoad. Amélioration: -récupération de l'encodage de la page source et recopie dans la popup (avec valeur par défaut si pas trouvé) -passage en premier argument de la fonction (falcultatif) de l'id du div à traiter en temps que contenu imprimmable. -si pas de div de contenu trouvé, alors prise en compte de tout le body en temps qu'élément à imprimmer -rajout d'un second argument (facultatif) permettant de définir si le dialogue d'impression s'ouvre imédiatement ou non. Le comportement par défaut et non. -un message indique qu'il faut présser la combinanson de touche <ctrl>+p pour ouvrir cette boite (si celle-ci n'est aps ouverte toute seule. Mise à jour du zip avec une démo bien plus légère (juste le js et un fichier html de démo).

Commentaires et avis

signaler à un administrateur
Commentaire de coucou747 le 24/11/2005 18:31:51

sans regarder, j'ai déja plusieurs remarques :
-le javascript n'est pas super super pour le référencement, si on a du php, mieux vaut l'utiliser si tu veux réellement faire une version imprimable...
-et en CSS, grace à l'instruction media="print" ou media="screen", chaque page peut être à la fois une version imprimable et une version affichable...
-t'as plein de fichiers qui ne servent à rien : thumbs.db et tes .psd, on s'en moque, on veut juste du code... d'autant plus que pour les ouvrir faut avoir photoshop...

en lisant le code :
return;
ça sert à rien, en javascript, une fonction qui ne renvoi rien n'a pas besoin de return

et ouais, ça a beau être pas trop mal codé, en CSS, c'est plus propre qu'en javascript...

signaler à un administrateur
Commentaire de MaX3315 le 24/11/2005 18:46:49

Si tu avais quand meme un tout petit peut regardé tu aurait lu que je disait que c'était possible en CSS...  Mais mettre les url a l'impression j'attends de voir ca en css.

Concernnat le référencement je comprends vraiment pas le problème... j'ai jamais vu qu'on référencé les version imprimmable! Au contraire ca perturbe le référencement et la navigation.

Pour les fichiers dans le zip je vais faire le menage j'ai pas fais trop attention. Désolé.

signaler à un administrateur
Commentaire de coucou747 le 24/11/2005 19:39:16

une version imprimable n'a pas de liens vers l'extèrieur (seulement des urls affichés) si elle est faite en php. Mais elle peut avoir des liens internes pour augmenter son référencement, ainsi, elle est mieux référencé qu'une page classique...

IE et mozilla firefox ajoutent automatiquement l'adresse du site lors d'une impression... et si t'en est pas convaincu :
dans un CSS avec media="screen"
.justprint{
display:none;
}
dans un CSS avec media="print"
.justprint{
display:block;
}
bon, et ensuite, dans une page :
<p class="justprint">http://monURL</p>

signaler à un administrateur
Commentaire de la_pin le 24/11/2005 19:42:45

A part tous les fichiers qui ne servent a rien dans le zip, le script est vraiment pas mal du tout et vraiment bien expliqué.
Super cool !

signaler à un administrateur
Commentaire de MaX3315 le 24/11/2005 21:11:23

Merci LA_Pin

>>coucou47, quand je dis que j'ajoute les URL c'est pas celle de la page. C'est pas du tout ce que fais ce script. La c'est tout les liens de type <a href="http://www.google.com">Google</a> qui vont être transformé en <a href="http://www.google.com">Google (http://www.google.com)</a>.

Ici le but de ce script et de strictement rien préparé pour l'impression! Zéro fichier a créer simplement un include javascript et un boutton appelant la fonction à mettre quelque part.

Et enfin ce script n'a absolument rien d'incompatible avec les différents média du CSS et rien n'empeche d'utiliser des définitions spécifique pour le print.

Concernnant le référencement j'ai vraiment du mal à comprendre ton explication sur le pourquoi ca va augmenter le référencement. Pour moi augmenter son référencement c'est pas indéxer plus de pages... c'est indéxer correctement les vrai page de contenu.

signaler à un administrateur
Commentaire de SebLep le 25/11/2005 09:15:13

Sous Firefox(1.0.7), je n'arrive pas à lancer l'impression; la fenêtre formattée apparaît bien, mais la boîte de dialogue de choix d'imprimante ne surgit qu'apès avoir fermé la fenêtre d'aperçu...
Sous IE, l'impression commence tout de suite sans proposer l'imprimante, est-ce le comportement normal ?
Ses remarques sont aussi valables pour tin site perso.
(Je n'ai pas pris le temps de regarder ton code pour le moment...)

signaler à un administrateur
Commentaire de MaX3315 le 25/11/2005 12:15:53

>>SebLep
"...Sous IE, l'impression commence tout de suite sans proposer l'imprimante, est-ce le comportement normal ?..." ca c'est vraiment étrange... à part avec de l'activeX je sait pas faire cela en javascript. Ici le comportement prévue est de rien faire. Mes il est possible au script de demander une ouverture automatique de la boite de dialogue de l'imrpimante.

Pour Firefox que je viens de mettre à jour il y a effectivement un problème.
Impossible de faire ctrl+p ou autre chose... En fait la page n'a pparemment pas fini de ce charger. Le voyant indiquant le chargement continue à tourné... Pourquoi je c'est pas [encore] et comment contourné ce problème je sais pas non plus vraiment [pour l'instant].
La seule solution c'est de provoquer l'impression avec print() et tout de suite apprès de demander un close()... ca devrait avoir le même effet que lorsque l'on ferme a la main la popup.  Puisque la boite d'impression ne vient pour l'instant que à ce moment.

Je me penche sur ce problème au plus vite. (sur mon site il y a deja une version légèrement plus propre, mes pas encore en téléchargement. Je mettrais a jour le zip dès qu'une solution sera trouvée)

Si quelqu'un a déjà trouvé une solution à ce problème de page qui finisse pas de se charger sous Firefox merci de me faire signe.

Pour ma part j'ai:
- mis des valeur de retour au fonction (change rien au problème).
- mis le charset (automatiquement récupéré du document d'origine).

Je vais smaintenant tenter d'assigner un handler à l'evenement onLoad depuis la fenêtre appelante.

signaler à un administrateur
Commentaire de coucou747 le 25/11/2005 22:21:05

Sous IE : ctrl+P = impression sur l'imprimante par défaut...
Sous firefox, on a toujours le choix....

signaler à un administrateur
Commentaire de MaX3315 le 26/11/2005 09:34:15

Vous n'obtenez pas cette boïte de dialogue (cf capture d'ecran ci dessous) sous IE avec CTRL+P ?

http://prodeon3.nuxit.net/codessources//images/screenshots/screenshot_ctrl_p_IE.gif

NB: Ma config : IE 6 sous XP SP2 Pro

signaler à un administrateur
Commentaire de MaX3315 le 26/11/2005 14:25:08

Je pense avoir trouvé une solution.

Quelqu'un qui avait des problème avant pourrait-il me confirmer cela sur mon site:
http://prodeon3.nuxit.net/codessources/js/printableVersion/index.php

Si cela fonctionne maintenant je mettrai à jour le zip.

Début de réponse:
------------------
popup=window.open('','','');
popup.write('toto');

En ecrivant les deux lignes ci-desous vous obtiendrez une popup qui n'arrive pas a acheve son chargement sous Firefox (le petit truc n'arrete pas de tournée pour signaler 'chargement...').

La solution sous firefox est donc simplement de declencher popup.stop();  une fois toute les actions effectués.  J'ai pas encore testé si dans ce cas l'événement onLoad est corrctement géré. Pour l'instant j'appel la fonction a la fin du contenu de la popup ce qui reviet presque au meme dans ce ca sde figure.

signaler à un administrateur
Commentaire de SebLep le 26/11/2005 19:09:25

Ca marche !... Merci d'avoir corrigé. Attention tout de même, de plus en plus de navigateurs bloquent les fenêtres pop-up par défaut. Comment cela réagit dans ce cas ?

signaler à un administrateur
Commentaire de MaX3315 le 26/11/2005 21:05:08

Il ne s'agit pas d'une popup intempestive puisque l'ouverture intervient sur une action utilisateur le 'clic'. Je vais télécharger un bloquer pour firefox et tester cela. Je pense que la fonction doit renvoyer false ou null... donc je pourrais certainement afficher une alerte décrivant le problème.

Je test et demain je mets a jour le Zip.

Merci d'avoir testé.

signaler à un administrateur
Commentaire de MaX3315 le 28/11/2005 19:19:16

Et voilà la nouvelle source est dans le zip avec un certain nombre d'amélioration (cf suivi des mise à jour sur cette page).

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Impression d'un popup créé par programmation [ par phidelum ] Bonjour,je cherche &#224; imprimer le r&#233;sultat d'un calcul dans une fen&#234;tre style popup cr&#233;&#233;e de toute pi&#232;ce en javascript. C inseré un lien dans un popup en java ... [ par sohan57 ] Salut, QQ1 sait comment je peux insérer un liens dans le code suivant :&lt;p align="center"&gt;&lt;a href="Galeries/Le%20Groupe/index.htm" onClick="al Popup/fenêtre depuis des liens en images [ par ginie_e ] Bonjour,J'ai réalisé une page remplie d'images qui servent de liens pour d'autres sites, mais je souhaiterais qu'en cliquant sur une de ces images, un creer une popup a partir d'un fichier .CSV [ par clement1138 ] Bonjour a tous,voila.....j'ai une page ou se trouvent des liens......ces liens sont en provenance d'un fichier .csv .....sous la forme &lt;a href&gt; Popup avec fond flouté [ par Tibzzzzz ] Bonjour à tous ! pour être plus compréhensible avec mon sujet, voici une image pour montrer ce que je veux faire...http://img180.imageshack.u Modifier une fausse popup avec calque [ par AnalchiK ] Bonjour à tous,Ma question concerne ce script:http://www.javascriptfr.com/codes/FAUSSE-POPUP-AVEC-EFFET-TRANSPARENCE_41941.aspxDa iframe images visibles impression [ par ju0123456789 ] Bonjour,Je voudrais integrer une iframe pour mon site web mais qui cache les images (qui elles seront visibles à l'impression).En fait, sur mon site j ZOOM dans popup [ par leounette ] Bonjour,Si vous cliquez sur ce lien et que vous cliquez sur "zoom".un pop Fenêtre mère + Popup fille [ par CrazyShooter ] Bonjour à tous!Voici mon problème bien que parcoruant la majorité des topics de ce forum je n'ai pu résoudre :(Alors j'ai une fenêtre mère qui appelle Sélection des types de liens ouverts par lightbox [ par ZuldarKeops ] Bonjour à tous. On m'a conseillé votre forum pour obtenir de l'aide pour régler mon problème, c'est pourquoi je poste ici. On m'a demandé de faire un


Nos sponsors

Sondage...

CalendriCode

Janvier 2009
LMMJVSD
   1234
567891011
12131415161718
19202122232425
262728293031 

Consulter la suite du CalendriCode



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,390 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.