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

实现页面打印(JS 、JQuery)

2015-08-03 18:18 851 查看

以下是两种打印的功能实现

1)js实现打印 – window.print(); (支持全局或局部打印)

该方法是js提供的，直接打印页面上中的所有内容(即全局打印)，如果需要打印页面上的一部分内容(即局部打印)，可以用indexOf() 和 substring()实现页面的内容的截取。

Html代码

<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打印</title>
<!--将不需要打印的部分，标记为 class="noprint" -->
<style type="text/css" media="print">
.noprint{display : none }
</style>
</head>
<body>
<input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();" />
<input id="btnPrint" type="button" value="打印预览" onclick=preview(1) />
<p class="noprint">全局打印时:不需要打印的地方</p>

<p>全局打印时: 打印的部分</p>

<!--startprint1-->全局和局部都要打印: 要打印的内容..<!--endprint1-->

<!--打印的实现:全局打印 start-->
<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>
</body>
</html>

注解: 加了media=”print”，只有在打印时，下面的style才能生效

<style type="text/css" media="print">
.noprint{display : none }
</style>

2）jquery实现打印 (支持全局或局部打印)

引用jquery.PrintArea.js中的printArea()

例如： $(“div#myPrintArea”).printArea(); //打印div中的内容

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.PrintArea.js"></script>
<script>
$(document).ready(
function(){
$("input#printBtn").click(function(){
$("div#myPrintArea").printArea();
});
});
</script>
<input id="printBtn" type="button" value="打印"></input>
<div id="myPrintArea">.....文本打印部分.....</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航