一个不错的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>

完成！