知识点:用CSS控制分页
在调用window.print()时,可以实现打印效果,但内容太多时要进行分页打印。
在样式中有规定几个打印的样式
page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示,这两个属性是用来控制文件的打印方式。
每个打印属性都可以设定4种设定值:auto、always、left和right。其中Auto是默认值,示例中使用的是always。
page-break-before若设定成always,则是在遇到特定的组件时,打印机会重新开始一个新的打印页。
page-break-after属性会将分页符号加在指定组件后,而非之前。
html代码:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>分页测试</title> <style type="text/css"> @page{margin:0;}/*此行表示不打印页眉页脚,也不打印页码*/ .A4{page-break-before: always;}/*遇到这个样式则打印分页,不影响网页显示*/ </style> <script language="javascript" src="test.js"></script> </head> <body> <input type="button" value="打印" onclick="myPrint()" style="float:right;"></input> <!--startprint--> <!--从这里开始打印--> <div>第一页</div> <!--第一页不用设置分页符--> <div class="A4">第二页</div> <!--需要分页的地方引入CSS样式--> <!--endprint--> <!--到这里结束打印--> </body> </html>
JS代码:
function myPrint(str) { bdhtml=window.document.body.innerHTML;//获取当前页的html代码 var sprnstr="<!--startprint-->" var eprnstr="<!--endprint-->" prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+17); //从开始代码向后取html prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html window.document.body.innerHTML=prnhtml; window.print(); window.document.body.innerHTML=bdhtml; }