一个不错的WEB打印解决方案!

前段时间做项目时，因为需要用到WEB打印，原来是想用水晶报表的，但由于生成的数据比较麻烦(由多张表并且经过多次计算才生成)，因此就想上网找一下有没更好更方便的办法。其实最好的办法就是可以直接打印当前页面需要的内容，这样就不用再去考虑数据源的问题了，所有操作都在客户端实现。

网上的方法一般都是使用样式控制页面所需打印部分，于都在同一页面内控制，所以这样打出来的效果也不好看，而且也不便于控制，于是我就想到将需要打印的内容直接传到另一个页面，然后再在那个页面里进行打印操作，因为是一个新的页面，所以可以很方便去控制需要的样式，只要将所有打印的连接都用此页面进行操作就可以了，这样打出来的效果就可以完全与页面内容一样（包括样式），当然，前提是必须在IE高级设置里将“打印背景图像”一选项打开，否则只能打印前景色。

此方法最终也是调用WebBrowser控件进行的，所以还必须要求客户端IE打开“对没有标记为安全的ActiveX控件进行初始化和脚本运行”的选项，这是使用此方法的唯一一个缺点！

具体实现：

1、此方法实现其实也非常简单，主要是要先定义好要打印的区域，可以使用一个DIV包含起来，如下：

  <!--  设置打印区域，ID为Content1  -->
        < div  id ="Content1" >
             < table  width ="647"  height ="74"  border ="0"  cellpadding ="1"  bgcolor ="#000000" >
               < tr >
                 < td  height ="18"  bgcolor ="#0099FF" >< div  align ="center" >< span  class ="STYLE1" > 编号 </ span ></ div ></ td >
                 < td  bgcolor ="#0099FF" >< div  align ="center" >< span  class ="STYLE1" > 姓名 </ span ></ div ></ td >
                 < td  bgcolor ="#0099FF" >< div  align ="center" >< span  class ="STYLE1" > 年龄 </ span ></ div ></ td >
               </ tr >
               < tr >
                 < td  height ="22"  bgcolor ="#FFFFFF" >< div  align ="center" > 1 </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > ssd </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > 23 </ div ></ td >
               </ tr >
               < tr >
                 < td  height ="22"  bgcolor ="#FFFFFF" >< div  align ="center" > 1 </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > ssd </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > 23 </ div ></ td >
               </ tr >   < tr >
                 < td  height ="22"  bgcolor ="#FFFFFF" >< div  align ="center" > 1 </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > ssd </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > 23 </ div ></ td >
               </ tr >   < tr >
                 < td  height ="22"  bgcolor ="#FFFFFF" >< div  align ="center" > 1 </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > ssd </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > 23 </ div ></ td >
               </ tr >   < tr >
                 < td  height ="22"  bgcolor ="#FFFFFF" >< div  align ="center" > 1 </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > ssd </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > 23 </ div ></ td >
               </ tr >   < tr >
                 < td  height ="22"  bgcolor ="#FFFFFF" >< div  align ="center" > 1 </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > ssd </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > 23 </ div ></ td >
               </ tr >   < tr >
                 < td  height ="22"  bgcolor ="#FFFFFF" >< div  align ="center" > 1 </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > ssd </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > 23 </ div ></ td >
               </ tr >   < tr >
                 < td  height ="22"  bgcolor ="#FFFFFF" >< div  align ="center" > 1 </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > ssd </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > 23 </ div ></ td >
               </ tr >   < tr >
                 < td  height ="22"  bgcolor ="#FFFFFF" >< div  align ="center" > 1 </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > ssd </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > 23 </ div ></ td >
               </ tr >   < tr >
                 < td  height ="22"  bgcolor ="#FFFFFF" >< div  align ="center" > 1 </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > ssd </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > 23 </ div ></ td >
               </ tr >   < tr >
                 < td  height ="22"  bgcolor ="#FFFFFF" >< div  align ="center" > 1 </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > ssd </ div ></ td >
                 < td  bgcolor ="#FFFFFF" >< div  align ="center" > 23 </ div ></ td >
               </ tr >
             </ table >
           </ div >

2、增加一个打印按钮：

  < input  type ="button"  value =" 打 印 "  onclick ="OpenPrint();"  id ="Printf"   />

3、增加JS方法：（其实就打开另一个新的打印页面）

< script >
// 打印方法，直接开另一新页面然后将当前页面打印区传过去
   function  OpenPrint()
     {
        window.open('Print.htm','print', 'toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
    }
</ script >

4、在新建一个Print.htm页面，获取父页面的内容，并且打印出来

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title ></ title >
</ head >
<!--  要保留打印区域的样式，此页面的样式必需与父页面的一样  -->
< style  type ="text/css" >
<!--
.STYLE1 {}{color: #FFFFFF}
body,td,th {}{
    font-size: 12px;
}
.STYLE4 {}{color: #CC0000; font-weight: bold; }

-->
     </ style >
< script >
//初始化页面大小
window.resizeTo(window.screen.availWidth,window.screen.availHeight);
window.moveTo(0,0);
</ script >
< body  style ="background-color:White; background-image:url(nono.jpg); " >
    
     <!-- 注册打印控件 -->
     < object  id ="WebBrowser"  classid ="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"  height ="0"  width ="0" ></ object >
    
     <!-- 设置打印标题 -->
     < div  id ="title"  class ="STYLE4" >
     </ div >
     < br  />
    
     <!-- 设置打印的内容 -->
     < div  id ="print" >
     </ div >

     < script >
 
//从父页面获取内容
 var father = window.opener;
 if(father != null)
 {
    pagesetup_null();
    //获取父页面的标题
    document.getElementById('title').innerHTML =  father.title.innerHTML;
    //获取父页面需要打印的内容
    document.getElementById('print').innerHTML =  father.Content1.innerHTML;  
    print();
  }
 
  function print()
  {
    document.all.WebBrowser.ExecWB(7,1);
    window.close();
  }

     </ script >

</ body >
</ html >

完成！