CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 02 09 13:31:16

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

IMPRIMER UNE ZONE D'UNE PAGE WEB II

Information sur la source

Note :

7,71 / 10

Catégorie :Menu & Co Niveau :Débutant Date de création :05/05/2005 Vu :23 823

Auteur : Pascalitos

Ecrire un message privé

Site perso

Commentaire sur cette source (42)

Ajouter un commentaire et/ou une note

Description

(amélioration du script IMPRIMER UNE ZONE DANS UNE PAGE WEB déjà publié)

Le script permet de sélectionner le contenu d'une zone afin de le charger dans une nouvelle fenêtre pour impression. L'ouverture de la fenêtre d'impression est déclenchée par une action sur un bouton "Imprimer cette page".

Placer le script dans la zone à imprimer, par exemple une cellule de tableau ou un div.

Ce script est compatible DOM et a été testé avec IE5+, Mozilla 1.7.3, Opera 7.54, Nestcape 6 sous Windows.
Un test interdit l'affichage du bouton 'Imprimer cette page" avec les navigateurs anciens comme Netscape 4 et Internet Explorer 4

Source

<script language="javascript">
// ******************************************************************
// Impression d'une zone DOM: IE5+ Mozilla NN6 Win
// pascal.itos@wanadoo.fr
// http://www.dev35.com
// ******************************************************************
function PSR_imprimer () {
var PSR_f1 = null;
var PSR_content=document.getElementById('PSR_print').parentNode.innerHTML;
var PSR_title=document.getElementsByTagName('title')[0].innerText;
if (PSR_f1) {if(!PSR_f1.closed) PSR_f1.close();}
PSR_f1 = window.open ('',"PSR_f1", "height=500,width=600,menubar=yes,scrollbars=yes,resizable=yes,,left=10,top=10"); ;
PSR_f1.document.open();
PSR_f1.document.write("<html><head><title>" + PSR_title + "</title></head><body bgcolor='#ffffff'>"+PSR_content+"</body></html>");
PSR_f1.document.close();
PSR_f1.document.getElementById('PSR_print').style.visibility='hidden';
PSR_f1.focus();
}
if ( window.name != "PSR_f1" && document.body.parentNode ) {
document.write ("<div align='right' id='PSR_print'><input onclick='PSR_imprimer();' type='button' style='font-family:arial; font-size:11px' value='Imprimer cette page'></div>");
}
</script>

<script language="javascript">
// ******************************************************************
// Impression d'une zone DOM: IE5+ Mozilla NN6 Win
// pascal.itos@wanadoo.fr
// http://www.dev35.com
// ******************************************************************
function PSR_imprimer () {
	var PSR_f1 = null;
	var PSR_content=document.getElementById('PSR_print').parentNode.innerHTML;
	var PSR_title=document.getElementsByTagName('title')[0].innerText;
	if (PSR_f1) {if(!PSR_f1.closed) PSR_f1.close();}
	PSR_f1 = window.open ('',"PSR_f1", "height=500,width=600,menubar=yes,scrollbars=yes,resizable=yes,,left=10,top=10");  ;
	PSR_f1.document.open();
	PSR_f1.document.write("<html><head><title>" + PSR_title + "</title></head><body bgcolor='#ffffff'>"+PSR_content+"</body></html>");
	PSR_f1.document.close();
	PSR_f1.document.getElementById('PSR_print').style.visibility='hidden';
	PSR_f1.focus();
}
if ( window.name != "PSR_f1" && document.body.parentNode ) {
  document.write ("<div align='right' id='PSR_print'><input  onclick='PSR_imprimer();' type='button'  style='font-family:arial; font-size:11px' value='Imprimer cette page'></div>");
}
</script>

Conclusion

Il existe un petit problème avec Nestcape 6,
le titre de la nouvelle fenêtre n'est pas correctement recopié.
A voir un jour...

Sources du même auteur

