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 相关文章推荐
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
AngularJS内置指令
Feb 04 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
Angular短信模板校验代码
Sep 23 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利用cookie实现自动登录的方法
2014/12/10 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
webpack实用小功能介绍
2018/01/02 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
英语专业个人求职信范文
2014/02/01 职场文书
面试感谢信范文
2015/01/22 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
JS实现九宫格拼图游戏
2022/06/28 Javascript