标题: 使用jatoolsPrinter实现套打(转帖,很详细) [打印本页]

---

作者: admin    时间: 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>

---

作者: admin    时间: 2015-8-4 10:12

原文：http://blog.csdn.net/jxq0816/article/details/47165141

---

欢迎光临 杰表技术论坛 (http://jatools.com/)

Powered by Discuz! 6.1.0