|
管理员
 
|
1#
大 中
小 发表于 2015-8-4 10:10 只看该作者
使用jatoolsPrinter实现套打(转帖,很详细)
最近在工作中遇到了套打的需求，前前后后，花了不少时间，现在总结一下套打的实现方式。
一、设计思路
1、将待打印的文档扫描生成图片，作为网页的背景图片。
2、通过css将待打印的文字进行定位
3、使用jatoolsPrinter插件打印已定位好的网页信息。
二、设计实现
1、下载并安装jatoolsPrinter插件，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，将扫描的图片调整为该大小。
[html] view plaincopy
- <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)如果页面中待打印元素，不需要进行逻辑处理，直接显示，可以使用绝对定位来实现。
[html] view plaincopy
- .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来进行定位。
[html] view plaincopy
- [#if vo.busTypeName == "注册登记"]
- <div
style="float:left;margin-left:145px;">√div>
- [#else]
- <div
style="float:left;margin-left:145px;">div>
- [/#if]
换行使用
标签。
（3）如下图所示，如果待套打文档是表格，我们可以使用table来进行布局。
[html] view plaincopy
- <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 版的插件引入代码
[html] view plaincopy
- <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）
[html] view plaincopy
- <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>
|
