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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
leaflet的开发入门教程
Nov 17 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
vue vant中picker组件的使用
Nov 03 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类分享
2014/02/07 PHP
destoon各类调用汇总
2014/06/20 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
Python写的一个简单监控系统
2015/06/19 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
思想政治自我鉴定
2013/10/06 职场文书
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
见习报告格式要求
2014/11/04 职场文书
离职感谢信怎么写
2015/01/22 职场文书
人事任命通知书
2015/04/21 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python