[Débutant] Imprimer le contenu d'un div

Version imprimable

Bonjour,
Je ne connais pas bien le js. J'ai récupéré un code qui me permet d'imprimer le contenu d'un div :
Code:

1 2 3 4 5 6 7 8 9 10 function OnPrint() { var prtContent = document.getElementById('Ctl00_Main_DIVDetail'); var WinPrint = window.open('','','left=0,top=0,width=660,height=800,toolbar=0,titlebar=0,scrollbars=1,status=0'); WinPrint.document.write(prtContent.innerHTML); WinPrint.document.close(); WinPrint.focus(); WinPrint.print(); WinPrint.close(); }
Mais ce code ne marche que sur IE :(. Est-il possible de l'adapter pour le faire fonctionner sur les autres navigateurs, au moins Firefox ?

Merci beaucoup pour votre aide.

04/08/2006, 13h44
FremyCompany

Proposition d'ajout à la FAQ, non testé
04/08/2006, 15h27
quanou

Salut,
Merci pour ta réponse.
Mais je suis tellement boulet que je ne sais pas du tout comment ça marche.
Où dois-je placer le contenu de mon div dont l'ID généré est : 'Ctl00_Main_DIVDetail' ?
Comment implémenter la page print.htm ?
J'ai un site en aspnet 2.0, donc sans frames.
Je suis un peu perdu :oops:

Merci pour ton aide.
04/08/2006, 16h55
FremyCompany

Citation:

Envoyé par quanou

Salut,
Merci pour ta réponse.
Mais je suis tellement boulet que je ne sais pas du tout comment ça marche.
Où dois-je placer le contenu de mon div dont l'ID généré est : 'Ctl00_Main_DIVDetail' ?
Comment implémenter la page print.htm ?
J'ai un site en aspnet 2.0, donc sans frames.
Je suis un peu perdu :oops:

Merci pour ton aide.

L'ASP .Net (que ce soit la v1.x ou 2.0) n'a jamais interdit l'usage des frames ;)

Et bien pour faire simple, tu dois juste ajouter une iframe cachée

Code:

<iframe hidden="true" height="0px" width="0px" style="display: none" src="location_of_print.html"></iframe>

qqpart dans la balise <body>

Ensuite, il ne te reste plus qu'à faire ceci pour l'impression :

Code:

window.top.Printer.Print(document.getElementById("ctl001_MyAspCtrl").innerHTML)

Salut, j'ai créé le fichier print.htm à la racine

ensuite dans la page où il y a le bouton "imprimer" :

Code:

1
2
3
4
5
6
7
8
    <script language="javascript" type="text/javascript">
    	function OnPrint()
	    {
            var prtContent = document.getElementById('Ctl00_Main_DIVDetail');
            window.top.Printer.Print(prtContent.innerHTML)
	    }
    </script>
    <iframe height="0px" width="0px" style="display: none" src="/print.htm"></iframe>

Avec l'appel :

Code:

1
2
<a id="Print" href="javascript:__doPostBack('Print','')" 
onclick="return OnPrint();"title="Imprimer le formulaire"><strong>Imprimer</strong></a>

Rien ne se passe en fait, ni IE ni FF. Pas d'affichage d'erreur.
Ai-je fait une erreur de syntaxe quelque part ?
Merci

04/08/2006, 18h49
FremyCompany

Sans doute, chez moi ca marche très bien !

Juste, je me demande si le problème ne vient pas de :
href="javascript:__dopostback..."
et donc du fait que ton controle soit en ASP...

Utilise une simple balise A... ;)

Si ta page est en ligne, je veux bien essayer de t'aider

EDIT:
Pardon, ma solution marche très bien sur FireFox mais pas sur IE (la page courante est imprimée, et pas le contenu du texte d'impression)...
Ca m'ennuie un peu...
Bon, j'essaierai de corriger ca...
a+

Salut,
sympa :)

Voila le contenu du print.htm à la racine (copier/coller de ton code) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head><title>Print Zone</title></head>
<body>
<script>
window.top.Printer={
    "__window":window,
    "Print":function (HTML) {
        this.__window.document.body.innerHTML=HTML;
        this.__window.print();
    }
}
</script>
</body>
</html>

Merci beaucoup.