FORMULAIRE - AIDE À LA SAISIE

IMPRIMER UNE ZONE DANS UNE PAGE WEB

Toutes les sources de Pascalitos

Sources de la même categorie

MENU VERTICALE GAUCHE ET DROIT DEROULANT par kazma

MENU VERTICALE EN TRANSPARENCE par dlvains

MENU DÉROULANT EN IMAGES par dlvains

TBFRAME: TAB BROWSING FRAME par triumphs

MENU PRINCIPAL par ali1987

Toutes les sources de la catégorie Menu & Co

Commentaires et avis

Commentaire de coucou747 le 05/05/2005 22:18:21

je n'ai pas regardé le code, je dirais seulement que l'on peut faire ça avec les class css

Commentaire de Pascalitos le 06/05/2005 01:06:40

L'impression de la zone d'une page peut effectivement être réalisée avec des styles CSS.

Mais tout le monde ne maîtrise pas forcément les styles et si le site existe déjà et contient de nombreuses pages avec des structures différentes cela peut demander de nombreuses reprises.

Ce script permet d'ajouter facilement sans aucune connaissance en programmation une fonctionnalité d'impression de zone dans des pages déjà existantes.

Commentaire de gwpkwz le 06/05/2005 12:15:12

Commentaire de hellonono le 08/06/2005 15:40:30

Je suis interessé par l'impression grace aux styles. comment ca marche exactemnt ?

Commentaire de friteuseb le 15/06/2005 12:25:28

salut,
bravo pour cette application, qui correspond parfaitement à mes besoins.
Cependant, j'aimerais que la popup générée contienne un style css.
J'ai essayé d'ajouter <link href="fileadmin/print.css" rel="stylesheet" type="text/css"> dans le document.write mais le bouton print disparait.

Commentaire de Pascalitos le 15/06/2005 12:46:31

Réponse pour ajouter une feuille de style au popup généré
il faut rajouter un lien vers la feuille de style dans la fonction à la ligne 14

<script language="javascript">
// ******************************************************************
// Impression d'une zone DOM: IE5+ Mozilla NN6 Win
// pascal.itos@wanadoo.fr
// http://www.dev35.com
// ******************************************************************

function PSR_imprimer () {
    var PSR_f1 = null;
    var PSR_content=document.getElementById('PSR_print').parentNode.innerHTML;
    var PSR_title=document.getElementsByTagName('title')[0].innerText;
    if (PSR_f1) {if(!PSR_f1.closed) PSR_f1.close();}
    PSR_f1 = window.open ('',"PSR_f1", "height=500,width=600,menubar=yes,scrollbars=yes,resizable=yes,,left=10,top=10"); ;
    PSR_f1.document.open();
    PSR_f1.document.write("<html><head><title>" + PSR_title + "</title><link href='fileadmin/print.css' rel='stylesheet' type='text/css'></head><body bgcolor='#ffffff'>"+PSR_content+"</body></html>");
    PSR_f1.document.close();
    PSR_f1.document.getElementById('PSR_print').style.visibility='hidden';
    PSR_f1.focus();
}
if ( window.name != "PSR_f1" && document.body.parentNode ) {
  document.write ("<div align='right' id='PSR_print'><input onclick='PSR_imprimer();' type='button' style='font-family:arial; font-size:11px' value='Imprimer cette page'></div>");
}
</script>

Commentaire de bleck le 23/06/2005 16:22:33

Bonjours a tous,

la verité c'est que je ne comprend pas grand chose. Mais lorsque j'ai lu la description du script, là j'ai compris que c'etait ce dont j'avais besoin. Je l'ai donc copié et collé sur ma page, mais lorsque je clique imprimer il me dit:" cannot find your XML file. You need to uploadit for this form to work". Je comprend ce qu'il dit, mais pas pourquoi il le dit. Quelqu'un peut il m'aider?
Lien de la page http://www.movilextrem.com/docrepa.html
Merci d'avance
Bleck

