基於MVC4+EasyUI的Web開發框架經驗總結（16）--使用雲打印控件C-Lodop打印頁面或套打報關運單信息

時間 2019-11-10

標籤基於 mvc4+easyui mvc easyui web 開發框架經驗總結使用打印控件 lodop 頁面報關運單信息欄目 HTML 简体版

原文原文鏈接

在最新的MVC4+EasyUI的Web開發框架裏面，我整合了關於網購運單處理的一個模塊，其中整合了客戶導單、運單合併、到貨掃描、扣倉、出倉、查詢等各個模塊的操做，裏面涉及到一些運單套打的操做，不過因爲以前介紹LODOP不兼容Chrome等瀏覽器，所以曾經想放棄這個控件的打印處理，不過他們及時推出了「雲打印控件C-Lodop「，並且對以前的接口幾乎徹底兼容，所以在框架裏也繼續沿用了這個控件來進行相關的打印處理，包括常規的打印和運單信息套打等處理。javascript

一、控件的安裝

這個雲控件C-Lodop（http://www.lodop.net/）實際上是在本地安裝後，駐留服務提供JS的服務的，安裝後啓動程序後界面以下所示。css

這種經過服務器提供JS服務的方式，比插件方式好不少，測試過Chrome瀏覽器也能夠順利打印了，原來的LODOP插件方式的打印是不兼容的。html

經過它們自己自帶的JS初始化代碼，能夠了解到該控件目前採用非插件方式進行處理打印操做的了。java

//讓其它電腦的瀏覽器經過本機打印（適用例子）：
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函數，用來得到打印控件對象的。ajax

檢查是否安裝了雲打印控件的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>

二、雲打印控件C-Lodop的使用

這個控件和原來的LODOP的使用保持一致性，不用修改原來的代碼就能夠直接使用最新的打印方式，很是贊，關於這個控件的使用，我在前面介紹了不少相關的使用過程。服務器

如在Winform裏面利用網頁套打證件的案例《使用NVelocity生成內容的幾種方式》。框架

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

該控件提供了很詳細的各類案例（http://www.lodop.net/demo.html），能夠參考學習使用。async

在前面介紹了，我在框架裏面的網購運單處理裏面，繼續使用了這個控件進行套打的處理，例如咱們須要套打相似這樣的界面內容。

咱們設計好套打頁面內容，以下所示。

設計好的內容，咱們能夠把它們轉換爲頁面裏面的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框架界面效果。

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

若是是常規打印，那麼他們的界面和咱們看到的頁面內容很是接近，以下所示。

參考代碼以下所示。

    @*添加對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>