Nouveau contenu de print.htm :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
  <head><title>Print Zone</title></head>
  <body>
   <script>
    var Printer=new Object();
    Printer.Print=function (HTML) { 
        var win = window.open("")
        window.focus();
        win.document.title="Apercu de l'impression en cours";
        win.document.body.innerHTML=HTML;
        win.print();
        win.close();
    }
    window.top.Printer=Printer;
    // Utilisation, partout dans toutes les frames, iframes, page mère, etc // window.top.Printer.Print('Image selectionnée :<br /><img src="img01.gif" />')
   </script>
  </body>
</html>

Le seul défaut de cette technique, que j'avais voulu éviter, est qu'elle ouvre un popup...

07/08/2006, 11h35
quanou

Salut,
La popup ne me dérange pas du tout.
Ton code marche mais avec IE slt, pas sous FF et Netscape :(
https://extranet.ifct.fr/Default2.aspx
Si tu as d'autres idées, je suis preneur :)
07/08/2006, 12h00
FremyCompany

Attention :

Code:

<div id="ctl00_Main_DIVDetail" [...]>

Code:

document.getElementById('Ctl00_Main_DIVDetail')
07/08/2006, 12h07
quanou

Citation:

Envoyé par FremyCompany

Attention :

Code:

<div id="ctl00_Main_DIVDetail" [...]>

Code:

document.getElementById('Ctl00_Main_DIVDetail')

C'était ça depuis le début !! Merci un un milliard de fois :)
C'est qd meme permissif IE...
Merci encore
A+

Et en clair?

Bonjour à vous, désolé de relancer cette discussion mais après plusieurs essais je ne parviens pas à rendre ça cohérent...
Quelqu'un pourrait-il traduire pas à pas ce qui vient d'être dit?
Que faut-il faire exactement et où?

voici ce que j'ai fait:

Dans la page du DIV:
Code:

1 2 3 4 function OnPrint(){ var prtContent = document.getElementById('divaimprimer'); window.top.Printer.Print(prtContent.innerHTML) }
Code:

<iframe height="0px" width="0px" style="display: none" src="print.htm"></iframe>

Le DIV:
Code:

1 2 3 4 5 6 <div id="divaimprimer" style="margin-left:250px" align="center"> <textarea name="etc" id="texte" style="width:850px; height:1500px;"><?php // affiche texte si viens de réunion sinon affiche texte enregistré echo $texte_a_afficher; ?></textarea> </div>
Le bouton:
Code:

1 2 3 <a id="Print" href="javascript:__doPostBack('Print','')" onclick="return OnPrint();"title="Imprimer le formulaire"> <img src="../../../images/icones/printer.png" height="60"></a>
Et dans la page print.html:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <html> <head><title>Print Zone</title></head> <body> <script> var Printer=new Object(); Printer.Print=function (HTML) { var win = window.open("") window.focus(); win.document.title="Apercu de l'impression en cours"; win.document.body.innerHTML=HTML; win.print(); win.close(); } window.top.Printer=Printer; // Utilisation, partout dans toutes les frames, iframes, page mère, etc // window.top.Printer.Print('Image selectionnée :<br /><img src="img01.gif" />') </script> </body> </html>
Cette page reste blanche... Faut-il faire un envoi de POST et réafficher le DIV sinon à quoi sert l'envoi de l'id du dit DIV?

Merciiii

06/02/2015, 12h44
SpaceFrog

un petit exemple vaut mieux que de long discours

ici une methode css @media print
http://www.ouestisol.fr/JUSTALITTLEFOLDER/Certif.htm
06/02/2015, 12h52
davidlariv

Salut SpaceFrog,

Oui, bon, merci... ça marche, enfin, je comprends que je suis recalé.... mais ...

Mais ça ne répond pas à ma question...!!!

Comment? (Et avec image - bouton d'envoi...)

Merciii
06/02/2015, 13h10
SpaceFrog

regarde simplement le css de la page en question ...

il y a deux css ..;
un pour l'affichage ecran,
l'autre pour l'impression

Il suffit simplement de mettre display none sur ce que tu ne souhaites pas voir imprimé
EN l'occurrence un div pour l'ecran, un pour l'impression dans l'exemple.
Mais on peut tout a fait imaginer mettre les classes sur les éléments de la page
06/02/2015, 13h35
davidlariv

C'est PAR-FAIT!!!

Et tellement plus simple!!!

Merci Frog!