可视化设计套打


运行此示例        视频演示

本功能主要用于套打模板的设计，套打模板是一种普通的html文档，只不过文档中的对象已经过设置，可以打印到票据的正确位置。得到套打模板后，你可以将套打模板改造成任何一种动态语言，比如，jsp、php、asp等。

要设计套打模板，请按以下步骤进行：

1. 用普通的网页设计软件，设计一个包含page1的div对象(表示你要打印的票据)，定好大小，再在其中放置一个扫描后的票样图片，本例中是"cases/2088869/3.jpg"等；

2. 确定打印纸张大小。加入控件及打印代码，试打这个网页到实际的票据上，改变settings里的纸张宽度、高度属性，使其与实际吻合。这一步比较麻烦，但这是必须的，只有确保纸张的大小与实际的票据一致，再来调page1里的打印项，才有意义。

3. 在page1中放置一些要打印的div对象，比如，网点编号，客户号码，并设置一个id、class、draggable属性，如下所示:

<div id='f1' draggable='true' class='my-f1' style='position:absolute' >423051702880563
</div>
这里的id要求唯一，draggable 必须为true，class 必须为"my-"+id，style 的position必须为absolute，需要指出的是，你可以加上其他class属性，和style属性，但不能包含任何left、top属性在里面，比如，以下的打印项，有的正确，有的不正确 ：
//正确
<div id='f1' draggable='true' class='warning my-f1' style='position:absolute;background-color:blue' >
423051702880563</div>  

// 不该有top属性，不正确
<div id='f1' draggable='true' class='my-f1' style='position:absolute;top:200' >423051702880563</div>

4. 在打印代码中，加入 myDoc.dragDesigner为true；如下所示：

myDoc = {
...
dragDesigner: true,
...
}

jatoolsPrinter.printPreview(myDoc);

则打印预览工具条上，会出现按钮，点击此按钮，你会看到如下拖放设计界面，请注意，一些打印项被叠放在左上角，你可以拖动到相应的位置。你也可以点击确定按钮，在预览界面上试着打印。如果位置都正常了，你可以点击查看源码按钮，得到套打模板代码。