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程序之undefined篇(中)
Nov 23 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
JS请求servlet功能示例
Jun 01 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
如何使用CocosCreator对象池
Apr 14 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
基于Zookeeper的使用详解
2013/05/02 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
Python实现的数据结构与算法之链表详解
2015/04/22 Python
python读写json文件的简单实现
2017/04/11 Python
python队列queue模块详解
2018/04/27 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
Python输出指定字符串的方法
2020/02/06 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
Hibernate持久层技术
2013/12/16 面试题
扬州个园导游词
2015/02/06 职场文书
教师个人成长总结
2015/02/11 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
详解Vue router路由
2021/11/20 Vue.js
从原生JavaScript到React深入理解
2022/07/23 Javascript