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

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

<!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; 
}

时间: 2024-11-06 18:47:59

js-实现点击按钮直接打印的相关文章

JS实现点击按钮复制指定代码大全

<br><br>一.点击复制文本框内容的代码:<br><br> <script type="text/javascript"> function jsCopy(){ var e=document.getElementById("content");//对象是content e.select(); //选择对象 document.execCommand("Copy"); //执行浏览器复制

js实现点击按钮实现上一张下一张相册滚动效果

/****判断图片是否构成滚动效果*/$(function(){    if($("#bar").find('img').size()*71<=$("#bar").width()){           $("#table_img").width($("#bar").find('img').size()*71);    }    if($("#bar").find('img').size()*71&g

JS实现点击按钮,下载文件

PS:本文说的,并非如何用js创建流.创建文件.实现下载功能. 而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮.下载文件到本地.(可以是zip啦.excel啦都是一样) 有两个方法:window.open()和通过form表单来提交. 在线例子:https://hamupp.github.io/gitblog/app/jsBasic/jsButtonDownloadFile/index.html 方法一:window.open("下载文件的后端接口"); *h

js实现点击按钮弹出上传文件的窗口

转自:https://www.jb51.net/article/100916.htm 1.详细描述 在页面上设置一个"选择文件"按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

利用JS实现点击按钮后图片自动切换

我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)<选择>left center right 2.实现上述布局 swap.html <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'><html&

js实现点击按钮显示某个区域 然后点击页面中任意其他位置,隐藏该区域

$(".licat-header-list").on("click",function(e){ $(this).addClass("active");//有class名active时,其下边的ul列表显示,否则隐藏 e.stopPropagation(); $("body").one("click",function(e){ $(".licat-header-list").removeC

JS实现点击按钮,自增输入框个数

<html> <head> <script language="javascript"> var i=0; function addinput(){ i++; document.getElementById("d").innerHTML+="<input type='text' id="+i+" />"; } </script> </head> <b

JS实现点击按钮实现文字变大变小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

原生JS编写图片切换效果和点击按钮的样式变化

这两天更进一步的了解了JS,老师让我们用原生的js编写图片切换和改变点击按钮样式,就是让我们学会怎么去把一个问题拆分,怎么将一个大问题拆分成许多的小问题,再用函数封装起来.比如一个点击按钮,让其点击时背景色发生改变,点击另一个时,上一个按钮要变回原来本有的颜色:这个问题用jquery,一行代码就搞定,但是用原生js就得分三个部分来考虑: 1.添加改变背景的样式. 2.怎么获取到除了当前点击的按钮以外其他的兄弟节点. 3.怎么去除按钮的样式属性. 也讲了事件委托,实现了可以删除新添加的元素的功能.