码迷,mamicode.com
首页 > Web开发 > 详细

js-实现点击按钮直接打印

时间:2017-09-15 13:42:27      阅读:400      评论:0      收藏:0      [点我收藏+]

标签:func   nbsp   window   javascrip   text   按钮   location   ext   执行   

很多网站都有此功能 ,点击按钮 直接打印;最近做项目有个这样的需求, 所以就研究了一下,具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>指定被打印的内容</title>
<script language="javascript">
function print_fn(printname)
{
var newshtml = printname.innerHTML;
var oldshtml = document.body.innerHTML;
document.body.innerHTML =newshtml;
window.print();
document.body.innerHTML=oldshtml;
return false;
}
window.onload=function()
{
var button=document.getElementById("button");
var print=document.getElementById("print");
button.onclick=function()
{
print_fn(print);
}
}
</script>
</head>
<body>
<div id="print">
<h1>这是要被打印的内容</h1>
</div>
<div>欢迎您</div>
<input name="print" type="button" id="button" value="打印" />
</body>
</html>

加入上面的代码可以实现启动打印功能,但是有一个问题,只能执行一次打印 ,打印按钮失效 ,不仅打印按钮 若网页中还有其它按钮,所以按钮失效。

想要解决这个问题其实也很简单   window.print()之后,用location.reload()重新加载一下页面就好了,代码如下:

function print_fn(printname) 

var newshtml = printname.innerHTML; 
var oldshtml = document.body.innerHTML; 
document.body.innerHTML =newshtml; 
window.print(); 
document.body.innerHTML=oldshtml; 

location.reload();
return false; 

 

js-实现点击按钮直接打印

标签:func   nbsp   window   javascrip   text   按钮   location   ext   执行   

原文地址:http://www.cnblogs.com/lliuhh/p/7525663.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!