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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
layui原生表单验证的实例
Sep 09 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 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中namespace及use用法分析
2016/12/06 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
python计算文本文件行数的方法
2015/07/06 Python
Java分治归并排序算法实例详解
2017/12/12 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
python将图片转base64,实现前端显示
2020/01/09 Python
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
暑期实习鉴定
2013/12/16 职场文书
班主任工作年限证明
2014/01/12 职场文书
骨干教师培训制度
2014/01/13 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
学习礼仪心得体会
2014/09/01 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
Python打包exe时各种异常处理方案总结
2021/05/18 Python
OpenCV 图像梯度的实现方法
2021/07/25 Python
Python中如何处理常见报错
2022/01/18 Python