使用jatoolsPrinter实现套打
最近在工作中遇到了套打的需求，前前后后，花了不少时间，现在总结一下套打的实现方式。
一、设计思路
1、将待打印的文档扫描生成图片，作为网页的背景图片。
2、通过css将待打印的文字进行定位
3、使用jatoolsPrinter插件打印已定位好的网页信息。
二、设计实现
1、下载并安装jatoolsPrinter（目前该插件只支持IE浏览器）插件，http://printfree.jatools.com/
2、计算背景图片的像素
（1）使用直尺在屏幕上，测量打印预览页面的宽度，即红色边框的宽度，在分辨率为1600*900的PC上width=220mm。
（2）使用像素尺子工具，测量打印预览页面的宽度像素widthPx，在分辨率为1600*900的PC上widthPx=790px
（3）使用直尺测量待套打文档的宽度和长度，比如A4纸的大小为210mm×297mm
（4）计算出背景图片的宽度像素=790*210/220，高度像素=790*297/220，将扫描的图片调整为该大小。
<style type="text/css">
body {
margin-top:15px;
margin-left:0px;
background-image:url('${ctxPath}/resources/assets/imgs/bg2.png');
background-repeat:no-repeat;
}
</style>2、设计打印页面
我是使用freeMarker来设计的页面
(1)如果页面中待打印元素，不需要进行逻辑处理，直接显示，可以使用绝对定位来实现。
.jp-comp-1{left: 420px; top: 130px; z-index: 101;}
.jp-comp-2{left: 220px; top: 280px; z-index: 102;}
.jp-comp-3{left: 555px; top: 280px; z-index: 103;}
.jp-comp-4{left: 220px; top: 335px; z-index: 104;}
.jp-comp-5{left: 555px; top: 335px; z-index: 105;}
.jp-comp-6{left: 220px; top: 395px; z-index: 106;}
.jp-comp-7{left: 220px; top: 455px; z-index: 107;}
.jp-comp-8{left: 220px; top: 515px; z-index: 108;}
.jp-comp-9{left: 220px; top: 570px; z-index: 109;}
.jp-comp-10{left: 555px; top: 570px; z-index: 110;}
.jp-comp-11{left: 800px; top: 300px; z-index: 111;}
.jp-comp-12{left: 850px; top: 580px; z-index: 112;}
(2)如果打印信息需要经过逻辑判断，则不能使用绝对定位，这是插件的设计缺陷，我在这里浪费了不少时间，希望后人别再走我的弯路。如下图的需求是根据后台传递的业务类型，在相应的方框内打钩。
这里，我们使用margin-left来进行定位。
[#if vo.busTypeName == "注册登记"]
<div style="float:left;margin-left:145px;">√</div>
[#else]
<div style="float:left;margin-left:145px;"></div>
[/#if]换行使用<br>标签。
（3）如下图所示，如果待套打文档是表格，我们可以使用table来进行布局。
<table align="left" width="615px" border="0px" style="line-height:21px;margin-top:-5px; margin-left:70px;text-align:center">
<tr>
<td width="263px">[#--类别--] </td>
<td width="52px">[#--判定--] </td>
<td width="245px">[#--类别--] </td>
<td width="55px">[#--判定--] </td>
</tr>
<pre name="code" class="html"> <tr>
//此处省略代码
</tr>
</table> 3.打印插件的版本问题
（1）5,4,0,0 版的插件引入代码
<object id="ojatoolsPrinter" codebase="jatoolsPrinter.cab#version=5,4,0,0" classid="clsid:B43D3361-D075-4BE2-87FE-057188254255" width="0" height="0">
<embed id="ejatoolsPrinter" type="application/x-vnd.jatoolsPrinter" width="0" height="0"></embed>
</object>
</body>
<script type="text/javascript">
var myDoc={
settings:{
topMargin:10,
bottomMargin:200,
leftMargin:20,
orientation:1
},
enableScreenOnlyClass:true,
documents:document,
copyrights:'杰创软件拥有版权 www.jatools.com'
};
var jatoolsPrinter = navigator.userAgent.indexOf('MSIE') > -1 ? document.getElementById('ojatoolsPrinter'): document.getElementById('ejatoolsPrinter');
jatoolsPrinter.print(myDoc,false);
window.close();
</script>
</html> （2）8,6,0,0版插件的引入代码（更新于2014.12.17）
<!-- 插入打印控件 -->
<OBJECT ID="jatoolsPrinter" CLASSID="CLSID:B43D3361-D075-4BE2-87FE-057188254255"
codebase="jatoolsPrinter.cab#version=8,6,0,0"></OBJECT>
</body>
<script type="text/javascript">
function doPrint() {
myDoc = {
marginIgnored:true,
enableScreenOnlyClass:true,
documents: document,
copyrights: '杰创软件拥有版权 www.jatools.com'
}
document.getElementById("jatoolsPrinter").printPreview(myDoc);
}
</script>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015年07月31日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读