一、普通打印（整页打）
调用原生javascript方法——window.print()
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>整页打印</title> 6 <script> 7 function printpage(){ 8 window.print(); //调用此方法，打印整个页面 9 } 10 </script> 11 </head> 12 <body> 13 14 <input type="button" value="打印此页面" onclick="printpage()" /> 15 16 </body> 17 </html>
二、局部打印
jQuery插件jquery.PrintArea.js可实现打印页面某区域功能
下载地址：http://plugins.jquery.com/PrintArea/
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>利用 jquery.PrintArea.js 插件实现局部打印</title> 6 <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 7 <script type="text/javascript" src="jquery.PrintArea.js"></script> 8 <script> 9 $(function(){ 10 $("#print").click(function(){ 11 $(".my_show").printArea(); // 调用此方法实现局部打印 12 }); 13 }); 14 </script> 15 </head> 16 <body> 17 <div class="my_show"> 18 这个是打印时显示的。。。 19 </div> 20 <div class="my_hidden"> 21 这个是打印时隐藏的。。。 22 </div> 23 <input type="button" id="print"/> 24 </body> 25 </html>
三、分页打印
page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。
1.page-break-after 属性设置元素后的 page-breaking 行为。
——auto 默认。如果必要则在元素后插入分页符。
——always 在元素后插入分页符。
——avoid 避免在元素后插入分页符。
——left 在元素之后足够的分页符，一直到一张空白的左页为止。
——right 在元素之后足够的分页符，一直到一张空白的右页为止。
——inherit 规定应该从父元素继承 page-break-after 属性的设置。
2.page-break-before 属性设置元素前的 page-breaking 行为。
——auto 默认。如果必要则在元素前插入分页符。
——always 在元素前插入分页符。
——avoid 避免在元素前插入分页符。
——left 在元素之前足够的分页符，一直到一张空白的左页为止。
——right 在元素之前足够的分页符，一直到一张空白的右页为止。
——inherit 规定应该从父元素继承 page-break-after 属性的设置。