Discussion :

[anibal]

Bonjour !

Est il possible d'imprimer une seule partie d'une page web en imprimant que certains elements en leur donnant des ID et en utilisant getElementById

Merci pour votre aide

[LeXo]

en CSS oui c possible

en javascript tu peux peut etre faire une fonction javascript

Code :

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

1
2
3
4
5
function imprimer(){
//efface le div
document.getElementByID("noprint").innerhtml="";
window.print();
}

[Auteur]

bonjour,

le meilleur moyen serait :

1. d'ouvrir une pop-up
2. de coller dans la pop-up les éléments ciblés
3. d'imprimer la pop-up

Il existe également le média print en CSS

Code css :

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

1
2
3
@media print
{
}

ne l'ayant jamais utilisé, j'ignore si c'est compatible avec tous les navigateurs.

[anibal]

Merci pour vos reponses l'option javascript je veux bien l'utiliser mais noprint dans getElementById ça refere à quoi au juste ?

[LeXo]

getElementById(truc) < va chercher l'élément avec l'id truc

Code :

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

1
2
<div id="noprint">
</div>

[Auteur]

en CSS oui c possible

en javascript tu peux peut etre faire une fonction javascript

Code :

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

1
2
3
4
5
function imprimer(){
//efface le div
document.getElementByID("noprint").innerhtml="";
window.print();
}

je ferai plutôt

Code :

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

1
2
3
 
document.getElementById("noprint").style.display = "none";//on cache l element
window.print();

histoire de ne pas perdre le contenu de l'élément, puis lorsque la page est imprimée :

Code :

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

1
2
 
document.getElementById("noprint").style.display = "block";//on affiche l element

au passage c'est Id et non ID

Code :

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

1
2
document.getElementById("noprint")

Et il faut que l'id soit unique dans ta page

[LeXo]

tu fais un css pour l'affichage écran et un CSS pour l'affiche impression

et tu lui attibues la sortie comme suis

Code :

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

1
2
<link rel="stylesheet" type="text\css" href="impression.css" media="print">
<link rel="stylesheet" type="text\css" href="affichage.css" media="screen">

Code :

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

1
2
3
4
//ne pas imprimer
.maClasse{
display=none;
}

[Auteur]

Code :

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

1
2
3
4
//ne pas imprimer
.maClasse{
display=none;
}

petite correction

Code :

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

1
2
3
4
//ne pas imprimer
.maClasse{
display : none;
}

[LeXo]

arf
oui effectivement

bon je vais devoir exposer la solution css2.0 pour me rattraper

t'as ton style.css

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
19
20
21
 
//défini les parametres de définition sur la sortie d'impression
@media print {
Body{
...
}
} 
 
//défini les parametres de définition sur la sortie d'écran
@media screen {
Body{
...
}
} 
 
//défini les parametres de définition sur la sortie écran & impression
@media screen,print {
.maClasse{
...
}
}

[LeXo]

sinon
utiliser le .style.visible

Code :

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

1
2
3
4
 
document.getElementByid('monId').style.visibility="visible";
 
document.getElementByid('monId').style.visibility="hidden";

[SpaceFrog]

Display none
ou visibility hidden,
tout est question du reésultat souhaité (mise en page)

mais quoi qu'il en soit il est plus simple de passer par media screen et media print ...