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 跨域访问解决方案
Feb 14 Javascript
javascript面向对象编程代码
Dec 19 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
原生js编写2048小游戏
Mar 17 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 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 socke 向指定页面提交数据
2008/07/23 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
PHP fclose函数用法总结
2019/02/15 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
Python中itertools模块用法详解
2014/09/25 Python
详解Python中的元组与逻辑运算符
2015/10/13 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
pip命令无法使用的解决方法
2018/06/12 Python
python高阶爬虫实战分析
2018/07/29 Python
python write无法写入文件的解决方法
2019/01/23 Python
Python常用特殊方法实例总结
2019/03/22 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
Django celery异步任务实现代码示例
2020/11/26 Python
python中的时区问题
2021/01/14 Python
班干部演讲稿
2014/04/24 职场文书
委托书格式
2014/08/01 职场文书
庆元旦演讲稿
2014/09/15 职场文书
反四风对照检查材料
2014/09/22 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js