以下是两种打印的功能实现
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>