基于MVC+EasyUI的Web開發(fā)框架經(jīng)驗總結(jié)（16）--使用云打印控件C-Lodop打印頁面或套打報關運單信息

在最新的MVC4+EasyUI的Web開發(fā)框架里面，我整合了關于網(wǎng)購運單處理的一個模塊，其中整合了客戶導單、運單合并、到貨掃描、扣倉、出倉、查詢等各個模塊的操作，里面涉及到一些運單套打的操作，不過由于之前介紹LODOP不兼容Chrome等瀏覽器，因此曾經(jīng)想放棄這個控件的打印處理，不過他們及時推出了“云打印控件C-Lodop“，而且對之前的接口幾乎完全兼容，因此在框架里也繼續(xù)沿用了這個控件來進行相關的打印處理，包括常規(guī)的打印和運單信息套打等處理。

1、控件的安裝

這個云控件C-Lodop（http://www.lodop.net/）其實是在本地安裝后，駐留服務提供JS的服務的，安裝后啟動程序后界面如下所示。


這種通過服務器提供JS服務的方式，比插件方式好很多，測試過Chrome瀏覽器也可以順利打印了，原來的LODOP插件方式的打印是不兼容的。
通過它們本身自帶的JS初始化代碼，可以了解到該控件目前采用非插件方式進行處理打印操作的了。

//讓其它電腦的瀏覽器通過本機打?。ㄟ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);
//讓本機瀏覽器打印(更優(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);
//本機瀏覽器的后補端口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文件用來構(gòu)建打印控件的，其中在LodopFuncs.js文件里面定義了getLodop函數(shù)，用來獲得打印控件對象的。

檢查是否安裝了云打印控件的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+"(內(nèi)含Lodop"+LODOP.VERSION+")"); 
             else
             alert("本機已成功安裝了Lodop控件！\n 版本號:"+LODOP.VERSION); 

        };
     }catch(err){ 
      } 
}; 
</script>

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

這個控件和原來的LODOP的使用保持一致性，不用修改原來的代碼就可以直接使用最新的打印方式，非常贊，關于這個控件的使用，我在前面介紹了很多相關的使用過程。
如在Winform里面利用網(wǎng)頁套打證件的案例《使用NVelocity生成內(nèi)容的幾種方式》。


以及在Web頁面的套打處理《Web打印的解決方案之證件套打》，以及《Web打印的解決方案之普通報表打印》，里面對控件的使用操作做了很詳細的介紹。



該控件提供了很詳細的各種案例（http://www.lodop.net/demo.html），可以參考學習使用。
在前面介紹了，我在框架里面的網(wǎng)購運單處理里面，繼續(xù)使用了這個控件進行套打的處理，例如我們需要套打類似這樣的界面內(nèi)容。

我們設計好套打頁面內(nèi)容，如下所示。

設計好的內(nèi)容，我們可以把它們轉(zhuǎn)換為頁面里面的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 != '') {
        //使用同步方式，使得聯(lián)動的控件正常顯示
        $.ajaxSettings.async = false;
        //首先用戶發(fā)送一個異步請求去后臺實現(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);//預覽包含背景
            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);
        });
    }
}

//打印預覽
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() {
    //得到用戶選擇的數(shù)據(jù)的ID
    var rows = $("#gridDetail").datagrid("getSelections");
    if (rows.length >= 1) {
        //然后確認發(fā)送異步請求的信息到后臺刪除數(shù)據(jù)
        $.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("提示", "請選擇你要批量打印的數(shù)據(jù)");
    }
}

//打印維護
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框架界面效果。



打印預覽界面如下所示，實際打印的時候，我們可以設定不打印背景圖片。



如果是常規(guī)打印，那么他們的界面和我們看到的頁面內(nèi)容非常接近，如下所示。

參考代碼如下所示。

@*添加對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("政策法規(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>

以上就是基于新版云打印控件C-Lodop的使用效果和代碼，希望對大家有所幫助。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容