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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
JavaScript 仿关机效果的图片层
Dec 26 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 Javascript
jQuery实现简单弹幕制作
Dec 10 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
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
jquery动态改变div宽度和高度
2015/02/09 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
python提取页面内url列表的方法
2015/05/25 Python
Python引用模块和查找模块路径
2016/03/17 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
管理心得体会
2013/12/28 职场文书
小学毕业感言300字
2014/02/19 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
离职信范本
2015/06/23 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL