瀏覽器批量打印條碼紙

前兩天遇到了一個需要瀏覽器打印條碼的需求，因為目前的管理系統是基于B/S的，在生產管理員用戶那里需要將訂單轉為生產指令單，與此同時需要將訂單中的產品批量打印出來條碼紙來，以便生產完畢后貼到產品上面方便掃碼入庫和標注產品。

先從打印機開始

提供給我的是一臺科誠打印機G500，實際使用效果還不錯。目前很多的條碼打印機廠商提供了可視化的條碼打印軟件，可以直接打印出來條碼，還可以生成相應的EZPL指令，方便開發者使用指令來開發條碼打印，當然還提供了基礎的二次開發包和文檔。

下圖是科誠官網下載的GO-LABLE打印設計軟件。

使用非常簡單，擺弄一會兒就明白怎么玩了，這款打印軟件提供了基礎的條碼圖形，文字和圖像圖形工具，拖動到設計界面即可，這里需要注意的是，在使用字體的時候有兩種可以選擇，一種是打印機內建字體，一種是windows字體，如果你條碼上的文字不需要改變了，那就建議使用windows字體，這樣打印出來的文字清晰度很高，如果文字需要動態改變，比如我遇到的這個需求，那么就必須使用內建字體了，雙擊條碼上的文字，會出現文字設定：

這里我選擇了亞洲字體，使用前需要先下載亞洲字體到打印機，其實就是把本機的中文字體下載到打印機。其他的文字來源我試過了，但是只有這個選項可以打印出來中文而不出現亂碼。

設計完成后，我們可以輸出指令到右面的命令視窗，多觀察一下，你會發現其實這就是按照一定的規則生產的一串配置信息，告訴打印機紙張的大小信息，要出現一個什么樣的圖像，什么文本的文字，文字的字體類型，以及所有的這些元素的位置坐標信息，有了這些信息，打印機便可以按照要求輸出打印圖像了。我們可以試著改變命令窗口的信息，然后輸入回到設計界面，你就會發現設計效果已經按照你的修改發生了改變。

大家可能已經發現了，我在所有需要動態更改的地方，用@+相應的字段表示，目的就是為了以此為模板，通過替換模版的元素達到動態輸出的效果。

這里著重講一下二維碼配置信息

W30,22,5,2,M,8,10,5,0
@單號

其中“@單號”是二維碼的文本信息，上面配置信息倒數第二個，也就是那個“5”，是二維碼信息的長度，,一個中文是兩個字節，所以“@單號”的長度就是5了，如果文本信息換成其他的了，這里的“5”，也要做相應的改變。

制作ActiveX控件

如果是做成winform，程序，那應該說是非常的簡單了，直接調用提供的dll就行了，可現在要求在瀏覽器中完成這個任務，瀏覽器想調用dll，那就得用的ActiveX控件了。關于ActiveX控件的開發和安裝部署，網上有一些教程，其實和做winform差不多，只是添加一下guid，修改一下控件屬性就行了，真的是非常方便。下面把核心代碼貼出來

