基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息


Posted in Javascript onAugust 29, 2016

在最新的MVC4+EasyUI的Web开发框架里面,我整合了关于网购运单处理的一个模块,其中整合了客户导单、运单合并、到货扫描、扣仓、出仓、查询等各个模块的操作,里面涉及到一些运单套打的操作,不过由于之前介绍LODOP不兼容Chrome等浏览器,因此曾经想放弃这个控件的打印处理,不过他们及时推出了“云打印控件C-Lodop“,而且对之前的接口几乎完全兼容,因此在框架里也继续沿用了这个控件来进行相关的打印处理,包括常规的打印和运单信息套打等处理。

1、控件的安装

这个云控件C-Lodop(http://www.lodop.net/)其实是在本地安装后,驻留服务提供JS的服务的,安装后启动程序后界面如下所示。

基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息

这种通过服务器提供JS服务的方式,比插件方式好很多,测试过Chrome浏览器也可以顺利打印了,原来的LODOP插件方式的打印是不兼容的。

通过它们本身自带的JS初始化代码,可以了解到该控件目前采用非插件方式进行处理打印操作的了。

//让其它电脑的浏览器通过本机打印(适用例子):
var oscript = document.createElement("script");
oscript.src = "/CLodopfuncs.js";
var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
head.insertBefore(oscript, head.firstChild);
//让本机浏览器打印(更优先):
oscript = document.createElement("script");
oscript.src = "http://localhost:8000/CLodopfuncs.js?priority=1";
var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
head.insertBefore(oscript, head.firstChild);
//本机浏览器的后补端口8001(这种兼顾做法可能报错不用理它):
oscript = document.createElement("script");
oscript.src = "http://localhost:8001/CLodopfuncs.js?priority=2";
var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
head.insertBefore(oscript, head.firstChild);

官方例子提供了LodopFuncs.js文件用来构建打印控件的,其中在LodopFuncs.js文件里面定义了getLodop函数,用来获得打印控件对象的。

检查是否安装了云打印控件的JS代码如下所示。

<script language="javascript" type="text/javascript"> 
function CheckIsInstall() { 
try{ 
var LODOP=getLodop(); 
if (LODOP.VERSION) {
if (LODOP.CVERSION)
alert("当前有C-Lodop云打印可用!\n C-Lodop版本:"+LODOP.CVERSION+"(内含Lodop"+LODOP.VERSION+")"); 
else
alert("本机已成功安装了Lodop控件!\n 版本号:"+LODOP.VERSION); 
};
}catch(err){ 
} 
}; 
</script>

2、云打印控件C-Lodop的使用

这个控件和原来的LODOP的使用保持一致性,不用修改原来的代码就可以直接使用最新的打印方式,非常赞,关于这个控件的使用,我在前面介绍了很多相关的使用过程。

如在Winform里面利用网页套打证件的案例《基于NVelocity的几种内容生成方式汇总》。

基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息

以及在Web页面的套打处理《Web打印解决方案之证件套打的实现思路》,以及《Web打印的解决方案之普通报表打印》,里面对控件的使用操作做了很详细的介绍。

基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息

基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息

该控件提供了很详细的各种案例(http://www.lodop.net/demo.html),可以参考学习使用。
在前面介绍了,我在框架里面的网购运单处理里面,继续使用了这个控件进行套打的处理,例如我们需要套打类似这样的界面内容。

基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息

我们设计好套打页面内容,如下所示。

基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息

设计好的内容,我们可以把它们转换为页面里面的JS代码如下所示。

<script src="/Content/JQueryTools/LODOP/CheckActivX.js"></script>
<script type="text/javascript">
var LODOP; //声明为全局变量 
function Preview() {//打印预览
LODOP = getLodop();
LODOP.PRINT_INITA(-1, -1, 824, 1129, "运单套打");
CreateLicenseData();
LODOP.SET_PREVIEW_WINDOW(2, 0, 0, 800, 600, "");
LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4");
LODOP.PREVIEW();
};
function Setup() {//打印维护
LODOP = getLodop();
LODOP.PRINT_INITA(-1, -1, 824, 1129, "运单套打");
CreateLicenseData();
LODOP.PRINT_SETUP();
};
function Design() {//打印设计
LODOP = getLodop();
LODOP.PRINT_INITA(-1, -1, 824, 1129, "运单套打");
CreateLicenseData();
LODOP.PRINT_DESIGN();
};
function CreateLicenseData() { 
if (printID != undefined && printID != '') {
//使用同步方式,使得联动的控件正常显示
$.ajaxSettings.async = false;
//首先用户发送一个异步请求去后台实现方法
$.getJSON("/BillDetail/FindByID?id=" + printID, function (info) {
LODOP.ADD_PRINT_SETUP_BKIMG("<img src='/Content/Template/空白套打模板.png'/>");
LODOP.SET_SHOW_MODE("BKIMG_IN_PREVIEW", true);//预览包含背景
LODOP.SET_SHOW_MODE("BKIMG_PRINT", true);//打印内容包含背景
LODOP.ADD_PRINT_BARCODE(78, 441, 262, 56, "128C", info.FenyunDanhao);
LODOP.ADD_PRINT_BARCODE(684, 441, 262, 56, "128C", info.FenyunDanhao);
LODOP.ADD_PRINT_TEXT(186, 287, 277, 39, info.Shou_Com);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(236, 378, 186, 28, info.Shou_Name);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(276, 283, 284, 67, info.Shou_Dizhi);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(362, 306, 254, 30, info.Shou_Phone);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(404, 319, 51, 30, info.Jianshu);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(400, 476, 95, 31, info.Zhongliang);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(187, 33, 227, 39, info.Fa_Gongsi);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(277, 33, 230, 65, info.Fa_Dizhi);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(364, 37, 227, 25, info.Fa_Phone);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(410, 37, 226, 26, info.Pinming);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(803, 34, 234, 39, info.Fa_Gongsi);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(895, 32, 238, 66, info.Fa_Dizhi);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(979, 33, 234, 25, info.Fa_Phone);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(1024, 35, 228, 25, info.Pinming);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(802, 285, 287, 39, info.Shou_Com);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(849, 373, 198, 28, info.Shou_Name);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(894, 285, 287, 67, info.Shou_Dizhi);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(980, 287, 281, 26, info.Shou_Phone);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(1021, 317, 59, 29, info.Jianshu);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
LODOP.ADD_PRINT_TEXT(1017, 477, 95, 30, info.Zhongliang);
LODOP.SET_PRINT_STYLEA(0, "FontSize", 12);
});
}
}
//打印预览
var printID;
function PrintDetail() {
var row = $("#gridDetail").datagrid("getSelected");
if (row) {
var index = $('#gridDetail').datagrid('getRowIndex', row);
printID = row.ID;
Preview();
}
else {
$.messager.alert("提示", "请选择一个记录");
}
}
//批量打印
function BatchPrint() {
//得到用户选择的数据的ID
var rows = $("#gridDetail").datagrid("getSelections");
if (rows.length >= 1) {
//然后确认发送异步请求的信息到后台删除数据
$.messager.confirm("批量打印确认", "您确认批量打印选定的记录吗?", function (action) {
if (action) {
for (var i = 0; i < rows.length; i++) {
LODOP = getLodop();
LODOP.PRINT_INIT("");
LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4");
printID = rows[i].ID;
CreateLicenseData();
LODOP.PRINT();
}
}
});
}
else {
$.messager.alert("提示", "请选择你要批量打印的数据");
}
}
//打印维护
function PrintSetup() {
var row = $("#gridDetail").datagrid("getSelected");
if (row) {
var index = $('#gridDetail').datagrid('getRowIndex', row);
printID = row.ID;
Setup();
}
}
</script>

其中这个打印界面中,还用到了二维码的打印处理操作,这样很方便直接使用条码枪直接读取,如下代码:

LODOP.ADD_PRINT_BARCODE(78, 441, 262, 56, "128C", info.FenyunDanhao);
LODOP.ADD_PRINT_BARCODE(684, 441, 262, 56, "128C", info.FenyunDanhao);

然后在主页面里面设定打印的操作功能按钮进行处理,下面是我们基于EasyUI的Web框架界面效果。

基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息

打印预览界面如下所示,实际打印的时候,我们可以设定不打印背景图片。

基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息

如果是常规打印,那么他们的界面和我们看到的页面内容非常接近,如下所示。

基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息

参考代码如下所示。

@*添加对LODOP控件的支持*@
<script type="text/javascript">
var LODOP; //声明为全局变量 
function Preview() {//正本打印
CreateLicenseData();
LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1);
LODOP.PREVIEW();
};
function PrintA() {
CreateLicenseData();
LODOP.PRINTA();
};
function Setup() {//正本打印维护
CreateLicenseData();
LODOP.PRINT_SETUP();
};
function Design() {//正本打印设计
CreateLicenseData();
LODOP.PRINT_DESIGN();
};
function CreateLicenseData() {
LODOP = getLodop();
LODOP.PRINT_INIT("政策法规");
var strBodyStyle = "<link type='text/css' rel='stylesheet' href='/Content/Themes/Default/style.css' /><style><!--table { border:1;background-color: #CBCBCC } td {background-color:#FFFFFE;border: 1; } th { background-color:#F1F1F3;padding-left:5px;border:1}--></style>";
var strFormHtml = strBodyStyle + "<body>" + document.getElementById("printContent").innerHTML + "</body>";
LODOP.ADD_PRINT_HTM(20, 40, 610, 900, strFormHtml);
LODOP.PREVIEW();
}
function SaveAs() {
var id = $('#ID2').val();
window.open('/Information/ExportWordById?id=' + id );
}
</script>
Javascript 相关文章推荐
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 #Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 #Javascript
javascript如何创建对象
Aug 29 #Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 #Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 #Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 #Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 #Javascript
You might like
php inc文件使用的风险和注意事项
2013/11/12 PHP
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
python数据结构之链表详解
2017/09/12 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
基于python的Paxos算法实现
2019/07/03 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Python callable内置函数原理解析
2020/03/05 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
python实现简单学生信息管理系统
2020/04/09 Python
Python 实现简单的客户端认证
2020/07/29 Python
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
安全生产先进个人材料
2014/02/06 职场文书
实习协议书范本
2014/04/22 职场文书
慈善晚会策划方案
2014/05/14 职场文书
经营目标管理责任书
2014/07/25 职场文书
活动总结格式
2014/08/30 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书