管理员
|
1#
大 中
小 发表于 2016-11-7 11:05 只看该作者
使用jatoolsPrinter最新免费版实现套打
因为目前项目需要实现缴费凭证套打,考虑使用jatoolsPrinter的功能,但是公司不肯掏钱买付费版,只能使用免费版了。废话不说了,进入正题。
首先去官网下载免费版,http://printfree.jatools.com/
以下代码引入插件
[javascript] view plain copy
-
codebase是cab包的路径 根据自己的项目引入即可,以我的工程为例 test是我的项目名 plugin是WEB-INF下的一个文件夹,cab放在此文件夹下
以下是打印方法
[javascript] view plain copy
- function doPrint() {
- myDoc = {
- settings: {
- pageWidth: 2100,
- pageHeight: 1400,
- orientation: 2},//2代表横向打印
- documents: document,
- marginIgnored:true,
- dragDesigner: {viewSource:true},
- settingsID: 'mydoc3',
- classesReplacedWhenPrint: new Array('.only_for_print{display:block}'),
- copyrights: "杰创软件拥有版权 www.jatools.com"
//一定要加
- }
- var jatoolsPrinter = document.getElementById("jatoolsPrinter");
- jatoolsPrinter.printPreview(myDoc);
- }
其次是div部分了
[html] view plain copy
- <input
type="button"
value="打印预览"
onClick="doPrint();">
[html] view plain copy
- <div
id="page1"
class='only_for_print pagestyle'
style='width:210mm;height:140mm;position:relative;'>
- <img
class='screen-only'
src="/images/changquanchu.jpg"
style="position:absolute;width:100%;height:100%"/>
- <div
id='f1'
draggable='true'
class='f1'>项目编号div>
- <div
id='f2'
draggable='true'
class='f2'>建设单位div>
- <div
id='f3'
draggable='true'
class='f3'
>联系单编号div>
- <div
id='f4'
draggable='true'
class='f4'>项目性质div>
- <div
id='f5'
draggable='true'
class='f5'>增加面积div>
- <div
id='f6'
draggable='true'
class='f6'
>项目名称div>
- <div
id='f7'
draggable='true'
class='f7'>许可证面积div>
- <div
id='f8'
draggable='true'
class='f8'>项目地址div>
- <div
id='f9'
draggable='true'
class='f9'>许可证证号div>
- <div
id='f10'
draggable='true'
class='f10'>补缴面积div>
- <div
id='f11'
draggable='true'
class='f11'>补缴金额div>
- <div
id='f12'
draggable='true'
class='f12'>经办人div>
- <div
id='f13'
draggable='true'
class='f13'>领单人div>
- <div
id='f14'
draggable='true'
class='f14'>2016div>
- <div
id='f15'
draggable='true'
class='f15'>09div>
- <div
id='f16'
draggable='true'
class='f16'>08div>
- <div
id='f17'
draggable='true'
class='f17'>编号div>
- <div
id='f18'
draggable='true'
class='f18'>建设单位div>
- <div
id='f19'
draggable='true'
class='f19'>联系单编号div>
- <div
id='f20'
draggable='true'
class='f20'>项目性质div>
- <div
id='f21'
draggable='true'
class='f21'>增加面积div>
- <div
id='f22'
draggable='true'
class='f22'>项目名称div>
- <div
id='f23'
draggable='true'
class='f23'>许可证面积div>
- <div
id='f24'
draggable='true'
class='f24'>项目地址div>
- <div
id='f25'
draggable='true'
class='f25'>许可证证号div>
- <div
id='f26'
draggable='true'
class='f26'>联系人div>
- <div
id='f27'
draggable='true'
class='f27'>联系电话div>
- <div
id='f28'
draggable='true'
class='f28'>2016div>
- <div
id='f29'
draggable='true'
class='f29'>09div>
- <div
id='f30'
draggable='true'
class='f30'>08div>
- div>
[url=][/url]
f1-f30是我需要套打的数据,img里面是我要套打的底图,通过绝对定位将数据定位在底图上就实现套打了,简短起见我就贴部分css了,这要根据你的底图调整。
[html] view plain copy
- .f1{left:690px;top:154px}/* 项目编号 */
[html] view plain copy
- ...
- .f30{left:289px;top:198px}/* 建设单位 */
现在说几点需要注意的地方:
1:如果你需要套打的是word 你可以将你的word转成图片 然后将此图片做为底图按照上面方式实现即可。word自带的虚拟打印机可以实现,但是我试了好像一般的office都没带安装包。我用是FinePrint转换的。
2:我上面的比例是A4打印,'width:210mm;height:140mm' 如果你不是A4打印 需要根据你实际的打印大小调整。
OK 到此为止 接下来就是你们操刀实践的时候了。
原文出处:http://blog.csdn.net/zhongyy1991/article/details/52485928
|