web套打

zhangzhi199129

浏览: 161810 次
性别:
来自: 广州

最近访客更多访客>>

song0394

gathers520

ddkwubai

happywumin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

套打设计教程
jatoolsPrinter的套打功能是大家比较常用的一个功能。如何使用这个功能，大家经常会有些困惑，下面，我们深入介绍如何使用jatoolsPrinter来做套打，供大家参考。

做套打，简单一句话，就是打印的内容，比如，套打支票时的帐号，金额，要打印到正确的位置上，不能错位。

如何保证不错位？首先，你要做一个测试网页，网页中嵌入扫描得到的票据底图，将网页打印到实际票据中，通过css的width,height,padding-left,padding-top等属性，来确保打印出来的底图与实际票据大小一致，并保持重合（即上下左右四角重合）。

其次，在你的测试网页中，加入你要打印的内容，比如，帐号，金额，开户行等，并用jatoolsPrinter的拖放设计功能，将这些打印项，拖放到正确位置，并得到这些打印项的位置信息，并把这些信息嵌入到正式打印页面的<style>声明中，作为css的一部分，下面详述。

1.做一下测试网页，如下所示，保证打印底图跟原图大小相等。
代码如下
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk">


<object id="jatoolsPrinter" classid="clsid:b43d3361-d075-4be2-87fe-057188254255" codebase="jatoolsPrinter.cab#version=5,0,0,0"></object>

<title>套打位置的拖放调整</title>
<style>
.#page1 DIV {
POSITION: absolute
}
</style>

<script language="JavaScript">
function doPrint() {

myDoc = {
settings: {
paperWidth: 2100, //指定纸张的宽度单位是十分之一毫米
paperHeight: 1400, //指定纸张的高度
},

documents: document,
marginIgnored:true, //零边距打印
dragDesigner: {viewSource:true},
settingsID: 'mydoc3',
copyrights: "杰创软件拥有版权 www.jatools.com"
}

jatoolsPrinter.printPreview(myDoc);
}
</script>
</head>
<body >
<p class="title">套打位置的拖放调整
<input type="button" value="打印预览..."></p>

<div id="page1" style='width:210mm;height:140mm;position:relative'>
<img src="bk. jpg " style='width:210mm;height:140mm;'/>
</div>

</body>
</html>
本页面中的page1这个div将被打印出来，这个div内嵌一个img，其中bk.jpg是你扫描得来的根据底图。

本页面中的三个地方，即红色标出的部分，涉及到了票据的大小。所以你要测量出实际票据的大小，并填入这三个地方，注意，第一处是以1/10mm为单位。

完成以上代码以后开始打印，用测试网页中的打印按钮，将page1打印到实际票据上，观察是否大小一致。实际上，即使你在这两处填入了实际票据的正确大小，仍有可能出现很大的误差。因此，你需要几次打印后，几次调整后，才能保证两者一致。以下几种情形就是打印出来的图跟原图没有完全一致的情形：

·打印出来的底图小于实际票据。
碰到这种情况，需要调大三处的值

·打印出来的底图偏上，偏左了。
这时，你可以增加page1的padding-left,padding-top属性来控制，
<div id="page1" style='padding-left:20px,padding-top:18px;width:210mm;height:140mm;position:relative'>
<img src="bk. jpg " style='width:210mm;height:140mm;'/>
</div>
…

·打印出来的底图偏下，偏右了。
如下所示，这种情况几乎不可能出现，因为已经是零边距打印了(marginIgnored:true)。

注：
打印测试网页时，还会有一种不常见的情形，就是打印的底图和实际票据大小已经一致了，但是打印出来的图的左侧边缘没有打印出来。这个主要是因为打印机有个最小边距。这样不会影响到打印内容的，实际打印中底图是不会被打印出来。所以这个问题不需要担心。

