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 相关文章推荐
return false;和e.preventDefault();的区别
Jul 11 Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 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 dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
js DOM模型操作
2009/12/28 Javascript
jQuery源码分析之Event事件分析
2010/06/07 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
python简单读取大文件的方法
2016/07/01 Python
Python实现简易端口扫描器代码实例
2017/03/15 Python
Django实现自定义404,500页面教程
2017/03/26 Python
python中模块查找的原理与方法详解
2017/08/11 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
通过python3实现投票功能代码实例
2019/09/26 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
python实现AdaBoost算法的示例
2020/10/03 Python
巴西网上药房:onofre
2016/11/21 全球购物
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
2014年体育部工作总结
2014/11/13 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