使用jatoolsPrinter实现套打(转帖,很详细)
[color=#362e2b][font=Arial]最近在工作中遇到了套打的需求,前前后后,花了不少时间,现在总结一下套打的实现方式。[/font][/color][color=#362e2b][font=Arial]一、设计思路[/font][/color]
[color=#362e2b][font=Arial]1、将待打印的文档扫描生成图片,作为网页的背景图片。[/font][/color]
[color=#362e2b][font=Arial]2、通过css将待打印的文字进行定位[/font][/color]
[color=#362e2b][font=Arial]3、使用jatoolsPrinter插件打印已定位好的网页信息。[/font][/color]
[color=#362e2b][font=Arial]二、设计实现[/font][/color]
[color=#362e2b][font=Arial]1、下载并安装jatoolsPrinter插件,[url=http://printfree.jatools.com/]http://printfree.jatools.com/[/url][/font][/color]
[color=#362e2b][font=Arial]2、计算背景图片的像素
[/font][/color]
[color=#362e2b][font=Arial](1)使用直尺在屏幕上,测量打印预览页面的宽度,即红色边框的宽度,在分辨率为1600*900的PC上width=220mm。[/font][/color]
[color=#362e2b][font=Arial][img]http://img.blog.csdn.net/20150731093339890?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[/img]
[/font][/color]
[color=#362e2b][font=Arial](2)使用像素尺子工具,测量打印预览页面的宽度像素widthPx,在分辨率为1600*900的PC上widthPx=790px[/font][/color]
[color=#362e2b][font=Arial](3)使用直尺测量待套打文档的宽度和长度,比如A4纸的大小为210mm×297mm[/font][/color]
[color=#362e2b][font=Arial](4)计算出背景图片的宽度像素=790*210/220,高度像素=790*297/220,将扫描的图片调整为该大小。[/font][/color]
[font=Consolas,][font=Verdana, Geneva, Arial, Helvetica, sans-serif][size=9px][b][html][/b] [url=http://blog.csdn.net/jxq0816/article/details/47165141#]view plain[/url][url=http://blog.csdn.net/jxq0816/article/details/47165141#]copy[/url]
[/size][/font]
[list=1][*][b]<[/b][b]style[/b]
type="text/css"[b]>[/b][*] body {[*] margin-top:15px;[*] margin-left:0px;[*] background-image:url('${ctxPath}/resources/assets/imgs/bg2.png');[*] background-repeat:no-repeat;[*] }[*][*][b]</[/b][b]style[/b][b]>[/b][/list][/font]
[color=#362e2b][font=Arial]2、设计打印页面[/font][/color]
[color=#362e2b][font=Arial]我是使用freeMarker来设计的页面[/font][/color]
[color=#362e2b][font=Arial](1)如果页面中待打印元素,不需要进行逻辑处理,直接显示,可以使用绝对定位来实现。[/font][/color]
[font=Consolas,][font=Verdana, Geneva, Arial, Helvetica, sans-serif][size=9px][b][html][/b] [url=http://blog.csdn.net/jxq0816/article/details/47165141#]view plain[/url][url=http://blog.csdn.net/jxq0816/article/details/47165141#]copy[/url]
[/size][/font]
[list=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;}[/list][/font]
[color=#362e2b][font=Arial][img]http://img.blog.csdn.net/20150731100919694?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[/img]
[/font][/color]
[color=#362e2b][font=Arial](2)如果打印信息需要经过逻辑判断,则不能使用绝对定位,这是插件的设计缺陷,我在这里浪费了不少时间,希望后人别再走我的弯路。如下图的需求是根据后台传递的业务类型,在相应的方框内打钩。
[/font][/color]
[color=#362e2b][font=Arial][img]http://img.blog.csdn.net/20150731101317813?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[/img][/font][/color]
[color=#362e2b][font=Arial]这里,我们使用margin-left来进行定位。[/font][/color]
[font=Consolas,][font=Verdana, Geneva, Arial, Helvetica, sans-serif][size=9px][b][html][/b] [url=http://blog.csdn.net/jxq0816/article/details/47165141#]view plain[/url][url=http://blog.csdn.net/jxq0816/article/details/47165141#]copy[/url]
[/size][/font]
[list=1][*][#if vo.busTypeName == "注册登记"][*] [b]<[/b][b]div[/b]
style="float:left;margin-left:145px;"[b]>[/b]√[b]</[/b][b]div[/b][b]>[/b][*] [#else][*] [b]<[/b][b]div[/b]
style="float:left;margin-left:145px;"[b]>[/b][b]</[/b][b]div[/b][b]>[/b][*][/#if][/list][/font]
[color=#362e2b][font=Arial]换行使用<br>标签。[/font][/color]
[color=#362e2b][font=Arial](3)如下图所示,如果待套打文档是表格,我们可以使用table来进行布局。
[/font][/color]
[color=#362e2b][font=Arial][img]http://img.blog.csdn.net/20150731103704982?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[/img]
[/font][/color]
[font=Consolas,][font=Verdana, Geneva, Arial, Helvetica, sans-serif][size=9px][b][html][/b] [url=http://blog.csdn.net/jxq0816/article/details/47165141#]view plain[/url][url=http://blog.csdn.net/jxq0816/article/details/47165141#]copy[/url]
[/size][/font]
[list=1][*][b]<[/b][b]table[/b]
align="left"
width="615px"
border="0px"
style="line-height:21px;margin-top:-5px; margin-left:70px;text-align:center"[b]>[/b][*] [b]<[/b][b]tr[/b][b]>[/b][*] [b]<[/b][b]td[/b]
width="263px"[b]>[/b][#--类别--] [b]</[/b][b]td[/b][b]>[/b][*] [b]<[/b][b]td[/b]
width="52px"[b]>[/b][#--判定--] [b]</[/b][b]td[/b][b]>[/b][*] [b]<[/b][b]td[/b]
width="245px"[b]>[/b][#--类别--] [b]</[/b][b]td[/b][b]>[/b][*] [b]<[/b][b]td[/b]
width="55px"[b]>[/b][#--判定--] [b]</[/b][b]td[/b][b]>[/b][*] [b]</[/b][b]tr[/b][b]>[/b][*] [b]<[/b][b]pre[/b]
name="code"
class="html"[b]>[/b]
[b]<[/b][b]tr[/b][b]>[/b][*] //此处省略代码[*] [b]</[/b][b]tr[/b][b]>[/b][*][*][b]</[/b][b]table[/b][b]>[/b][*][/list][/font]
[color=#362e2b][font=Arial]3.打印插件的版本问题[/font][/color]
[color=#362e2b][font=Arial](1)5,4,0,0 版的插件引入代码[/font][/color]
[font=Consolas,][font=Verdana, Geneva, Arial, Helvetica, sans-serif][size=9px][b][html][/b] [url=http://blog.csdn.net/jxq0816/article/details/47165141#]view plain[/url][url=http://blog.csdn.net/jxq0816/article/details/47165141#]copy[/url]
[/size][/font]
[list=1][*][b]<[/b][b]object[/b]
id="ojatoolsPrinter"
codebase="jatoolsPrinter.cab#version=5,4,0,0"
classid="clsid:B43D3361-D075-4BE2-87FE-057188254255"
width="0"
height="0"[b]>[/b][*] [b]<[/b][b]embed[/b]
id="ejatoolsPrinter"
type="application/x-vnd.jatoolsPrinter"
width="0"
height="0"[b]>[/b][b]</[/b][b]embed[/b][b]>[/b][*] [b]</[/b][b]object[/b][b]>[/b][*][b]</[/b][b]body[/b][b]>[/b][*][b]<[/b][b]script[/b]
type="text/javascript"[b]>[/b][*] var myDoc={[*] settings:{[*] topMargin:10,[*] bottomMargin:200,[*] leftMargin:20,[*] orientation:1[*] },[*] enableScreenOnlyClass:true,[*] documents:document,[*] copyrights:'杰创软件拥有版权 [url=http://www.jatools.com]www.jatools.com[/url]'[*] };[*] var jatoolsPrinter = navigator.userAgent.indexOf('MSIE') [b]>[/b] -1 ? document.getElementById('ojatoolsPrinter'): document.getElementById('ejatoolsPrinter');[*] jatoolsPrinter.print(myDoc,false);[*] window.close();[*][b]</[/b][b]script[/b][b]>[/b][*][b]</[/b][b]html[/b][b]>[/b][/list][/font]
[color=#362e2b][font=Arial](2)8,6,0,0版插件的引入代码(更新于2014.12.17)[/font][/color]
[font=Consolas,][font=Verdana, Geneva, Arial, Helvetica, sans-serif][size=9px][b][html][/b] [url=http://blog.csdn.net/jxq0816/article/details/47165141#]view plain[/url][url=http://blog.csdn.net/jxq0816/article/details/47165141#]copy[/url]
[/size][/font]
[list=1][*]<!-- 插入打印控件 -->[*][b]<[/b][b]OBJECT[/b]
ID="jatoolsPrinter"
CLASSID="CLSID:B43D3361-D075-4BE2-87FE-057188254255"[*] codebase="jatoolsPrinter.cab#version=8,6,0,0"[b]>[/b][b]</[/b][b]OBJECT[/b][b]>[/b][*][*][b]</[/b][b]body[/b][b]>[/b][*][*] [b]<[/b][b]script[/b]
type="text/javascript"[b]>[/b][*] function doPrint() {[*] myDoc = {[*] marginIgnored:true,[*] enableScreenOnlyClass:true,[*] documents: document,[*] copyrights: '杰创软件拥有版权 [url=http://www.jatools.com]www.jatools.com[/url]'[*] }[*] document.getElementById("jatoolsPrinter").printPreview(myDoc);[*][*] }[*][b]</[/b][b]script[/b][b]>[/b][*][*][b]</[/b][b]html[/b][b]>[/b][/list][/font] 原文:[url=http://blog.csdn.net/jxq0816/article/details/47165141]http://blog.csdn.net/jxq0816/article/details/47165141[/url]
页:
[1]