您的位置：首页 > Web前端 > JQuery

js或jquery实现页面打印可局部打印

2017-01-12 08:55 796 查看
js或jquery实现页面打印(局部打印) 

1、js实现（可实现局部打印） 

代码如下:

[html] view
plain copy

 print?

<html>  

<title>js打印</title>  

<head></head><body>  

<input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" />  

  

<input id="btnPrint" type="button" value="打印预览" onclick=preview(1) />  

<style type="text/css" media=print>  

.noprint{display : none }  

</style>  

  

  

<p class="noprint">不需要打印的地方</p>  

  

<script>  

function preview(oper)  

{  

if (oper < 10)  

{  

bdhtml=window.document.body.innerHTML;//获取当前页的html代码  

sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域  

eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域  

prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html  

  

prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html  

window.document.body.innerHTML=prnhtml;  

window.print();  

window.document.body.innerHTML=bdhtml;  

} else {  

window.print();  

}  

}  

</script>  

<p>XXXXX</p>  

<!--startprint1-->要打印的内容<!--endprint1-->  

</body>  

</html> 
 

2、jQuery实现（支持局部打印） 

代码如下:

[html] view
plain copy

 print?

<html>  

<head>  

<script type="text/javascript" src="jquery-1.6.4.js"></script>  

<script>  

$(function(){  

$("input#biuuu_button").click(function(){  

$("div#myPrintArea").printArea();  

});  

</script>  

</head>  

<body>  

<input id="biuuu_button" type="button" value="打印"></input>  

<div id="myPrintArea">.....文本打印部分.....</div> <div class="quote_title">引用</div><div class="quote_div"></div>  

</body>  

</html>  
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航