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变量作用域更轻松
Oct 25 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
在webstorm中配置less的方法详解
Sep 25 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
python+mysql实现简单的web程序
2014/09/11 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
python实现爬取图书封面
2018/07/05 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
python中web框架的自定义创建
2019/09/08 Python
python 调试冷知识(小结)
2019/11/11 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
Python socket服务常用操作代码实例
2020/06/22 Python
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
班组长岗位职责
2014/03/03 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
合作意向协议书范本
2014/03/31 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
公司口号大全
2014/06/11 职场文书
东京审判观后感
2015/06/01 职场文书
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers
Golang流模式之grpc的四种数据流
2022/04/13 Golang