最近做一个简单的打印功能,要使用JavaScript调用浏览器的打印功能。并设置打印为横向打印:
为了适应A4纸的宽和高这里设置:
body{margin:0 auto;
width: 1010px;
height: 369px;
}
为了在页面做一个打印的按钮,但是在真实打印的时候该按钮又不能显示在打印页面上,这里我加了两个标识性的注释
<!--begin--><!--end-->
并写了一个打印的方法,在调用该方法是截取掉打印中不需要显示的内容,只包括标识性标签中的内容:
<script type="text/javascript">
function printit(){
if (confirm('确定打印吗?')){
try{
print.portrait = false ;//横向打印
}catch(e){
//alert("不支持此方法");
}
var bdhtml=window.document.body.innerHTML;//获取当前页的html代码
var sprnstr="<!--begin-->";//设置打印开始区域
var eprnstr="<!--end-->";//设置打印结束区域
var prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)); //从开始代码向后取html
var prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML=bdhtml;
}
}
</script>
实例展示:
<style type="text/css">
body{margin:0 auto;
width: 1010px;
height: 369px;
}
</style>
<head>
<title>打印标题</title>
<script type="text/javascript">
function printit(){
if (confirm('确定打印吗?')){
try{
print.portrait = false ;//横向打印
}catch(e){
//alert("不支持此方法");
}
var bdhtml=window.document.body.innerHTML;//获取当前页的html代码
var sprnstr="<!--begin-->";//设置打印开始区域
var eprnstr="<!--end-->";//设置打印结束区域
var prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)); //从开始代码向后取html
var prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML=bdhtml;
}
}
</script>
<style type="text/css">
.ipt{
cursor: pointer;
}
</style>
</head>
<body>
<OBJECT id="WebBrowser" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height=0 id=wb name=wb width=3></OBJECT>
<div id="kpr" style="margin:30px">
<input class="ipt" type="button" value="打印" onclick ="javascript:printit();">
<input class="ipt" type="button" value="关闭" onclick ="javascript:window.close();">
</div>
<!--begin-->
<h3>打印标题</h3>
<table>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容2</td>
<td>内容2</td>
<td>内容2</td>
<td>内容2</td>
<td>内容2</td>
<td>内容2</td>
<td>内容2</td>
<td>内容2</td>
</tr>
</table>
<!--end-->
</body>
预览:
打印效果,点击打印按钮–>确定: