Web打印解决方案之证件套打的实现思路


Posted in Javascript onAugust 29, 2016

在前面介绍过《Web打印解决方案之普通报表打印功能》的一片文章中提到过那个打印控件Lodop,做起套打来感觉还是挺方便的,至少位置调整界面不需要自己弄,位置嘛,也提供了自动保存的功能,不需要理会。

一般的套打,包含了几部分操作:打印预览、打印维护、打印设计。

打印预览和打印维护是面向终端用户的,打印维护是指内容不能修改删除、但位置可以调整,给不同的打印机不同的尺寸打印提供调整位置的可能性。

打印设计是面向开发人员的,开始需要通过这个功能来设计好套打的界面,就是根据套打证件的背景图片,大致摆放好各个内容的位置。

大致的实现代码如下所示:

<script language="javascript">
var LODOP=document.getElementById("LODOP");//这行语句是为了符合DTD规范
CheckLodop();
</script>
<script language="javascript" type="text/javascript"> 
function Preview2() { 
CreateDataBill();
LODOP.PREVIEW(); 
}; 
function Setup2() { 
CreateDataBill();
LODOP.PRINT_SETUP(); 
};
function Design2() { 
CreateDataBill();
LODOP.PRINT_DESIGN();
}; 
function RealPrint() { 
CreateDataBill();
if (LODOP.PRINTA()) 
alert("已发出实际打印命令!"); 
else 
alert("放弃打印!"); 
}; 
function CreateDataBill() {
LODOP.SET_PRINT_PAPER(10,10,762,533,"打印控件功能演示_Lodop功能_移动公司发票套打");
LODOP.ADD_PRINT_TEXT(126,150,100,20,"郭德刚");
LODOP.SET_PRINT_STYLEA(1,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(151,150,100,20,"13954885177");
LODOP.SET_PRINT_STYLEA(2,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(125,584,99,20,"发票打印(第1次)");
LODOP.SET_PRINT_STYLEA(3,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(465,140,198,20,"陆百柒拾捌元叁角零分");
LODOP.SET_PRINT_STYLEA(4,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(465,599,70,20,"678.30");
LODOP.SET_PRINT_STYLEA(5,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(496,408,59,20,"H112063");
LODOP.SET_PRINT_STYLEA(6,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(191,58,100,20,"国内漫游通话");
LODOP.SET_PRINT_STYLEA(7,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(191,217,100,20,"584.00");
LODOP.SET_PRINT_STYLEA(8,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(222,58,100,20,"增值业务费");
LODOP.SET_PRINT_STYLEA(9,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(222,217,100,20,"48.30");
LODOP.SET_PRINT_STYLEA(10,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(251,58,100,20,"代收费");
LODOP.SET_PRINT_STYLEA(11,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(251,217,100,20,"50.00");
LODOP.SET_PRINT_STYLEA(12,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(280,58,100,20,"优惠费");
LODOP.SET_PRINT_STYLEA(13,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(280,217,100,20,"4.00");
LODOP.SET_PRINT_STYLEA(14,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(98,101,150,20,"101081005747319387");
LODOP.SET_PRINT_STYLEA(15,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(97,307,150,20,"2008年10月19日 10:28:38");
LODOP.SET_PRINT_STYLEA(16,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(152,584,103,20,"138860016786");
LODOP.SET_PRINT_STYLEA(17,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(95,571,112,20,"06775516");
LODOP.SET_PRINT_STYLEA(18,"FontName","System");
LODOP.SET_PRINT_STYLEA(18,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(496,135,183,20,"2008年09月(20080901-20080930)");
LODOP.SET_PRINT_STYLEA(19,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(496,572,112,20,"-王府井中心店营");
LODOP.SET_PRINT_STYLEA(20,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(311,217,100,20,"678.30");
LODOP.SET_PRINT_STYLEA(21,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(311,58,100,20,"费用合计");
LODOP.SET_PRINT_STYLEA(22,"FontColor",16711680);
LODOP.ADD_PRINT_SETUP_BKIMG("<img src=Report/证件背景.jpg' />");
LODOP.SET_SHOW_MODE ("BKIMG_IN_PREVIEW",1);
}
</script>

其中大部分内容还是比较好理解的,不同的功能调用不同的函数Preview为预览、Setup为维护、Design为设计。

在套打的时候,注意需要通过下面代码来设置显示背景图片(打印的时候,是不打印背景的)。

LODOP.ADD_PRINT_SETUP_BKIMG("<img src=Report/证件背景.jpg' />");
LODOP.SET_SHOW_MODE ("BKIMG_IN_PREVIEW",1); //打印预览时是否包含背景图

另外,由于报表的内容都是写在HTML页面中的,因此在动态设置内容的时候,一可以用脚本来读取界面元素作为数据源,二可以通过后台代码自动生成脚本代码,输出到前台页面中,看具体的需要了。

套打的预览界面大致如下图所示,其中蓝色部分是需要打印的内容,背景图片是一个发票的样板。

Web打印解决方案之证件套打的实现思路

下面代码是通过脚本获取界面元素来取得相应的内容的,这种情况适合于界面上可能会修改一些打印的内容的情景。

LODOP.ADD_PRINT_TEXT(95, 695, 250, 52, document.getElementById("txtCompanyName").innerText); //业户名称
LODOP.SET_PRINT_STYLEA(1, "FontSize", 14);
LODOP.SET_PRINT_STYLEA(1, "Bold", 1);
var licenseDate = document.getElementById("txtLicenseDate").value;//证件有效期
var licenseYear = "";
var licenseMonth = "";
var licenseDay = "";
if (licenseDate != null && licenseDate != "") {
licenseYear = licenseDate.split("-")[0];
licenseMonth = licenseDate.split("-")[1];
licenseDay = (licenseDate.split("-")[2]).substr(0, 2);
}
LODOP.ADD_PRINT_TEXT(396, 190, 46, 22, validateYear); //有效期 结束 年 
LODOP.SET_PRINT_STYLEA(6, "FontSize", 11);
LODOP.SET_PRINT_STYLEA(6, "Bold", 1);
LODOP.ADD_PRINT_TEXT(396, 253, 30, 22, validateMonth); //有效期 结束 月
LODOP.SET_PRINT_STYLEA(7, "FontSize", 11);
LODOP.SET_PRINT_STYLEA(7, "Bold", 1);
LODOP.ADD_PRINT_TEXT(396, 304, 32, 22, validateDay); //有效期 结束 日
LODOP.SET_PRINT_STYLEA(8, "FontSize", 11);
LODOP.SET_PRINT_STYLEA(8, "Bold", 1);

最后附上它的设计界面,其中生成代码功能可以生成用于静态HTML中的内容布局显示,做一定的修改调整就可以用在动态页面中了。非常有用的一个功能。

Web打印解决方案之证件套打的实现思路

以上所述是小编给大家介绍的Web打印解决方案之证件套打的实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
基于Vant UI框架实现时间段选择器
Dec 24 Javascript
浅谈js数据类型判断与数组判断
Aug 29 #Javascript
判断js的Array和Object的实现方法
Aug 29 #Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 #Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 #Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 #Javascript
javascript如何创建对象
Aug 29 #Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 #Javascript
You might like
浅析SVN常见问题及解决方法
2013/06/21 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
js 事件小结 表格区别
2007/08/13 Javascript
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
js切换div css注意的细节
2012/12/10 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
管理站站长岗位职责
2013/11/27 职场文书
大一学生的职业生涯规划书范文
2014/01/19 职场文书
车间机修工岗位职责
2014/02/28 职场文书
白岩松演讲
2014/05/21 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle