jquery局部打印功能:js或jquery控制网页打印指定区域

发布时间:2019-11-11编辑:脚本学堂
如何只打印网页局部区域,这里分享几个js与jquery控制网页打印指定区域的方法,有关js实现局部打印与jquery实现支持局部打印的例子,供大家学习参考。

一、jquery控制网页打印指定区域

使用jquery控制网页打印指定的区域,可以指定一个div区域的id即可实现打印网页的部分内容。

例子:
 

复制代码 代码示例:
<html>
<head>
<title>jquery 打印指定区域内容  www.jb200.com</title>
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function printHtml(html) {
var bodyHtml = document.body.innerHTML;
document.body.innerHTML = html;
window.print();
document.body.innerHTML = bodyHtml;
}
function onprint() {
var html = $("#printArea").html();
printHtml(html);
}
</script>
</head>
<body>
<div>
<div id="printArea"
style="width: 500px; text-align: left;">
打印区域~~~~
</div>
<br />
<div>
<input type="button" id="btnPrint"
onclick="onprint()" value="print" />
</div>
</div>
</body>
</html>

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

js或jquery控制页面打印区域:页面打印(局部打印)

1、js实现局部打印
 

复制代码 代码示例:

<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、调用windows底层打印,报安全警告,不建议使用(不支持局部打印)
 

复制代码 代码示例:

<HTML>
<HEAD>
<TITLE>javascript打印-打印页面设置-打印预览代码</TITLE>
<meta http-equiv=content-type content="text/html; charset=gb2312" />
<script language=javascript>
function printsetup(){
// 打印页面设置
wb.execwb(8,1);
}
function printpreview(){
// 打印页面预览
 
wb.execwb(7,1);  
 
}

function printit()
{
if (confirm('确定打印吗?')) {
wb.execwb(6,6);
}
}
</script>
</head>
<body>

<div align=center>
<object id=wb height=0 width=0
classid=clsid:8856f961-340a-11d0-a96b-00c04fd705a2 name=wb></object>
<input onclick=javascript:printit() type=button value=打印 name=button_print />
<input onclick=javascript:printsetup(); type=button value=打印页面设置 name=button_setup />
<input onclick=javascript:printpreview(); type=button value=打印预览 name=button_show />
一按开始的减肥了卡时间段
</DIV>
</BODY>
</HTML>

3、jquery实现支持局部打印

复制代码 代码示例:
<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>