recherche

Maison >interface Web >js tutoriel >Méthode window.print pour imprimer une zone spécifiée d'une page Web spécifiée dans une compétence div_javascript spécifiée

Méthode window.print pour imprimer une zone spécifiée d'une page Web spécifiée dans une compétence div_javascript spécifiée

WBOY
WBOYoriginal
2016-05-16 16:40:291698parcourir

La première méthode : préciser la zone non imprimable
Utilisez CSS pour définir une classe .noprint et placez du contenu non imprimable dans cette classe.
Les détails sont les suivants : 

<style media=print type="text/css"> 
.noprint{visibility:hidden} 
</style>

Contenu à imprimer. Ha ha ! 

<p class="noprint">将不打印的代码放在这里。</p> 
<a href="javascript:window.print()" rel="external nofollow" target="_self">打印</a>

La deuxième méthode : préciser la zone d'impression
Placez le contenu à imprimer dans un span ou un div, puis imprimez-le via une fonction. 

<span id='div1'>把要打印的内容放这里</span> 
<p>所有内容</p> 
<div id="div2">div2的内容</div> 
<a href="javascript:printme()" rel="external nofollow" target="_self">打印</a> 
<script language="javascript"> 
function printme() 
{ document.body.innerHTML=document.getElementByIdx_x_x('div1').innerHTML+'<br/>'+document.getElementByIdx_x_x('div2').innerHTML; 
window.print(); 
} 
</script>

Si vous souhaitez imprimer seulement une petite partie de la page entière, il est préférable d'utiliser la deuxième méthode.

La troisième méthode : Si la mise en page de la page à imprimer est très différente de la page Web originale, utilisez cette méthode. Cliquez sur le bouton Imprimer pour ouvrir une nouvelle fenêtre, afficher le contenu à imprimer dans la nouvelle fenêtre, appeler la méthode window.print() dans la nouvelle fenêtre, puis fermer automatiquement la nouvelle fenêtre.
window.print peut imprimer des pages Web, mais parfois nous souhaitons uniquement imprimer des contrôles ou du contenu spécifiques. Que devons-nous faire ?

Nous pouvons d'abord mettre le contenu à imprimer dans un div, puis utiliser le code suivant pour imprimer. 

<html> 
<head> 
<script language="javascript"> 
function printdiv(printpage) 
{ 
var headstr = "<html><head><title></title></head><body>"; 
var footstr = "</body>"; 
var newstr = document.all.item(printpage).innerHTML; 
var oldstr = document.body.innerHTML; 
document.body.innerHTML = headstr+newstr+footstr; 
window.print(); 
document.body.innerHTML = oldstr; 
return false; 
} 
</script> 
<title>div print</title> 
</head> 

<body> 
//HTML Page 
//Other content you wouldn't like to print 
<input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print "> 

<div id="div_print"> 

<h1 style="Color:Red">The Div content which you want to print</h1> 

</div> 
//Other content you wouldn't like to print 
//Other content you wouldn't like to print 
</body>
</html>
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Compréhension approfondie de la surcharge de fonctions dans les compétences JavaScript_javascriptArticle suivant：Compréhension approfondie de la surcharge de fonctions dans les compétences JavaScript_javascript

Articles Liés

Voir plus