2009-04-19 4 views
1

J'ai une division particulière dans ma page Web. Je veux imprimer ce div seulement lorsque vous cliquez sur "imprimer" dans ma page Web. J'ai du code javascript. Mais ce n'est pas bien formaté.Imprimer avec Javascript?

Existe-t-il un javascript pour imprimer une division particulière de ma page Web?

Merci à l'avance

  • Gnaniyar Zubair
+0

Est-ce que cela vous dérange de marquer cette 'Réponse'? – Andy

Répondre

9

Vous pouvez spécifier les feuilles de style CSS with the attribute media="print" et appliquer le style display: none; à tous les éléments, à l'exception de ceux que vous souhaitez imprimer.

Par exemple:

print.css

* { display: none; } 
div.print_block { display: block; } 

page.html

<HEAD> 
<LINK rel="stylesheet" type="text/css" 
    media="print" href="print.css" /> 
</HEAD> 

<DIV class="print_block"> 
    ... 
</DIV> 
+0

merci andy ... puis dans le bouton d'impression onclick je dois donner onclick = 'window.print()'. alors il imprimera seulement ce div. droite? –

+0

Oui, bien que le JavaScript ne soit pas vraiment pertinent; la même chose se produira lorsque l'utilisateur se rendra dans Fichier-> Imprimer lui-même. – bobince

+0

Oui. Il applique les styles media = "print".Vous pouvez tester ceci sans imprimer en changeant la balise media = "screen" à la place (en vous assurant que c'est la dernière feuille de style référencée. – Andy

1

Je ne pense pas qu'il y ait un moyen direct de le faire. Vous pouvez cependant:

  • Créer un CSS spécial pour media=print où tout mais le div que vous voulez imprimer est caché, OU
  • Utilisez un iframe caché pour le contenu que vous souhaitez imprimer

Google avec les termes "javascript print partielle page" peut vous aider à trouver des tutoriels.

+0

CSS serait la meilleure option. –

+0

Bien sûr, mais j'ai vu des pages utilisent aussi les iframes, je l'ai mentionné par souci d'exhaustivité. – dirkgently

4

Si vous voulez cacher certains divs lors de l'impression, vous pouvez les régler sur « display: none "dans une section médias imprimés de votre feuille de style, et ils n'apparaîtront pas.

par exemple, dans votre feuille de style:

@media print { 

    div.header { 
     display: none; 
    } 

    div.printable { 
     page-break-inside: avoid; 
     page-break-after: always; 
    } 
} 

Cette réponse est presque exactement le même que les deux qui m'a battu 4 minutes :-), une note que vous n'avez pas besoin d'un ensemble séparé stylesheet si vous ne voulez pas ...

Aussi, le "page-break-inside: avoid;" et "page-break-after: toujours;" les clauses sont bonnes pour imprimer quelques divs, chacun sur sa propre page.

0

J'ai vu smf comme ça dans un projet à mon travail. Vous devez ouvrir popup dans le popup vous mettez du contenu de la page parente que vous voulez imprimer. Et c'est tout :)

3

Vérifiez ce plugin jQuery jqPrint. Il semble faire ce que tu veux.