Commentaire de Pascalitos le 23/06/2005 16:57:47

Réponse à Bleck

tu as placé le script en dehors des balises HTML
<html>...</html><script>....</script>
Il faut placer ce script dans la zone à imprimer c'est à dire par exemple à l'intérieur d'une balise td ou d'une balise div.

Mais dans le cas de ta page, cela ne présente pas d'intérêt car elle ne contient qu'une application Flash. Ce script ne présente un intérêt que lorsque l'on veut imprimer qu'une portion de la page.

Désolé

Commentaire de bleck le 23/06/2005 18:13:29

Merci pour ta reponse.
Il n'y a donc pas de solution pour rajouter un bouton imprimer a ma page et obtenir qu'il n'imprime qu'une seule feuille, celle du formulaire?
A bientot
Bleck

Commentaire de virgincola le 29/06/2005 20:48:29

Bonjour à tous,
Merci pour le script vraiment génial !!!
Petite question :
Peut-on mettre une image à la place du bouton?
Merci

Commentaire de Pascalitos le 29/06/2005 23:01:41

Peut-on mettre une image à la place du bouton?
Réponse : oui

Il faut remplacer le bouton ( balise HTML <input type='button' ...>)
par une image ( balise HTML <img src="images/bouton.gif" ...>)
ou par un bouton de type image (balise HTML <input type='image' ...>) .
----------------------------------------------------------------------

Au final pour remplacer le bouton par une image avec une balise <img ...>

il faut remplacer la dernière partie du code :

