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 02 Javascript
IE 当eval遇上function的处理
Aug 09 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 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函数的常用方法及注意之处小结
2011/07/10 PHP
解析PHP的session过期设置
2013/06/29 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
网页常用特效代码整理
2006/06/23 Javascript
JS支持带x身份证号码验证函数
2008/08/10 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
vue.js todolist实现代码
2017/10/29 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
Django 自定义分页器的实现代码
2019/11/24 Python
Python assert关键字原理及实例解析
2019/12/13 Python
python序列化与数据持久化实例详解
2019/12/20 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
大学生收银员求职信分享
2014/01/02 职场文书
家长给幼儿园的表扬信
2014/01/09 职场文书
六个一活动实施方案
2014/03/21 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
初中语文教学反思范文
2016/03/03 职场文书
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技