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.