if ( window.name != "PSR_f1" && document.body.parentNode ) {
document.write ("<div align='right' id='PSR_print'><input onclick='PSR_imprimer();' type='button' style='font-family:arial; font-size:11px' value='Imprimer cette page'></div>");

par ce code :

if ( window.name != "PSR_f1" && document.body.parentNode ) {
document.write ("<div align='right' id='PSR_print'><img onclick='PSR_imprimer();' src='images/bouton.gif' style='cursor:pointer'></div>");

en corrigeant le lien pour l'image en fonction du nom du fichier image,
ici : src='images/bouton.gif'

Commentaire de nounou_sl le 19/09/2005 10:19:30

merci pour le script, juste une petite question: comment peut-on appeler l'api d'imprimante (window.print() )lors du chargement de la page generée?

Commentaire de foussil le 19/09/2005 14:12:24

merci pour ce code
et si jai des balise div qui se genere dynamiquement comment je peut l'integré dans tous mes balise
car si je copie le code la boulse qui creé les balise c'est toujour le contenu de la premiere balise qui s'imprime

Commentaire de Pascalitos le 25/09/2005 13:07:55

Ajouter window.print()
Il faut lancer l'action window.print() à la fin du chargement du document, pour cela il faut déclencher une action avec onload dans la balise body.

Remplacer la ligne 14
PSR_f1.document.write("<html><head><title>" + PSR_title + "</title></head><body bgcolor='#ffffff'>"+PSR_content+"</body></html>");

par la ligne suivante
PSR_f1.document.write("<html><head><title>" + PSR_title + "</title></head><body bgcolor='#ffffff' onload='window.print()'>"+PSR_content+"</body></html>");

Commentaire de Pascalitos le 25/09/2005 13:18:52

Comment intégrer le code dans toutes les balises DIV générées dynamiquement ?

Rappel sur le fonctionnement du script
Le script affiche dans une nouvelle fenêtre le contenu de la balise parente. Si la balise est un DIV , si le script est contenu dans cette balise le script pourra en afficher son contenu.
Si vous souhaitez pouvoir imprimer plusieurs zone DIV de la même page indépendamment, il faut insérer le script dans chaque zone

Pour revenir à la question
Cela dépend comment sont générées les balises DIV.
Avec un gestionnaire de contenu,
.vous pouvez insérer le script au niveau du formulaire de saisie des contenus, mais il faut répéter l'opération à chaque fois
.ou vous pouvez insérer le script au niveau du template (modèle) qui permet de générer la page dynamiquement, cette solution est préférable.
insérer le script

Commentaire de coucou747 le 26/09/2005 21:01:47

"Comment intégrer le code dans toutes les balises DIV générées dynamiquement ?"

des class et du CSS

vas lire les feuilles de styles de wikipedia par exemple

Commentaire de gwpkwz le 26/09/2005 21:08:19

vas lire les feuilles de styles de wikipedia par exemple

"Et bien enfin quelqu'un de raisonnable, Merci coucou747"
J'avais renoncé devant ce script datant de l'âge de pierre !

Commentaire de coucou747 le 27/09/2005 18:18:19

Commentaire de Une le 30/09/2005 17:32:26

Merci pour ce code qui me rend bien des services en attendant que mon site soit refait en XHTML...
Quelles modifications faudrait-il faire pour imprimer la balise grand-parent, voire arrière-grand-parent de celle où est placé le script ? Est-ce possible, d'ailleurs ?
Merci d'avance
Une

Commentaire de ifebo le 12/10/2005 22:28:50

Bonjour, Puisque personne n'en dit rien c'est que ça doit paraître complètement évident à tous sauf à l'ignare que je suis.
Voilà, je n'ai pas compris comment indiquer soit par css soit par javascript le début et la fin de la zone que je veut imprimer dans ma page ? j'avais imaginé un tag genre <div class="printzone">texte, texte, texte</div> partant de la css :
<style media="print" type="text/css">
#printzone {display: none}
</style>
mais ça n'a pas fonctionné ?
Avec le javascript, je n'ai rien essayé.
Quelqu'un peut-il m'aider. Merci.

Commentaire de ifebo le 12/10/2005 22:38:39

Oups ! j'ai oublié aussi de dire que j'ignore quelle est la commande possible pour lancer l'impression de cette zone.
J'ai cru m'en tirer avec :
<form><input class="printzone" type="button" value="Imprimer ce paragraphe" onClick="javascript:window.print()"><div class="printzone">texte, texte, texte</div></form>
Mais c'est toute la page qui est imprimée et ça nous donne au final 4 pages inutiles. Une aurait suffit.
Merci encore de vos bons conseils.

Commentaire de coucou747 le 12/10/2005 23:25:25

pas class mais id !

Commentaire de ifebo le 14/10/2005 01:34:07

Merci coucou747. Ha vraiment ! y a des fois !+@!*%§ !!! et encore je me retient ! Merci. Je vais tester ça de ce pas.

Commentaire de ifebo le 14/10/2005 03:02:46

Bin Heuuu! ça n'a pas fonctionné ???
Comme je n'y comprend rien je mets ci-dessous le code tel que je l'ai écrit peut-être verrez vous l'erreur ?


<Style media="print" type="text/css">
#printzone {display:none}
</Style>



<DIV id="printzone">

</DIV>


<form>
<input id="printzone" class="bouton" type="button" value="Imprimer le paragraphe" onClick="javascript:window.print()">
</form>

Le class="bouton" c'est parce qu'il y a une mise en forme sur le bouton depuis une css dans le header. Est-ce que ça peut perturber id="printzone" qui est dans la même ligne ?

Commentaire de coucou747 le 14/10/2005 23:30:27

NON !

UN ID EST UN IDENTIFIANT !!!

(utilisable une seule fois !!!)

<style media="print" type="text/css">
.printzone {display:none}
</style>

<div class="printzone">

</div>

Commentaire de ifebo le 15/10/2005 00:30:48

Merci coucou747, j'avais bien compris qu'il s'agissait d'un identifiant. Mais je me suis un peu mélangé les crayons. la fatigue sans doute, à moins que ce ne soit l'âge ;-).
On efface tout et on recommence ! Merci encore.

Commentaire de ifebo le 15/10/2005 20:51:19

Bon, je viens de me faire une page de test ci-dessous :

<HTML>
<HEAD>
<TITLE>Imprimer une zone dans la page</TITLE>

<Style media="print" type="text/css">
.printzone {display:none}
</Style>

</HEAD>
<BODY topmargin="50" leftmargin="50">

<div Align="right"><form>
<input id="printzone" class="bouton" type="button" value="Imprimer le paragraphe" onClick="javascript:window.print()">
</form></div>

<p><font face="arial" size="2" color="#003399">

<ol type="1">
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
</ol></li>

<HR Align="center" Size="10" width="80%" color="#990000">

<div class="printzone">
<ol type="A">
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
<li>Ligne de texte
</ol></li></div>

</font></p>
</BODY>
</HTML>

Quelqu'un aurait-il la possibilité de me dire pouquoi la zone exclue de l'impression est justement celle qui est censée s'imprimer ?
Celle donc qui est entre <div class="printzone"> et </div> ?
Merci, car si je ne l'apprend pas ici je ne l'apprendrais nulle part.

Commentaire de Pascalitos le 15/10/2005 23:22:15

Bonjour

avec le code ci-dessous

<Style media="print" type="text/css">
.printzone {display:none}
</Style>

tu masques les éléments identifiés avec la classe .printzone
pour media="print" donc l'impression.

Pour obtenir l'effet que tu désires il faut faire l'inverse,
c'est à dire
dans une déclaration de styles : media="print"
tu peux masquer tous les éléments ne devant pas apparaître à l'impression avec une classe .noprint { display:none } appliquées à chacun de ces éléments
et ne pas appliquer cette classe aux éléments que tu souhaites imprimer.

Commentaire de ifebo le 16/10/2005 00:56:10

Merci Pascalitos C'est un éclaicissement de plus qui me rend bien service. J'ai trouvé cette adresse sur laquelle j'ai également obtenu beaucoup de lumière sur les css en rapport avec l'impression. Elles est à retenir même par les connaisseurs :
http://www.openweb.eu.org/articles/css_impression/

Encore merci.

Commentaire de zboubi42 le 01/12/2005 11:22:36

Petite question je souhaites définir le script mais dans un fichier print.js et dans mes pages web appeller ce script (ca m'évite de changer de partout si je veux faire une modif) mais malheuresement cela ne fonctionne pas.
J'appelle mon script de la facon classique :
<Script Language="Javascript" src=print.js></script>
Le fichier print.js contient le code donné ici meme mais je n'ai pas le bouton
Merci pour vos réponses

Commentaire de zboubi42 le 01/12/2005 11:25:27

laissez tomber j'avais un mauvais caractère qui trainait ...

Commentaire de dircom45 le 17/01/2006 18:52:35

Merci pour le script, c'et génial. J'ai qiand m^me un problème: on fait comment pour changer la couleur de la police, car mon texte d'origine est blanc sur font noir et je veux l'imprimer en noir sur fond blanc.

Donc dans la ligne ci-dessous il doit manquer une fonction:

PSR_f1.document.write("<html><head><title>" + PSR_title + "</title></head><body bgcolor='#ffffff'>"+PSR_content+"</body></html>");

merci de votre aide

dircom45

Commentaire de cedcyr le 11/06/2006 00:23:16

je débute et donc un peut d'aide ne serais pas de refus. aprés avoir lu tout vos indication et les divers remarques de correction en mettant les code <DIV class="printzone"> et </DIV> avant et aprés chaque zone que je ne veut pas imprimer ainsi que <style media="print" type="text/css">
.printzone {display:none} </style> dans l'entête de mon document tout va bien a une écception prés. Il m'imprime des pages blanche en plus du tableau que je veut imprimer correspondant au partie que j'ai masqué, pourquoi? et comment puis-je corriger cela merci d'avance.

Commentaire de coucou747 le 11/06/2006 09:13:32

display:none; permet de cacher l'objet...

<style media="print" type="text/css">
body{
display:none;
}
.printzone {
display:block;
}
</style>

est surement mieux...

tu as aussi des méthodes en CSS 3 (en partie suporté par mozilla) qui permettent de remplacer entièrement cette source, y compris pour les urls des liens...

Commentaire de pagis78 le 16/06/2006 16:16:50

Bravo et Merci

Commentaire de fotechyss le 02/09/2006 19:23:33

Ce code est génial. Merci je le trouve vraiment beaucoup plus interressant que les css

Commentaire de araboss le 14/03/2007 02:28:36

merci pour le script
mais je veux mèttre le script dans le head et mettre le bouton imprimer n'import où dans ma page
comment je fait?

Commentaire de karinal le 23/07/2007 16:34:16

merci infiniment pour ce script génial qui m'a aidé à résoudre un grand problème mais reste des petits détails
le lien "imprimer cette page" s'affiche aussi ce qui est n'est pas trop beau ,une 2ème chose c qu'il faut faire de sorte que l'impression se déclenche automatiquement sans qu'on aura à effectuer ces lourdes taches
mais en tout cas je te félécite pour ce script interressant

Commentaire de bel84 le 02/03/2008 03:02:34

Bonjour,

Ce script fonctionne très bien,mais malgrès tout, j'ai un bug:
Je l'utilise pour imprimer une table dans laquelle il y a d'autres tables, et dans l'une de celles-ci, un formulaire.

Sur I.E., l'impression contient bien les valeurs entrées dans le formulaire, et c'est impec. Mais avec Firefox, ces valeurs ne sont pas reproduites.

Y a t'il une solution?
Merci de votre aide.

Commentaire de magy91 le 30/12/2008 21:45:08

bonjour
j'ai essayé d'utiliser ton script mais je rencontre quelques problèmes. Actuellement j'ai mis le script à la fin de ma page et il imprime toute la page. J'aimerai qu'il n'imprime que mon deuxième tableau, et sans mon menu de haut de page.
peux tu m'aider svp

Commentaire de younes777 le 19/02/2009 16:34:17

votre script ma aider
Merci

Commentaire de abdosoft le 18/08/2009 20:25:01

merci bcp pour ce script il fonction tres bien sur mozilla mais je rencontre un probleme en utilisant IE ,il sagit du bouton "imprimer cette page" qui s'affiche sur la page a imprimer
Y a t'il une solution? et merci de votre aide.

Ajouter un commentaire

Nos sponsors

Derniers Blogs

TECHDAYS PARIS 2010 : PLAN DE MIGRATION VERS SHAREPOINT 2010 par ROMELARD Fabrice

TECHDAYS PARIS 2010 : LA PLEINIèRE DU SECOND JOUR par ROMELARD Fabrice

VISUAL STUDIO 2010 AND .NET FRAMEWORK 4 RELEASE CANDIDATE NOW AVAILABLE par Matthieu MEZIL

CRéATION D'UNE BASE DE DONNéE SOUS SQL AZURE par junarnoalg

TECHDAYS PARIS 2010 : LES SERVICES D'APPLICATIONS DANS SHAREPOINT 2010 par ROMELARD Fabrice

Forum

RE : EFFET PAGE DE FOND GRISéE par Oumbra

PROTOTYPE: PROBLèME AVEC "EVENT" par bumbo

RE : [DéPLACé] PROBLèME DE POSITION DE L'IMAGE QUI SUIT LA SOURIS AU SURVOL D'UN TEXTE par molio

CONTRôLER LES HAUTEURS DE 2 DIV (CALQUES) PAR JAVASCRIPT ? par phpdos

RE : REFRECH APRèS ACTION par killer128

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Nouveau module Dolibarr
Budget : 700€
Charte graphique - joomla
Budget : 400€
SITE VENTE ENCHERES
Budget : 2 700€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5