window.print 页面打印

xiaoxiao2021-02-28 189

定义和用法

print() 方法用于打印当前窗口的内容。

语法

window.print(); window.print() 实际上，是浏览器打印功能菜单的一种程序调用。与点击打印功能菜单一样，不能精确分页，不能设置纸型，套打的问题更加无从谈起，只不过，可以让用户不用去点菜单，直接点击网页中的一个按钮，或一个链接里面调用罢了。事实上，很多用户都是采用这种方式打印，但是这种方式最致命的缺点是不能设置打印参数，比如纸型，页边距，选择打印机等等。方法一：需要指出的是这种方法提供一个打印前和打印后的事件onbeforeprint、onafterprint。可以在打印前的时候重新编辑一些格式，专门送去打印，打印后又处理回来。 function window.onbeforeprint(){ //将一些不需要打印的隐藏 } function window.onafterprint(){ //放开隐藏的元素 }

通过这两个方法，就可以实现页面的部分打印。上述方法只有火狐和ie支持。

方法二：

调用window.print()时，可以利用css来控制页面中的东西是否显示

方法三：

点打印按钮弹出新窗口，把需要打印的内容显示到新窗口中，在新窗口中调用window.print()方法，然后自动关闭新窗口。如果要打印的页面排版和原web页面相差很大，采用此种方法。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>打印测完</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> #oDiv2 div{width: 100px;height: 100px;border:1px solid #c50000;} </style> </head> <body> <div>aaa</div> <div id='oDiv2'><div>bbb</div></div> <div>ccc</div> <input type="button" value="打印" id="js_print" /> <script> var oPrintBtn = document.getElementById("js_print"); var oDiv2 = document.getElementById("oDiv2"); oPrintBtn.οnclick=function(){ var oPop = window.open('','oPop'); var str = '<!DOCTYPE html>' str +='<html>' str +='<head>' str +='<meta charset="utf-8">' str +='<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">' str+='<style>'; str+='#oDiv2 div{width: 100px;height: 100px;border:1px solid #c50000;}'; str+='</style>'; str +='</head>' str +='<body>' str +="<div id='oDiv2'><div>bbb</div></div>"; str +='</body>' str +='</html>' oPop.document.write(str); oPop.print(); oPop.close(); } </script> </body> </html> 综上还是第三种最靠谱 layer弹出的时候 function(index, layero){ var body = layer.getChildFrame('body', index); var oPop = window.open('','oPop'); oPop.document.write(body.html()); oPop.print(); oPop.close(); return false; }

转载请注明原文地址: https://www.6miu.com/read-45397.html

技术

最新回复(0)