suchen

Heim >Web-Frontend >js-Tutorial >JavaScript implementiert das direkte Drucken durch Klicken auf die Schaltfläche_javascript-Fähigkeiten

JavaScript implementiert das direkte Drucken durch Klicken auf die Schaltfläche_javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:21:262052Durchsuche

Viele Websites verfügen über diese Funktion. Wenn Sie nach unten navigieren, wird auf die Schaltfläche „Drucken“ geklickt. Die Funktion ist sehr gut, benutzerfreundlich und der Code ist sehr einfach. 

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

Das heißt, rufen Sie einfach die Funktion window.print() auf, um die aktuelle Seite zu drucken.

Aber das Obige ist nicht perfekt, da viele Inhalte auf einigen Webseiten nicht gedruckt werden müssen. Hier erfahren Sie, wie Sie den angegebenen Inhalt auf der Seite drucken.

Der Code lautet wie folgt:

<!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>

Besonderer Hinweis: Für die Druckvorschau muss der Code zum Testen auf den lokalen Computer kopiert werden, andernfalls tritt ein Fehler auf.

Der obige Code realisiert den Effekt des Druckens des angegebenen Inhalts der Webseite. Im Folgenden finden Sie eine kurze Einführung in den Implementierungsprozess.

1. Umsetzungsprinzip:

Verwenden Sie document.body.innerHTML =newstr im js-Code, um den Inhalt im Originaltext dynamisch durch den zu druckenden Inhalt zu ersetzen. Das Prinzip ist so einfach die Codekommentare.

2. Codekommentare:

1.function printdiv(printpage){}, deklariert eine Funktion, die das Drucken steuert. Der Parameter ist ein Objekt und der Inhalt dieses Objekts wird gedruckt.
2.var newstr = printpage.innerHTML; um den zu druckenden Inhalt abzurufen.
3.var oldstr = document.body.innerHTML, der Inhalt im Originaltext.
4. document.body.innerHTML =newstr, ersetzen Sie den Inhalt im Originaltext durch den zu druckenden Inhalt.
5.window.print(), starten Sie den Druck.
6.document.body.innerHTML=oldstr und stellen Sie dann den Inhalt im Originaltext wieder her.

3. Verwandte Lektüre:

1. Informationen zur Funktion window.print() finden Sie im Kapitel Die print()-Methode des Fensterobjekts.
2. Informationen zum Onclick-Event finden Sie im Kapitel Javascript-Onclick-Event.

Der obige Inhalt ist relativ einfach und es gibt separate Codekommentare, die Ihnen helfen, js zu lernen, um die Druckfunktion durch Klicken auf eine Schaltfläche zu implementieren. Ich hoffe, dass dieser Artikel für alle hilfreich ist.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verstehen der JS-Event-Loop_Javascript-FähigkeitenNächster Artikel：Verstehen der JS-Event-Loop_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen