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触发器详解
Mar 10 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 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
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
php的hash算法介绍
2014/02/13 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
Python3多线程操作简单示例
2018/05/22 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
wxPython实现画图板
2020/08/27 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
邀请函的格式
2015/01/30 职场文书
留学推荐信英文范文
2015/03/26 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
化工生产实习心得体会
2016/01/22 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
Python道路车道线检测的实现
2021/06/27 Python
MYSQL 表的全面总结
2021/11/11 MySQL
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技