瀏覽器批量打印條碼紙

      前兩天遇到了一個須要瀏覽器打印條碼的需求，由於目前的管理系統是基於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|@顏色:紅色|.........」，而後進行字符串處理就好了。固然頁面的調用形式也相應作出改變就行。