JavaScript は、button_javascript スキルをクリックすることで直接印刷を実装します。-jsチュートリアル-php.cn

JavaScript は、button_javascript スキルをクリックすることで直接印刷を実装します。

WBOY

リリース： 2016-05-16 15:21:26

オリジナル

2044 人が閲覧しました

多くの Web サイトにはこの機能があり、一番下にある印刷ボタンをクリックすると印刷機能が完了します。この機能は非常に優れており、使いやすく、コードも非常に簡単です。

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

ログイン後にコピー

つまり、window.print() 関数を呼び出して現在のページを印刷するだけです。

ただし、一部の Web ページの多くのコンテンツは印刷する必要がないため、上記は完璧ではありません。ページ上の指定されたコンテンツを印刷する方法は次のとおりです。

コードは次のとおりです:

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

ログイン後にコピー

特記事項: 印刷プレビューでは、テストのためにコードをローカルマシンにコピーする必要があります。コピーしないとエラーが発生します。

上記のコードは、Web ページの指定されたコンテンツを印刷する効果を実現します。以下に実装プロセスを簡単に紹介します。

1. 実装原則:

js コードで document.body.innerHTML =newstr を使用して、元の本文のコンテンツを印刷するコンテンツに動的に置き換えます。原理は簡単です。詳細については、を参照してください。コードのコメント。

2. コードのコメント:

1.function printdiv(printpage){} は、印刷を制御する関数を宣言します。パラメータはオブジェクトであり、このオブジェクトのコンテンツが印刷されます。
2.var newstr = printpage.innerHTML; 印刷するコンテンツを取得します。
3.var oldstr = document.body.innerHTML、元の本文のコンテンツ。
4. document.body.innerHTML =newstr、元の本文のコンテンツを印刷するコンテンツに置き換えます。
5.window.print()、印刷を開始します。
6.document.body.innerHTML=oldstr を実行し、元の本文のコンテンツを復元します。

3. 関連記事:

1. window.print() 関数については、window オブジェクトの print() メソッドの章を参照してください。
2. onclick イベントについては、JavaScript onclick イベントの章を参照してください。

上記の内容は比較的単純で、ボタンをクリックして印刷機能を実装するための js を学習するのに役立つ別のコードコメントが記載されています。この記事が役立つことを願っています。