firefox和chrome实现页面打印自动分页
在Firefox和chrome中直接调用打印功能的js方法是
window.print();
但是如果页面很长,那么就需要分页,这时只需要在页面中添加css属性即可,如果想自动分页,则如下所示
<style type="text/css" media="print"> div { page-break-after:auto; page-break-inside:auto; page-break-before:auto; } </style>
这里的三个属性可以根据需要添加。
需要注意的是,在Firefox和chrome中,如果想实现打印可以自动分页,不要使用table来组织页面,两个浏览器对于用table组织的页面没有很好的支持自动分页,需要使用div,如果有表格,可以把表格包含在div中,也会自动分页打印。
如果没有可以添加css,例如
<style type="text/css" media="print"> table { page-break-after:auto; page-break-inside:auto; page-break-before:auto; } tr { page-break-after:auto; page-break-inside:auto; page-break-before:auto; } </style>
最后,可以把需要打印的内容单独成立一页,添加上一个打印按钮使用css控制该按钮不会被打印出来:
<style media="print"> .Noprint {display:none;} </style> <table id="printCtrl" class="Noprint"> <tbody> <tr> <td align="center"> <input id="printBtn" type="button" onclick="print()" value="打印"> <br> <hr align="center" width="90%" size="1" noshade=""> </td> </tr> </tbody> </table>
后面可以添加上需要打印的内容即可