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');