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从头学起第一讲
Jul 04 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
Jquery-data的三种用法
Apr 18 jQuery
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
小程序实现多选框功能
Oct 30 Javascript
Node 代理访问的实现
Sep 19 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
Vue开发环境跨域访问问题
Jan 22 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 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验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP使用mysqldump命令导出数据库
2015/04/14 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
常用的javascript设计模式
2017/01/11 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
对于Python的框架中一些会话程序的管理
2015/04/20 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
python感知机实现代码
2019/01/18 Python
python SVM 线性分类模型的实现
2019/07/19 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
python 写一个性能测试工具(一)
2020/10/24 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
C#可否对内存进行直接的操作
2015/02/26 面试题
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
大学四年规划书范文
2013/12/27 职场文书
教师一帮一活动总结
2014/07/08 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技
Linux中文件的基本属性介绍
2022/06/01 Servers