JavaScript实现点击按钮直接打印
JavaScript实现点击按钮直接打印
发布时间:2016-12-30 来源:查字典编辑
摘要:很多网站都有此功能,当浏览到底部时都会有一个打印按钮,点击打印按钮就可以完成打印功能,功能非常不错,人性化,代码非常的简单。查字典教程网也就...

很多网站都有此功能,当浏览到底部时都会有一个打印按钮,点击打印按钮就可以完成打印功能,功能非常不错,人性化,代码非常的简单。

<a href="javascript:window.print()">查字典教程网</a>

也就是只要调用window.print()函数就可以实现打印当前页面。

但是上面的并不完美,因为有些网页上的很多内容都不需要打印,下面介绍一下如何打印页面中的指定内容。

代码如下:

<!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>这是要被打印的内容</h1> </div> <div>欢迎您</div> <input name="print" type="button" id="bt" value="点击打印" /> </body> </html>

特别说明:打印预览需要将代码复制到本机测试,否则会出错。

以上代码实现了打印网页指定内容的效果,下面简单介绍一下实现过程。

一.实现原理:

在js代码中使用document.body.innerHTML =newstr,动态原来body中的内容替换为要打印的内容,在打印过后,在将原来的内容还原,原理就是这么简单,具体可以参阅代码注释。

二.代码注释:

1.function printdiv(printpage){},声明一个控制打印的函数,参数是一个对象,这个对象中的内容将要被打印。

2.var newstr = printpage.innerHTML; ,获取要打印的内容。

3.var oldstr = document.body.innerHTML,原来body中的内容。

4. document.body.innerHTML =newstr,用将要打印的内容替换原来body中的内容。

5.window.print(),开始打印。

6.document.body.innerHTML=oldstr,再将原来body中的内容还原。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类