JavaScript实现点击按钮直接打印


Posted in Javascript onJanuary 06, 2016

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

<a href="javascript:window.print()">三水点靠木</a>

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

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

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://3water.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中的内容还原。

三.相关阅读:

1.window.print()函数可以参阅window对象的print()方法一章节。
2.onclick事件可以参阅javascript的onclick事件一章节。

以上内容比较简单,并有单独的代码注释帮助大家学习js实现点击按钮就打印功能,希望本文对大家有所帮助。

Javascript 相关文章推荐
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
javascript中加var和不加var的区别 你真的懂吗
Jan 06 #Javascript
JavaScript引用类型和基本类型详解
Jan 06 #Javascript
js模仿java的Map集合详解
Jan 06 #Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 #Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 #Javascript
js实现仿qq消息的弹出窗效果
Jan 06 #Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 #Javascript
You might like
DOMXML函数笔记
2006/10/09 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
基于php实现的验证码小程序
2016/12/13 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
javascript 节点排序 2
2011/01/31 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
CSS3 边框效果
2019/11/04 HTML / CSS
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
不用游标的SQL语句有哪些
2012/09/07 面试题
老师推荐信
2013/10/28 职场文书
乡镇办公室工作决心书
2014/03/11 职场文书
乳制品整治工作方案
2014/05/29 职场文书
2014年关工委工作总结
2014/11/17 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
python操作xlsx格式文件并读取
2021/06/02 Python