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 面向对象的之私有成员和公开成员
May 04 Javascript
javascript开发中因空格引发的错误
Nov 08 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
JavaScript中的高级函数
Jan 04 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
js实现拾色器插件(ColorPicker)
May 21 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
PHP开发中常用的十个代码样例
2016/02/02 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
python 文件查找及内容匹配方法
2018/10/25 Python
python获取地震信息 微信实时推送
2019/06/18 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
英国电器零售商:PRC Direct
2018/06/21 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
教师找工作推荐信
2013/11/23 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
发布会邀请函
2015/01/31 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
红色革命电影观后感
2015/06/18 职场文书
pandas中对文本类型数据的处理小结
2021/11/01 Python
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js