实现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代码,不胜感激。