实现WEB在线打印功能的方法很多,有些人直接用浏览器自带的打印功能实现在线打印,有些人是用js编码来实现打印功能,更加有些公司把这种功能实现作为一个产品编写给用户使用(像今天要说的jatoolsPrinter控件)····方法很多(这些区别这不赘言,可以查阅网络,会有答案),但是目的都是要完成web的打印功能。
今天这篇博客主要是在说说怎么利用jatoolsPrinter打印控件来完成web的打印功能,这个控件已经把打印功能封装的非常好,主要是把这个控件引入,之后写一些简单的js代码就能完成相应的打印功能。
具体操作步骤:
1. 首先要编写一个要打印的网页
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>打印测试</title> <OBJECT ID="jatoolsPrinter" CLASSID="CLSID:B43D3361-D975-4BE2-87FE-057188254255" codebase="jatoolsP.cab#version=1,2,0,2"></OBJECT> <!--<style type="text/css"> .printtable{border-collapse:collapse;} td {border:#000000 1px solid;} </style>--> <script type="text/javascript"> function doPrint(how) { if(typeof(jatoolsPrinter.page_div_prefix)=='undefined'){ alert("请按页顶上的黄色提示下载ActiveX控件.如果没有提示请按以下步骤设置ie.\n 工具-> internet 选项->安全->自定义级别,设置 ‘下载未签名的 ActiveX ’为'启用'状态") return ; } //打印文档对象 var myreport ={ documents: document, // 在同一页面中,有多个可打印文档,他们可以用page_div_prefix属性来区别 // page_div_prefix前缀+page+页序号 构成可打印div的id, // 如前缀为 'report1' ,则找到以 'report1page1'为id的div作为文档首页 // 该属性,默认值为空 page_div_prefix: "report" }; // 调用打印方法 if(how == '打印预览...') jatoolsPrinter.printPreview(myreport ); // 打印预览 else if(how == '打印...') jatoolsPrinter.print(myreport ,true); // 打印前弹出打印设置对话框 else jatoolsPrinter.print(myreport ,false); // 不弹出对话框打印 } </script> <body> <div class="mainarea"> <div class="maininner"> <div class="tabs_header"> 俱乐部管理系统>>报名小票测试 </div> <!-- 插入打印控件 --> <form method="post" name="prittest"> <div class="bdrcontent" id="reportpage1" > <table class="printtable"> <tr class="line"> <td colspan="5"> xxxxxx俱乐部管理系统 </td> </tr> <tr class="line"> <td colspan="3"> 消费项 </td> <td colspan="2"> 消费金额 </td> </tr> <tr class="line"> <td colspan="3"> 报名费 </td> <td colspan="2"> 200 </td> </tr> <tr class="line"> <td colspan="3"> 点餐 </td> <td colspan="2"> 150 </td> </tr> <tr class="line"> <td colspan="3"> xxx </td> <td colspan="2"> 200 </td> </tr> <tr class="line"> <td colspan="3"> xxx </td> <td colspan="2"> 150 </td> </tr> <tr class="line"> <td> 小计 </td> <td colspan="4"> 750 </td> </tr> <tr class="line"> <td> 收费时间 </td> <td colspan="4"> 2012/7/15 0:00:00 </td> </tr> <tr class="line"> <td> 会员 </td> <td colspan="4"> xxxxx </td> </tr> <tr class="line"> <td > 扣除 </td> <td colspan="3"> A积分 </td> <td colspan="2"> 700 </td> </tr> <tr class="line"> <td > </td> <td colspan="3"> B积分 </td> <td colspan="2"> 50 </td> </tr> <tr class="line"> <td > 剩余 </td> <td colspan="3"> A积分 </td> <td colspan="2"> 700 </td> </tr> <tr class="line"> <td > </td> <td colspan="3"> B积分 </td> <td colspan="2"> 50 </td> </tr> <tr class="line"> <td colspan="5"> 地址:xxxxxxxx </td> </tr> <tr class="line"> <td colspan="5"> 服务电话:xxxxxxxx </td> </tr> </table> </div> <input type="button" value="打印预览..." onClick="doPrint('打印预览...')"> <input type="button" value="打印..." onClick="doPrint('打印...')"> <input type="button" value="打印" onClick="doPrint('打印')"> </form> </style> </div> </div> </body> </head> </html>
2. 之后引入打印控件jatoolsPrinter
<OBJECT ID="jatoolsPrinter" CLASSID="CLSID:B43D3361-D975-4BE2-87FE-057188254255" codebase="jatoolsP.cab#version=1,2,0,2"></OBJECT>
3. 给要打印的div取id名
4.编写js代码实现打印div的功能
(注意:在同一页面中,有多个可打印文档,他们可以用page_div_prefix属性来区别page_div_prefix前缀+page+页序号 构成可打印div的id,如前缀为 'report1' ,则找到以 'report1page1'为id的div作为文档首页该属性,默认值为空)
<script type="text/javascript"> function doPrint(how) { if(typeof(jatoolsPrinter.page_div_prefix)=='undefined'){ alert("请按页顶上的黄色提示下载ActiveX控件.如果没有提示请按以下步骤设置ie.\n 工具-> internet 选项->安全->自定义级别,设置 ‘下载未签名的 ActiveX ’为'启用'状态") return ; } //打印文档对象 var myreport ={ documents: document, // 在同一页面中,有多个可打印文档,他们可以用page_div_prefix属性来区别 // page_div_prefix前缀+page+页序号 构成可打印div的id, // 如前缀为 'report1' ,则找到以 'report1page1'为id的div作为文档首页 // 该属性,默认值为空 page_div_prefix: "report" }; // 调用打印方法 if(how == '打印预览...') jatoolsPrinter.printPreview(myreport ); // 打印预览 else if(how == '打印...') jatoolsPrinter.print(myreport ,true); // 打印前弹出打印设置对话框 else jatoolsPrinter.print(myreport ,false); // 不弹出对话框打印 } </script>
5. 结果
简单几个步骤,web打印实现了,希望这篇说明性的博客能够让有这种需求的读者找到答案,也希望读者能够在回复中提出另外一些实现web打印的控件或者工具或者js代码,不胜感激。