最近项目要实现WEB打印功能，各种调试。
首先要实现WEB打印，这块用的window下的print方法，下面的代码实现了WEB打印和去页眉页脚的功能，打印分页需要在想要分页的元素上设置style="page-break-after:always"，我这里是在table元素上加的分页，其他元素没测
1 //打印代码 2 function Print() 3 { 4 var printStr = "<html> 5 <head> 6 <meta http-equiv='Content-Type' content='text/html; charset=utf-8'> 7 <title>title</title> 8 <link rel='stylesheet' href='xxx.css' media='print' /> //打印预览的样式设置，此注释使用时要删掉 9 <style type='text/css' media='print'> //去页眉页脚的代码，此注释使用时要删掉 10 @page 11 {size: auto;margin: 0mm;} 12 html{background-color: #FFFFFF;margin: 0px;} 13 body{ padding:0; margin: 10mm 15mm 10mm 15mm;} 14 </style> 15 </head> 16 <body>"; 17 var content = ""; 18 var str = document.getElementsByClassName('page'); 19 //var str = document.getElementById('page1').innerHTML; //获取需要打印的页面元素 ，page1元素设置样式page-break-after:always，意思是从下一行开始分割。 20 for(var i=0;i<str.length;i++){ 21 content = content + str[i].innerHTML; 22 } 23 //str = document.getElementById('page2').innerHTML; //获取需要打印的页面元素 24 //content = content + str; 25 printStr = printStr+content+"</body></html>"; 26 var pwin=window.open("Print.htm","print"); //如果是本地测试，需要先新建Print.htm，如果是在域中使用，则不需要 27 pwin.document.write(printStr); 28 pwin.document.close(); //这句很重要，没有就无法实现 29 pwin.print(); 30 }
关于隐藏页眉页脚，这块主要是进入打印预览前控制页面的页边距，CSS的@page属性是针对打印页面的样式，原文链接http://stackoverflow.com/questions/1960939/disabling-browser-print-options-headers-footers-margins-from-page，代码如下
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>Print Test</title> 4 <style type="text/css"> 5 @page 6 { 7 size: auto; /* auto is the initial value */ 8 margin: 0mm; /* this affects the margin in the printer settings 主要是这里的设置把页眉页尾去掉了（相当于把页面的边距设为0），打印边距默认是10mm里面就包含了页眉页尾的内容，在chrome下左侧更多设置-选项去掉页眉页尾的勾选同样能去掉页眉页尾不过需要多一步手动操作*/ 9 } 10 11 html 12 { 13 background-color: #FFFFFF; 14 margin: 0px; /* this affects the margin on the html before sending to printer */ 15 } 16 17 body 18 { 19 border: solid 1px blue ; 20 margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */ 21 } 22 </style> 23 </head> 24 <body> 25 <div>Top line</div> 26 <div>Line 2</div> 27 </body> 28 </html>
还需要考虑屏幕像素和纸张大小的比率，网上找了一些资料如下
显示时一般使用px,em或pt等逻辑单位,但在打印时要使用物理单位,比如cm或in(英寸)。对于常见的DPI(Dot Per Inch)为96的screen,px与cm的换算关系如下：
1 inch = 2.54 cm
1cm = 96/2.54 ≈ 37.80 px
1px = 2.54/96 ≈ 0.0265 cm
100px = 2.65 cm
A4纸的标准尺寸为:
21.0cm * 29.7 cm
在96DPI分辨率下,其对应的像素尺寸大约为:
794px * 1123px
因为不同的DPI下,其对应的像素尺寸是不同的,所以才要使用print css,使用物理单位来描述要打印的页面,这样打印效果就会一致了。
以为到这里就结束了？并没有。还有打印弹窗拦截的问题，chrome，ff，IE默认会拦截ajax内的打印弹窗，最开始的时候是用建a标签再去调click方法去调打印页面，但实际测试的问题有：
360急速在 兼容模式 、 IE11模式下会出现打印页面只启动一次的问题
360安全在兼容模式下 会出现打印页面只启动一次的问题
Firefox 会出现打印页面只启动一次的问题
在园友找到一个打印拦截的几个解决方案，http://www.cnblogs.com/catalina-/p/5846353.html
最后用如下代码解决的异步弹窗拦截问题，兼容性很好
1 var printtab=window.open(); 2 $.post(url, param, function(data){ 3 var url="xxx" 4 printtab.location= url; 5 });
不过还有一个打印权限的问题。因为要在异步请求后才能判断该用户是否有打印权限，这样就会碰到个问题当用户没权限时会给一个没权限的弹窗提示，但是这里var printtab=window.open();空白页已经建了，只能在success函数里设置一个全局变量来保存用户是否有权限再执行var printtab=window.open();和printtab.location= url; 不过调了半天还是没解决异步success内修改全局变量的问题。。这里谁知道怎么解决麻烦回复下:)
最后还是不行改回同步调用了，不过会出现一个用户体验差的提示
只能忽略了:)