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 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
vue实现在线翻译功能
Sep 27 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
JavaScript实现答题评分功能页面
Jun 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
PHP取进制余数函数代码
2012/01/19 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
Python中元组,列表,字典的区别
2017/05/21 Python
python删除某个字符
2018/03/19 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
基于Python实现简单学生管理系统
2020/07/24 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
酒店出纳岗位职责
2013/12/29 职场文书
总经理工作职责范文
2014/03/14 职场文书
借条如何写
2015/05/26 职场文书
中学政教处工作总结
2015/08/13 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
MySQL系列之二 多实例配置
2021/07/02 MySQL
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript