很多网站都有此功能,当浏览到底部时都会有一个打印按钮,点击打印按钮就可以完成打印功能,功能非常不错,人性化,下面通过本文给大家介绍 JavaScript 实现点击按钮就打印的代码,需要的朋友参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
很多网站都有此功能,当浏览到底部时都会有一个打印按钮,点击打印按钮就可以完成打印功能,功能非常不错,人性化,代码非常的简单。
- <a href="javascript:window.print()">
- phperz
- </a>
也就是只要调用 window.print() 函数就可以实现打印当前页面。
但是上面的并不完美,因为有些网页上的很多内容都不需要打印,下面介绍一下如何打印页面中的指定内容。
代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset=" utf-8">
- <meta name="author" content="http://www.phperz.com/" />
- <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>
特别说明: 打印预览需要将代码复制到本机测试,否则会出错。
以上代码实现了打印网页指定内容的效果,下面简单介绍一下实现过程。
一. 实现原理:
在 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 中的内容还原。
来源: http://www.phperz.com/article/17/0217/267708.html