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 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
jQuery 遍历json数组的实现代码
Sep 22 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
解析vue中的$mount
Dec 21 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
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
模仿OSO的论坛(一)
2006/10/09 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
python中的一些类型转换函数小结
2013/02/10 Python
python发送伪造的arp请求
2014/01/09 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
Python3.8中使用f-strings调试
2019/05/22 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
python MD5加密的示例
2020/10/19 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
护理自荐信范文
2013/10/05 职场文书
敬老院活动总结
2014/04/28 职场文书
学生干部培训方案
2014/06/12 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
结婚老公保证书
2015/02/26 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
红色影片观后感
2015/06/18 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android