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
Libérer: 2016-05-16 16:40:29
original
1700 Les gens l'ont consulté

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>
Copier après la connexion

Contenu à imprimer. Ha ha !

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

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>
Copier après la connexion

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>
Copier après la connexion
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal