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 相关文章推荐
jquery.validate分组验证代码
Mar 17 Javascript
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
浅析Jquery操作select
2016/12/13 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
利用python获得时间的实例说明
2013/03/25 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
python简单实现操作Mysql数据库
2018/01/29 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
Python之字典对象的几种创建方法
2020/09/30 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
文明教师事迹材料
2014/01/16 职场文书
工程管理专业毕业生自荐信
2014/01/24 职场文书
美术教师岗位职责
2014/03/18 职场文书
加入学生会演讲稿
2014/04/24 职场文书
机关保密工作承诺书
2015/05/04 职场文书
芙蓉镇观后感
2015/06/10 职场文书
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python