Discussion :

[Choucha]

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

S�lectionner tout - Visualiser dans une fen�tre � part

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

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

[Kaamo]

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

S�lectionner tout - Visualiser dans une fen�tre � part

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.

[Bovino]

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.

[Kaamo]

En effet, j'ai lu trop vite. J'ai cru voir une fermeture de la fen�tre et non du document !

[Choucha]

Bonjour,

merci pour vos r�ponses,

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

htmlfile: No such interface supported

ou

htmlfile: Type mismatch.

si j'ajoute un .innerHTML sur le printcontent.

Je vais me renseigner sur les mediaCSS pour vois si �a peux convenir !

[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 )

[Kaamo]

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

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

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

S�lectionner tout - Visualiser dans une fen�tre � part

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

[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 !

[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

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

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

S�lectionner tout - Visualiser dans une fen�tre � part

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