Home >Web Front-end >JS Tutorial >JavaScript implements direct printing by clicking the button_javascript skills

JavaScript implements direct printing by clicking the button_javascript skills

WBOYOriginal: 2016-05-16 15:21:262045browse

Many websites have this function. When you browse to the bottom, there will be a print button. Click the print button to complete the printing function. The function is very good, user-friendly, and the code is very simple.

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

That is, just call the window.print() function to print the current page.

But the above is not perfect, because a lot of content on some web pages does not need to be printed. Here is how to print the specified content on the page.

The code is as follows:

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

Special note: Print preview requires copying the code to the local machine for testing, otherwise an error will occur.

The above code realizes the effect of printing the specified content of the web page. The following is a brief introduction to the implementation process.

1. Implementation principle:

Use document.body.innerHTML =newstr in js code to dynamically replace the content in the original body with the content to be printed. After printing, restore the original content. The principle is that simple. For details, please refer to the code comments .

2. Code comments:

1.function printdiv(printpage){}, declares a function that controls printing. The parameter is an object, and the content in this object will be printed.
2.var newstr = printpage.innerHTML; to get the content to be printed.
3.var oldstr = document.body.innerHTML, the content in the original body.
4. document.body.innerHTML =newstr, replace the content in the original body with the content to be printed.
5.window.print(), start printing.
6.document.body.innerHTML=oldstr, and then restore the content in the original body.

3. Related reading:

1. For the window.print() function, please refer to the chapter The print() method of the window object.
2. For the onclick event, please refer to the javascript onclick event chapter.

The above content is relatively simple, and there are separate code comments to help you learn js to implement the printing function by clicking a button. I hope this article will be helpful to you.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Understanding the JS event loop_javascript skillsNext article：Understanding the JS event loop_javascript skills

See more

JavaScript implements direct printing by clicking the button_javascript skills

Related articles