利用jatoolsPrinter回实现web打印功能

利用jatoolsPrinter来实现web打印功能

        实现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名

  利用jatoolsPrinter回实现web打印功能

       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. 结果

  利用jatoolsPrinter回实现web打印功能

 

       简单几个步骤,web打印实现了,希望这篇说明性的博客能够让有这种需求的读者找到答案,也希望读者能够在回复中提出另外一些实现web打印的控件或者工具或者js代码,不胜感激。

 

1楼lfmilaoshi昨天 23:23
技术积累。。。米老师