基于MVC+EasyUI的web開(kāi)發(fā)框架之使用云打印控件C-Lodop打印頁(yè)面或套打報(bào)關(guān)運(yùn)單信息
在最新的MVC4+EasyUI的Web開(kāi)發(fā)框架里面,我整合了關(guān)于網(wǎng)購(gòu)運(yùn)單處理的一個(gè)模塊,其中整合了客戶導(dǎo)單、運(yùn)單合并、到貨掃描、扣倉(cāng)、出倉(cāng)、查詢等各個(gè)模塊的操作,里面涉及到一些運(yùn)單套打的操作,不過(guò)由于之前介紹LODOP不兼容Chrome等瀏覽器,因此曾經(jīng)想放棄這個(gè)控件的打印處理,不過(guò)他們及時(shí)推出了“云打印控件C-Lodop“,而且對(duì)之前的接口幾乎完全兼容,因此在框架里也繼續(xù)沿用了這個(gè)控件來(lái)進(jìn)行相關(guān)的打印處理,包括常規(guī)的打印和運(yùn)單信息套打等處理。
1、控件的安裝
這個(gè)云控件C-Lodop(http://www.lodop.net/)其實(shí)是在本地安裝后,駐留服務(wù)提供JS的服務(wù)的,安裝后啟動(dòng)程序后界面如下所示。
這種通過(guò)服務(wù)器提供JS服務(wù)的方式,比插件方式好很多,測(cè)試過(guò)Chrome瀏覽器也可以順利打印了,原來(lái)的LODOP插件方式的打印是不兼容的。
通過(guò)它們本身自帶的JS初始化代碼,可以了解到該控件目前采用非插件方式進(jìn)行處理打印操作的了。
//讓其它電腦的瀏覽器通過(guò)本機(jī)打?。ㄟm用例子): var oscript = document.createElement("script"); oscript.src = "/CLodopfuncs.js"; var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement; head.insertBefore(oscript, head.firstChild); //讓本機(jī)瀏覽器打印(更優(yōu)先): 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); //本機(jī)瀏覽器的后補(bǔ)端口8001(這種兼顧做法可能報(bào)錯(cuò)不用理它): 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文件用來(lái)構(gòu)建打印控件的,其中在LodopFuncs.js文件里面定義了getLodop函數(shù),用來(lái)獲得打印控件對(duì)象的。
檢查是否安裝了云打印控件的JS代碼如下所示。
<script language="javascript" type="text/javascript"> function CheckIsInstall() { try{ var LODOP=getLodop(); if (LODOP.VERSION) { if (LODOP.CVERSION) alert("當(dāng)前有C-Lodop云打印可用!\n C-Lodop版本:"+LODOP.CVERSION+"(內(nèi)含Lodop"+LODOP.VERSION+")"); else alert("本機(jī)已成功安裝了Lodop控件!\n 版本號(hào):"+LODOP.VERSION); }; }catch(err){ } }; </script>
2、云打印控件C-Lodop的使用
這個(gè)控件和原來(lái)的LODOP的使用保持一致性,不用修改原來(lái)的代碼就可以直接使用最新的打印方式,非常贊,關(guān)于這個(gè)控件的使用,我在前面介紹了很多相關(guān)的使用過(guò)程。
如在Winform里面利用網(wǎng)頁(yè)套打證件的案例《基于NVelocity的幾種內(nèi)容生成方式匯總》。
以及在Web頁(yè)面的套打處理《Web打印解決方案之證件套打的實(shí)現(xiàn)思路》,以及《Web打印的解決方案之普通報(bào)表打印》,里面對(duì)控件的使用操作做了很詳細(xì)的介紹。
該控件提供了很詳細(xì)的各種案例(http://www.lodop.net/demo.html),可以參考學(xué)習(xí)使用。
在前面介紹了,我在框架里面的網(wǎng)購(gòu)運(yùn)單處理里面,繼續(xù)使用了這個(gè)控件進(jìn)行套打的處理,例如我們需要套打類似這樣的界面內(nèi)容。
我們?cè)O(shè)計(jì)好套打頁(yè)面內(nèi)容,如下所示。
設(shè)計(jì)好的內(nèi)容,我們可以把它們轉(zhuǎn)換為頁(yè)面里面的JS代碼如下所示。
<script src="/Content/JQueryTools/LODOP/CheckActivX.js"></script> <script type="text/javascript"> var LODOP; //聲明為全局變量 function Preview() {//打印預(yù)覽 LODOP = getLodop(); LODOP.PRINT_INITA(-1, -1, 824, 1129, "運(yùn)單套打"); CreateLicenseData(); LODOP.SET_PREVIEW_WINDOW(2, 0, 0, 800, 600, ""); LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4"); LODOP.PREVIEW(); }; function Setup() {//打印維護(hù) LODOP = getLodop(); LODOP.PRINT_INITA(-1, -1, 824, 1129, "運(yùn)單套打"); CreateLicenseData(); LODOP.PRINT_SETUP(); }; function Design() {//打印設(shè)計(jì) LODOP = getLodop(); LODOP.PRINT_INITA(-1, -1, 824, 1129, "運(yùn)單套打"); CreateLicenseData(); LODOP.PRINT_DESIGN(); }; function CreateLicenseData() { if (printID != undefined && printID != '') { //使用同步方式,使得聯(lián)動(dòng)的控件正常顯示 $.ajaxSettings.async = false; //首先用戶發(fā)送一個(gè)異步請(qǐng)求去后臺(tái)實(shí)現(xiàn)方法 $.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);//預(yù)覽包含背景 LODOP.SET_SHOW_MODE("BKIMG_PRINT", true);//打印內(nèi)容包含背景 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); }); } } //打印預(yù)覽 var printID; function PrintDetail() { var row = $("#gridDetail").datagrid("getSelected"); if (row) { var index = $('#gridDetail').datagrid('getRowIndex', row); printID = row.ID; Preview(); } else { $.messager.alert("提示", "請(qǐng)選擇一個(gè)記錄"); } } //批量打印 function BatchPrint() { //得到用戶選擇的數(shù)據(jù)的ID var rows = $("#gridDetail").datagrid("getSelections"); if (rows.length >= 1) { //然后確認(rèn)發(fā)送異步請(qǐng)求的信息到后臺(tái)刪除數(shù)據(jù) $.messager.confirm("批量打印確認(rèn)", "您確認(rèn)批量打印選定的記錄嗎?", 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("提示", "請(qǐng)選擇你要批量打印的數(shù)據(jù)"); } } //打印維護(hù) function PrintSetup() { var row = $("#gridDetail").datagrid("getSelected"); if (row) { var index = $('#gridDetail').datagrid('getRowIndex', row); printID = row.ID; Setup(); } } </script>
其中這個(gè)打印界面中,還用到了二維碼的打印處理操作,這樣很方便直接使用條碼槍直接讀取,如下代碼:
LODOP.ADD_PRINT_BARCODE(78, 441, 262, 56, "128C", info.FenyunDanhao); LODOP.ADD_PRINT_BARCODE(684, 441, 262, 56, "128C", info.FenyunDanhao);
然后在主頁(yè)面里面設(shè)定打印的操作功能按鈕進(jìn)行處理,下面是我們基于EasyUI的Web框架界面效果。
打印預(yù)覽界面如下所示,實(shí)際打印的時(shí)候,我們可以設(shè)定不打印背景圖片。
如果是常規(guī)打印,那么他們的界面和我們看到的頁(yè)面內(nèi)容非常接近,如下所示。
參考代碼如下所示。
@*添加對(duì)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() {//正本打印維護(hù) CreateLicenseData(); LODOP.PRINT_SETUP(); }; function Design() {//正本打印設(shè)計(jì) CreateLicenseData(); LODOP.PRINT_DESIGN(); }; function CreateLicenseData() { LODOP = getLodop(); LODOP.PRINT_INIT("政策法規(guī)"); 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>
- JavaWeb實(shí)現(xiàn)圖形報(bào)表折線圖的方法
- 水晶報(bào)表asp.net的webform下基本用法實(shí)例
- Web打印解決方案之證件套打的實(shí)現(xiàn)思路
- 網(wǎng)頁(yè)WEB打印控件制作
- 利用javascript實(shí)現(xiàn)web頁(yè)面中指定區(qū)域打印
- js控制web打印(局部打印)方法整理
- web的各種前端打印方法之jquery打印插件jqprint實(shí)現(xiàn)網(wǎng)頁(yè)打印
- web的各種前端打印方法之jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁(yè)打印
- Web打印解決方案之普通報(bào)表打印功能
相關(guān)文章
基于jquery實(shí)現(xiàn)滾輪放大縮小圖片的函數(shù)代碼
這篇文章主要介紹了基于jquery實(shí)現(xiàn)滾輪放大縮小圖片的函數(shù)代碼,需要的朋友可以參考下2023-05-05jquery實(shí)現(xiàn)奇偶行賦值不同css值
通常為了讓頁(yè)面呈現(xiàn)的更為美觀,我們喜歡在奇偶行加上不同的顏色2012-02-02Jquery uploadify圖片上傳插件無(wú)法上傳的解決方法
很多的朋友都有遇到Jquery uploadify圖片上傳插件無(wú)法上傳的情況,下面為大家介紹下不錯(cuò)的解決方法,感興趣的朋友可以參考下2013-12-12jQuery取得元素標(biāo)簽名稱小結(jié)(附代碼)
這篇文章主要介紹了 jquery如何取得元素標(biāo)簽名稱,將html和js代碼附上,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08基于jquery實(shí)現(xiàn)彩色投票進(jìn)度條代碼解析
這篇文章主要介紹了基于jquery實(shí)現(xiàn)彩色投票進(jìn)度條代碼解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08基于JQuery實(shí)現(xiàn)的圖片自動(dòng)進(jìn)行縮放和裁剪處理
頁(yè)面加載后,對(duì)不合比例的圖片自動(dòng)進(jìn)行縮放和裁剪處理,兼容圖像已在緩存或不在緩存的情況,基于JQuery2014-01-01jquery dataTable 后臺(tái)加載數(shù)據(jù)并分頁(yè)實(shí)例代碼
本篇文章主要介紹了jquery dataTable 后臺(tái)加載數(shù)據(jù)并分頁(yè)實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-06-06jQuery Datatable 多個(gè)查詢條件自定義提交事件(推薦)
這篇文章主要介紹了jQuery Datatable 多個(gè)查詢條件自定義提交事件的相關(guān)資料,需要的朋友可以參考下2017-08-08