Imprimer deux zones d'une page

**pat100** · 24/05/2013, 14h55

bonjour

je souhaite imprimer deux zones d'une page a l'aide de window.print()

en fait ma page contient deux graphes et je souhaite imprimer l'un ou l'autre

comment faire

on peut pas faire deux feuilles de styles liees a deux fonctions pour l'impression de chaque graphe ?

j'avais commencé a ecrire

Code :

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

1
2
3
@media print{  
            .header, .menu, .noimprime, .hide { visibility: hidden;  }
}

mais si je masque le deuxieme graphe pour imprimer le premier

(ca marche avec ce qui est ecrit)

lorsque je voudrai imprimer le second c'est toujours le premier qui sera traité

puisqu'on peut pas modifier @media print...

**SpaceFrog** · 24/05/2013, 15h03

change le class dynamiquement ...

**pat100** · 24/05/2013, 17h26

chaque graphe est associé a un bouton

Code html :

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

1
2
<input type="button" value="Print" onclick="printGraph();return false" title="Impression du graphe"/>
<input type="button" value="Print" onclick="printGraph2();return false" title="Impression du graphe"/>

chaque fonction est de type par exemple

Code :

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

1
2
3
function printGraph(){
     window.print('placeholder');
}

Il faut associer une classe a chaque bouton ?

j ai du mal a comprendre

**pat100** · 24/05/2013, 17h48

si j'ai bien compris on peux pas utiliser media print

mais dans ce cas par exemple

Code css :

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

1
2
3
4
5
6
.hide {
visibility: hidden;
}
.hide2 {
visibility: hidden;
}

et dans ma fonction

Code :

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

1
2
3
4
5
function change_la_class() {
var btn = document.getElementById("btnTest");
btn.className= "hide";
 window.print('placeholder');
}

Code html :

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

1
2
3
4
5
6
<body>
<input type="button" value="print" class="hide" onclick="change_class()" id="btnTest">
 
<div id="placeholder"</div>
 
</body>

**NoSmoking** · 24/05/2013, 18h47

Bonjour,
tu peux même faire directement

Code :

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

1
2
3
4
5
function change_la_class( obj) {
//  var btn = document.getElementById("btnTest");
  obj.className= "hide";
  window.print('placeholder');
}

avec un appel

Code html :

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

<input type="button" value="print" onclick="change_class( this)">

Il faudra quand même le rendre visible après si l'on souhaites une 2éme impression.

Envoyé par pat100

si j'ai bien compris on peux pas utiliser media print

Ben si, tu peux essayer un truc de ce genre

Code html :

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

1
2
3
<style media="print" type="text/css">
.noPrint {display:none}
</style>

Code html :

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

<input type="button" value="print" class="noPrint" onclick="window.print('placeholder')">

**Bovino** · 24/05/2013, 21h24

Code :

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

window.print('placeholder');

Ca ne veut rien dire. print() ne prend pas d'argument !

Il faut que tu gères toi-même lors du clic les changements de classe sur les éléments avant de faire le print().

Imprimer deux zones d'une page

JavaScript

Discussions similaires

Partager

Partager