2.增加打印内容
测试网页中底图大小跟原图一致以后就在代码中写上需要打印的内容，初始位置可以直接在css中写好，也可以任意放置，用拖放设计来完成。
在代码中加上打印内容和打印内容的CSS
.f1{left:132;top:242}
.f2{left:289;top:242}
……..
.f17{left:705;top:481}
形如：
打印内容DIV
<div id="page1" style='width:210mm;height:140mm; '>
<img class='screen-only' src="bk.png" style='width:210mm;height:140mm; '/>
<div id='f1' draggable='true' class='f1' >张飞</div>
<div id='f2' draggable='true' class='f2'>男</div>
<div id='f3' draggable='true' class='f3' >1985</div>
………
<div id='f16' draggable='true' class='f16'>06</div>
<div id='f17' draggable='true' class='f17'>25</div>
</div>

此时img 里面加上了class='screen-only' 属性目的是只在打印预览时可见。而不打印出来。

点击打印预览－－－拖放设计操作
将打印内容拖放到对应的位置上。

点击查看源码可以看到拖放完成后Div的位置信息。
点击确定，页面的style信息就被保存起来了。

完整代码如下
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk">


<object id="jatoolsPrinter" classid="clsid:b43d3361-d975-4be2-87fe-057188254255" codebase="jatoolsPrinter.cab#version=5,0,0,0"></object>

<title>套打位置的拖放调整</title>
<style>
.f1{left:132;top:242}
.f2{left:289;top:242}
.f3{left:357;top:241}
.f4{left:456;top:241}
.f5{left:535;top:243}
.f6{left:672;top:245}
.f7{left:90;top:284}
.f8{left:284;top:282}
.f9{left:521;top:481}
.f10{left:378;top:331}
.f11{left:146;top:330}
.f12{left:145;top:479}
.f13{left:232;top:415}
.f14{left:557;top:417}
.f15{left:193;top:284}
.f16{left:615;top:480}
.f17{left:705;top:481}
#page1 DIV {
POSITION: absolute
}
</style>

<script language="JavaScript">
function doPrint() {

myDoc = {
settings: {
paperWidth: 2100,
paperHeight: 1400,
enableScreenOnlyClass:true,
orientation: 1},
documents: document,
marginIgnored:true,
dragDesigner: {viewSource:true},
settingsID: 'mydoc3',

copyrights: "杰创软件拥有版权 www.jatools.com"

}

jatoolsPrinter.printPreview(myDoc);
}
</script>
</head>
<body >
<p class="title">套打位置的拖放调整
<input type="button" value="打印预览..."></p>

<div id="page1" style='width:210mm;height:140mm;position:relative; '>
<img class='screen-only' src=" bg.jpg" style='width:210mm;height:140mm; '/>
<div id='f1' draggable='true' class='f1' >张飞</div>
<div id='f2' draggable='true' class='f2'>男</div>
<div id='f3' draggable='true' class='f3' >1985</div>
<div id='f4' draggable='true' class='f4'>05</div>
<div id='f5' draggable='true' class='f5'>23</div>
<div id='f6' draggable='true' class='f6' >2003</div>
<div id='f7' draggable='true' class='f7'>09</div>
<div id='f8' draggable='true' class='f8'>07</div>
<div id='f9' draggable='true' class='f9'>2007</div>
<div id='f10' draggable='true' class='f10'>本</div>
<div id='f11' draggable='true' class='f11'>信息管理</div>
<div id='f12' draggable='true' class='f12'>1234567890123</div>
<div id='f13' draggable='true' class='f13'>杭州XXX大学</div>
<div id='f14' draggable='true' class='f14'>诸葛亮</div>
<div id='f15' draggable='true' class='f15'>2007</div>
<div id='f16' draggable='true' class='f16'>06</div>
<div id='f17' draggable='true' class='f17'>25</div>
</div>

</body>
</html>

http://bbs.jatools.com/viewthread.php?tid=373&extra=page%3D1

taoda.rar (186.5 KB)
下载次数: 12

分享到：