Impression d'une partie de la page avec du javascript

Version imprimable

Bonjour,

j'essaye d'imprimer une partie d'une page web a partir du code javascript et je n'arrive pas a conserver la mise en page lors de l'impression.

Voile le code que j'utilise :

Code:

1
2
3
4
5
6
7
8
9
10
        function printPartOfPage(elementId) {
            var printContent = document.getElementById(elementId);
            var printWindow = window.open('','','left=50000,top=50000,width=0,height=0');
 
            printWindow.document.write(printContent.innerHTML);
            printWindow.document.close();
            printWindow.focus();
            printWindow.print();
            printWindow.close();
        }

la partie à imprimer en question est :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div id="pnlSummary" class="summary boxTop">
 
            <div id="updSummary">
 
                    <h2>
                        Résumé du fichier
                    </h2>
                    <span class="data">
                        <span id="lblNbTitre">Nombre de produits</span>
                        :
                        <span id="litNbTitre">  579</span>
                    </span><span class="data">
                        <span id="lblNbCards">Nombre de cartes</span>
                        :
                        <span id="litNbCards">  0</span>
                    </span><span class="data">
                        <span id="lblNbBenef">Nombre de bénéficiaires</span>
                        :
                        <span id="litNbBenef">  43</span>
                    </span><span class="data">
                        <span id="lblTotalFacialValue">Valeur totale</span>
                        :
                        <span id="litTotalFacialValue"> 4 053,00</span>
                        € </span><span class="data">
                            <span id="lblDeliveryDate">Date de livraison souhaitée</span>
                            :
                            <span id="litDeliveryDate">20/01/2013</span>
                        </span><span class="data">
                            <span id="lblErrorsCount">Nombre d erreurs restantes</span>
                            :
                            <span id="litErrorsCount">0</span>
                        </span><span style="clear: both; display: block;"></span>
 
	</div>
 
</div>

Pourriez vous me donner un lien vers un tuto permettant de faire cela ? ou directement une solution pour que le design (css et mise en page )soit respecté ?

Ce code HTML est généré à partir d'une page en ASP.NET.

Merci d'avance !

Le problème (entre autre), c'est document.write. Plus tu l'éviteras, mieux tu te porteras (code inclus) :)
Pourquoi fermer la popup avant de lancer la fenêtre d'impression ??
Code:

1 2 3 4 5 6 7 function printPartOfPage(elementId) { var printContent = document.getElementById(elementId); var printWindow = window.open('','','left=50000,top=50000,width=0,height=0'); printWindow.document.body.appendChild(printContent); printWindow.print(); }
Pour aller plus loin, je te conseille de te renseigner sur les media CSS. Plus particulièrement le media print. Ce qui permet de faire des feuilles de style dédiées à l'impression. Ainsi, plus besoin de passer par ce javascript bancal, c'est le CSS qui définit quoi imprimer.

03/01/2013, 14h29
Bovino

Citation:

Pourquoi fermer la popup avant de lancer la fenêtre d'impression ??

Il ne ferme pas la fenêtre, il ferme le document.
Voir : Comprendre document.write() en JavaScript.
03/01/2013, 14h45
Kaamo

En effet, j'ai lu trop vite. J'ai cru voir une fermeture de la fenêtre et non du document !
03/01/2013, 14h47
Choucha

Bonjour,

merci pour vos réponses,

j'ai testé avec le append child, et j'obtiens une erreur :

Citation:

htmlfile: No such interface supported

ou

Citation:

htmlfile: Type mismatch.

si j'ajoute un .innerHTML sur le printcontent.

Je vais me renseigner sur les mediaCSS pour vois si ça peux convenir !
03/01/2013, 15h12
Choucha

Si j'ai bien compris le but des Media CSS : c'est une nouvelle feuille de CSS qui n'est prise en compte que lorsque l'on essaye d'imprimer la page en cours par le browser ( avec ctrl + P ), donc il me suffit de cacher ce qui ne m’intéresse pas dans cette feuille de style et d'imprimer la page normalement ?
en mettant bien "média" dans les parametres de la sheet.

J'ai bon ? ( en gros )
03/01/2013, 15h28
Kaamo

Oui, c'est exactement l'idée ! En mettant media=print

Code:

<link rel="stylesheet" type="text/css" href="style_print.css" media="print" />

et bien sûr, laisser l'autre feuille de style pour l'affichage "classique"

Code:

<link rel="stylesheet" type="text/css" href="style_classique.css" />

Pour encore aller plus loin, tu verras que l'on peut définir autre chose que print et ainsi sélectionner une feuille de style en fonction, par exemple, de la taille d'un écran.

Bien sûr, il faut avoir conscience que les anciens IE (<= 8) ne sont pas compatibles.
03/01/2013, 15h37
Choucha

Je ne pense pas avoir besoin de plus d'infos, j'ai juste besoin d'imprimer une popup a la fin d'une simple opération d'import de fichier.

Merci pour les pistes, je vais tenter d'arriver a quelque chose demain matin !
03/01/2013, 15h58
SpaceFrog

Impression de pop ?
Et si les popups sont bloqués ....

le media print me parait bien plus adapté
un div en display none pour le media screen et le tour est joué avec un self.print et un media print qui affiche le div et rend le reste de la page visible

Un petit exemple pour l a route http://sk-martin.developpez.com/Certif.htm
04/01/2013, 07h30
Choucha

Ce n'est pas une vraie popup, c'est juste une div caché jusque là qu'on affiche en gros quand le processus est terminé.

c'est cette Div que j'aimerais imprimer ( voir code de mon premier post ).
04/01/2013, 09h17
SpaceFrog

C'est exactement ce que fais le code donné en exemple ...

Pour ce qui est de la fin du chargement si le contenu du div est chargé dynamiquement, je te conseillerais de egarder du coté de jquery et de son load() et d'en utiliser le call back pour lancer l'impression

Par contre dasn ton premier post il s'agit bien d'eun vraie popup

Code:

var printWindow = window.open('','','left=50000,top=50000,width=0,height=0');