//Trace.dll是官方提供的，放到bin文件夾下面
[DllImport("Trace.dll")]
        public static extern void sendcommand(
            [MarshalAs(UnmanagedType.LPArray)]
            byte[] command);
 public void printdata(string danhao,string kehu,string guige,string houdu,string yanse,string kuandu,string gaodu,string pingmi)
        {
            //獲取程序集的文件夾目錄，也就是安裝后控件程序集所在的目錄
            string sApplicationPath = Assembly.GetExecutingAssembly().Location;
//找到Data.cmd,這里是命令窗口中生成的那些指令信息，放到bin文件下，安裝程序會把控件的dll和這個Data.cmd一起打包輸出，這里就要求安裝程//序務必吧Data.cmd包含進去。如果是調試狀態，程序或到obj/debug文件下尋找Data.cmd,所以為了調試不出錯，也放到那里一份Data.cmd
            sApplicationPath = sApplicationPath.Replace("CodexPrint.dll","Data.cmd");           
            using (StreamReader sr = new StreamReader(sApplicationPath, Encoding.GetEncoding("GB2312")))
            {
                StringBuilder sb = new StringBuilder();
                string sLine = "";
                while (sLine != null)
                {
                    sLine = sr.ReadLine();
                    if (sLine != null && !sLine.Equals(""))
                    {
                        //特別要注意必須每次讀一行后添加上換行符，否則待會還原成字節數組的時候發給打印機，打印機不懂你在講什么
                        sLine += Environment.NewLine;
                        sb.Append(sLine);
                    }
                }
                sr.Close();
                //去除空的部分
                string temp = sb.ToString().Trim();

                //獲取單號的字節長度，替換"@單號"的長度5,一個漢字兩個長度
                string erweimapeizhixinxi=temp.Substring(temp.IndexOf("W30"),(temp.LastIndexOf("@單號") -temp.IndexOf("W30") -1));
                string[] arraytemp=erweimapeizhixinxi.Split(new char[]{','});
                arraytemp[arraytemp.Length - 2] = Encoding.GetEncoding("GB2312").GetBytes(danhao ).Length.ToString();
                temp = temp.Replace(erweimapeizhixinxi,string.Join(",",arraytemp));

                //開始替換數據
                temp = temp.Replace("@單號", danhao);
                temp = temp.Replace("@客戶", kehu);
                temp = temp.Replace("@規格", guige);
                temp = temp.Replace("@厚度", houdu);
                temp = temp.Replace("@顏色", yanse);
                temp = temp.Replace("@寬度", kuandu);
                temp = temp.Replace("@高度", gaodu);
                temp = temp.Replace("@平米", pingmi);
               
                byte[] buffer = Encoding.GetEncoding("GB2312").GetBytes(temp);
                openport("6"); //Ex:USB
                try
                {
                    sendcommand(buffer);
                    closeport();
                }
                catch (Exception error)
                {
                    MessageBox.Show(error.Message);
                    return;
                }
            }
        }

這樣ActiveX控件的開發就基本完成了，然后就可以在PC安裝了，類似工行網站在使用之前必須安裝控件一樣。

頁面使用

ActiveX控件安裝完畢后，頁面的使用就簡單了

<object id="BarCodePrint" classid="clsid:你開發控件的時候設定的那個guid,這樣就可以與安裝的控件對應起來了"></object>
<input type="button" onclick="startprint()" value="打印表中數據" />

在startprint方法里，我們可以通過js來調用控件中的printdata方法了。這里我循環了表格中的數據，然后逐行打印

 <script type="text/javascript">
     function startprint() {
         var p = document.getElementById("BarCodePrint");
         var tableObj = document.getElementById("data");
         for (var i = 1; i < tableObj.rows.length; i++) {
             var rowcells = tableObj.rows[i].cells;
             var jsondata = { "danhao": rowcells[0].innerHTML, "kehu": rowcells[11].innerHTML, "guige": rowcells[1].innerHTML + rowcells[2].innerHTML,
                 "yanse": rowcells[3].innerHTML, "houdu": rowcells[4].innerHTML, "kuandu": rowcells[5].innerHTML, "gaodu": rowcells[6].innerHTML,
                 "pingmi": rowcells[10].innerHTML
             };
            //也可以省去定義json的過程，直接將數據傳入下面的方法
            p.printdata(jsondata.danhao, jsondata.kehu, jsondata.guige, jsondata.houdu, jsondata.yanse, jsondata.kuandu, jsondata.gaodu, jsondata.pingmi);           
         }
                     
     }      
     
    </script>

這樣整個工作就完成了，實測效果良好。ActiveX控件只能在IE下使用，谷歌瀏覽器還得使用其他插件配合，不過作為生產環節上的一環，要求工作人員使用IE就行了，呵呵。如果有一天突然想改變標簽上的布局了，那么在GO-LABLE中重新設計好后生成新的指令，找到ActiveX控件的安裝目錄，找到Data.cmd,替換掉原來的的指令就可以了。但是這里面的模版替換元素必須形式一樣，而且不能增加新的字段，如果增加的話，那就得重新開發升級ActiveX控件了。其實還有更靈活的方法，比如只傳入方法一個字符串，里面包含了需要替換的標簽和標簽數據，通過分隔符區分，比如“@單號:0000001|@顏色:紅色|.........”，然后進行字符串處理就行了。當然頁面的調用形式也相應做出改變就行。

posted @ 2013-12-03 11:51 鄭某閱讀(5996) 評論(8) 收藏舉報

刷新頁面返回頂部

鄭某

瀏覽器批量打印條碼紙

公告