Discussion :

[pubeldy]

Bonjour,

j'aimerais afficher la page courante dans sa version printer-friendly, dans une autre fenêtre, mais sans regénérer la page du côté serveur... Cela signifie aussi qu'il faut changer la CSS utilisée (pour utiliser la CSS dédiée à l'impression) à la volée, étant donné que la page n'est pas recréée... est-ce que vous pourriez m'aider?

Merci.

[frochard]

Il n'est pas nécessaire de changer la CSS utilisée :

Dans un seul fichier CSS il suffit de créer des sections

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
@media screen {
 
/* Code CSS utilisé lors d'un affichage écran */
 
}
 
@media print {
 
/* Code CSS utilisé lors de l'utilisation de la fonction Imprimer ou Aperçu avant impression
 
}

[pubeldy]

Hello Frochard,

merci, pour ta réponse. Par contre, je connais cette astuce et dans mon cas elle ne me sert pas étant donné que dans le fenêtre qui affiche la "prévisualisation" tout se passe à l'écran... le CSS dédié à l'impression (<style type="text/css" media="print" ...>) n'est donc pas appelé!
Mon idée, c'était d'afficher ma page actuelle (sans la regénérer côté serveur) et de forcer l'utilisation de la CSS dédiée à l'impression pour visualiser le résultat à l'écran...
est-ce possible?

[frochard]

Je n'ai jamais fait, mais regarde / modifie le contenu de :

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
22
 
var numCSS = 0;     // Index de la feuille de style
var numRegle = 0;   // Numéro de la règle
 
var IsIE	= (((navigator.appVersion.indexOf('MSIE 6') != -1) || (navigator.appVersion.indexOf('MSIE 7') != -1)) && (document.getElementById) && (navigator.userAgent.indexOf('Opera') == -1));
 
 
if (IsIE) {
 
if (document.styleSheets.length > numCSS)
    if (document.styleSheets[numCSS].rules.length > numRegle){
        alert (document.styleSheets[numCSS].rules[numRegle].selectorText);
        alert (document.styleSheets[numCSS].rules[numRegle].style.cssText);
    }
} else {
 
if (document.styleSheets.length > numCSS)
    if (document.styleSheets[numCSS].cssRules.length > numRegle){
        alert (document.styleSheets[numCSS].cssRules[numRegle].selectorText);
        alert (document.styleSheets[numCSS].cssRules[numRegle].style.cssText);
    }
}

Une autre piste que je verais : Ouvrir une page web vide avec les déclarations CSS pretes et ensuite effectue une copie des noeuds HTML contenu dans le document.body de la fenêtre 1 vers la fenêtre 2

[pubeldy]

merci pour ta réponse frochard, malheureusement, depuis, j'ai changé mon optique. Je suis arrivé à la même conclusion que toi: faire du parsing de ma page1 vers la page2 et changer à la volée le CSS... propre, pratique et économique.
Le fait est que j'ai dû parer au plus pressé et étant donné que je ne suis pas très callé en JavaScript j'ai préféré remettre à plus tard cette belle démonstration théorique. Pour l'instant, je regénère donc ma page et en fonction d'un simple flag, je créé ma page en version printer-friendly ou pas...
Quand j'aurai le temps, j'essayerai de parser... un jour!