Maison > Article > interface Web > JavaScript implémente l'impression directe en cliquant sur les compétences bouton_javascript

JavaScript implémente l'impression directe en cliquant sur les compétences bouton_javascript

WBOYoriginal: 2016-05-16 15:21:261996parcourir

De nombreux sites Web ont cette fonction. Lorsque vous naviguez vers le bas, il y aura un bouton d'impression. Cliquez sur le bouton d'impression pour compléter la fonction d'impression. La fonction est très bonne, conviviale et le code est très simple.

<a href="javascript:window.print()">脚本之家</a>

Autrement dit, appelez simplement la fonction window.print() pour imprimer la page actuelle.

Mais ce qui précède n'est pas parfait, car une grande partie du contenu de certaines pages Web n'a pas besoin d'être imprimée. Voici comment imprimer le contenu spécifié sur la page.

Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>指定被打印的内容</title>
<script language="javascript"> 
function printdiv(printpage) 
{ 
var newstr = printpage.innerHTML; 
var oldstr = document.body.innerHTML; 
document.body.innerHTML =newstr; 
window.print(); 
document.body.innerHTML=oldstr; 
return false; 
} 
window.onload=function()
{
var bt=document.getElementById("bt");
var div_print=document.getElementById("div_print");
bt.onclick=function()
{
printdiv(div_print);
}
}
</script> 
</head> 
<body> 
<div id="div_print"> 
<h1 style="Color:Red">这是要被打印的内容</h1> 
</div>
<div style="Color:Red">欢迎您</div> 
<input name="print" type="button" id="bt" value="点击打印" /> 
</body> 
</html>

Remarque spéciale : l'aperçu avant impression nécessite de copier le code sur la machine locale à des fins de test, sinon une erreur se produira.

Le code ci-dessus réalise l'effet d'imprimer le contenu spécifié de la page Web. Ce qui suit est une brève introduction au processus de mise en œuvre.

1.Principe de mise en œuvre :

Utilisez document.body.innerHTML =newstr dans le code js pour remplacer dynamiquement le contenu du corps d'origine par le contenu à imprimer. Après l'impression, restaurez le contenu d'origine. Pour plus de détails, veuillez vous référer à. le code commente.

2. Commentaires du code :

1.function printdiv(printpage){}, déclare une fonction qui contrôle l'impression. Le paramètre est un objet, et le contenu de cet objet sera imprimé.
2.var newstr = printpage.innerHTML; pour obtenir le contenu à imprimer.
3.var oldstr = document.body.innerHTML, le contenu du corps d'origine.
4. document.body.innerHTML =newstr, remplacez le contenu du corps d'origine par le contenu à imprimer.
5.window.print(), lancez l'impression.
6.document.body.innerHTML=oldstr, puis restaurez le contenu dans le corps d'origine.

3. Lecture connexe :

1. Pour la fonction window.print(), veuillez vous référer au chapitre La méthode print() de l'objet window.
2. Pour l'événement onclick, veuillez vous référer au chapitre événement javascript onclick.

Le contenu ci-dessus est relativement simple et il y a des commentaires de code séparés pour vous aider à apprendre à js à implémenter la fonction d'impression en cliquant sur un bouton. J'espère que cet article sera utile à tout le monde.

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：Comprendre les compétences loop_javascript de l'événement JSArticle suivant：Comprendre les compétences loop_javascript de l'événement JS

Articles Liés

Voir plus