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 相关文章推荐
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
webpack 模块热替换原理
Apr 09 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
React优化子组件render的使用
May 12 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
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
新52大事件
2020/03/03 欧美动漫
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
php缓冲输出实例分析
2015/01/05 PHP
php如何获取文件的扩展名
2015/10/28 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
简单了解python代码优化小技巧
2019/07/08 Python
python3实现高效的端口扫描
2019/08/31 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
暑期社会实践感言
2014/02/25 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
集结号观后感
2015/06/08 职场文书