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

**quanou** · 04/08/2006, 10h41

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**FremyCompany** · 04/08/2006, 13h44

Proposition d'ajout à la FAQ, non testé

**quanou** · 04/08/2006, 15h27

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

Merci pour ton aide.

**FremyCompany** · 04/08/2006, 16h55

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**quanou** · 04/08/2006, 18h18

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**FremyCompany** · 04/08/2006, 18h49

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+

**quanou** · 04/08/2006, 19h43

Salut,
sympa

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**FremyCompany** · 04/08/2006, 19h58

Nouveau contenu de print.htm :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**quanou** · 07/08/2006, 11h35

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

**FremyCompany** · 07/08/2006, 12h00

Attention :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('Ctl00_Main_DIVDetail')

**quanou** · 07/08/2006, 12h07

Envoyé par FremyCompany

Attention :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

**davidlariv** · 06/02/2015, 12h37

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Le DIV:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 06/02/2015, 12h44

un petit exemple vaut mieux que de long discours

ici une methode css @media print
http://www.ouestisol.fr/JUSTALITTLEFOLDER/Certif.htm

**davidlariv** · 06/02/2015, 12h52

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

**SpaceFrog** · 06/02/2015, 13h10

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

**davidlariv** · 06/02/2015, 13h35

C'est PAR-FAIT!!!

Et tellement plus simple!!!

Merci Frog!

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

JavaScript

Discussions similaires

Partager

Partager