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

页面打印方法

2017-07-07 15:55 295 查看

使用说明：

1、浏览器内部打印，就是打印整个页面，除了加class=”noprint”的内容

2、JS局部打印内容1，就是打印包含在startprint1和endprint1之间的内容，除了加class=”noprint”的内容

3、JS局部打印内容2，就是打印就是打印包含在startprint2和endprint2之间的内容，除了加class=”noprint”的内容

4、加class=”page-next”的div说明在此处分页

<html>

<head>
<title>javascript打印-打印页面设置-打印预览代码</title>
<meta http-equiv=content-type content="text/html; charset=utf-8" />
</head>
<!--打印时不显示类-->
<style type="text/css" media="print">
.noprint {
display: none
}

</style>
<!--打印分页时的样式类-->
<style  type="text/css">
.page-next{
page-break-after: always;
}
</style>
<body>

<input id="btnPrint" type="button" value="浏览器内部打印" onclick="javascript:window.print();" />
<input id="btnPrint" type="button" value="JS局部打印内容1" onclick=preview(1) />
<input id="btnPrint" type="button" value="JS局部打印内容2" onclick=preview(2) />
<div class="noprint">
class为noprint时：所有打印时不显示
</div>
<div>没有包含startprint和endprint，js打印将不会打印，但浏览器内部打印会打印此部分</div>

<!--startprint1-->
<hr/>
<div class="noprint">
class为noprint时：所有打印时不显示
</div>
要打印的内容：内容1 <br/>
要打印的内容：内容1 <br/>
要打印的内容：内容1 <br/>
要打印的内容：内容1 <br/>
要打印的内容：内容1 <br/>
<div class="page-next">1/2</div>
要打印的内容：内容1 <br/>
要打印的内容：内容1 <br/>
要打印的内容：内容1 <br/>

<!--endprint1-->

<!--startprint2-->
<hr/>
<div class="noprint">
class为noprint时：所有打印时不显示
</div>
要打印的内容：内容2
<!--endprint2-->

</body>

<script>
function preview(oper) {
if(oper < 100) {
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>

</html>

资源下载

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

标签： javascript 打印网页局部打印分页

相关文章推荐

新的分享

章节导航