【JS】通過JS實現超市小票打印功能——ActiveX控件

• 應客戶的需求= = ，要在網頁端實現打印小票的功能
• 先來一張打印出的小票效果圖（合計明顯不對，因為有修改訂單功能，請各位忽略）

　　

用什么方法實現呢：

　　　　我想應該是有三種吧

　　　　1.用第三方的瀏覽器控件（這個好似比較方便，我的老師也是這樣建議我）向大家推薦一個 Lodop打印控件

　　　　2.用CSS寫好模板，然后直接用頁面打印的方法（應該是這樣吧）

　　　　　　（以上兩種還沒有嘗試，這兩天陸續嘗試）

　　　　3.用微軟自己的ActiveX控件(ActiveX控件可以實現調用本地的文件等操作（之前試過調用cmd，實現shutdown -s -t，在網頁控制電腦的定時關機）)

　　　　當然這種方法的缺點也很明顯：限操作系統-因為是微軟的東西只能Windows下，限瀏覽器-因為ActiveX也只能在IE瀏覽器下。所以局限性比較大

實現過程：

　　　　1.編輯『word小票模板』，要用到word中『書簽』這個工具（通過『書簽』的定位，js就可以操作word在『書簽』指定的位置進行 修改、寫入內容）

　　　　2.在js對word模板進行 打開、賦值、打印操作

一、編輯『word小票模板』

　　　　1.以word2007為例，首先排好大致的樣式

　　　　　　

　　　　2.用『書簽』進行標記定位

　　　　　　選中要添加書簽的文字區域-點擊『書簽』-填寫書簽名-點擊『添加』-『定位』可以查看此書簽的位置

　　　　           　　　　

二、js

直接上源代碼吧：

<input type="button" value="toPrinter " onclick="viewToWord();" />  

function viewToWord() {  2         //當前時間
        var Time;  4         var today = new Date();  5         Time = today.toLocaleString();  6         
        try {  8             // 創建ActiveXObject對象 
            wdapp = new ActiveXObject("Word.Application"); 10  } 11         catch (e) { 12             console.log("無法調用Office對象，！", e) 13             wdapp = null; 14             return; 15  } 16         wdapp.Documents.Open("f:\\PrinterTemplate1.doc"); //打開本地(客戶端)word模板
        wddoc = wdapp.ActiveDocument; 18         wddoc.Bookmarks("OrderNum").Range.Text = "201509080959" + "\n"; 19         wddoc.Bookmarks("OrderName").Range.Text = "鄭斌" + "\n"; 20         wddoc.Bookmarks("OrderAddress").Range.Text = "www.cnblogs.com/zhengbin" + "\n"; 21         wddoc.Bookmarks("OrderPhoneNum").Range.Text = "QQ:1746788394" + "\n"; 22         wddoc.Bookmarks("OrderDaocanTime").Range.Text = "10:00-11:00" + "\n"; 23         wddoc.Bookmarks("OrderTime").Range.Text = "09-08 10:15"; 24         //添加表格
        var myTable = wddoc.Tables.Add (wddoc.Bookmarks("OrderCart").Range,3,3);//(賦值區域,行數,列數)
        //隱藏邊框
        var table=wdapp.ActiveDocument.Tables(1); 28         table.Borders(-1).LineStyle=0; 29         table.Borders(-2).LineStyle=0; 30         table.Borders(-3).LineStyle=0; 31         table.Borders(-4).LineStyle=0; 32         table.Borders(-5).LineStyle=0; 33         table.Borders(-6).LineStyle=0; 34         for(i=1;i<=3;i++){//行
            //第一列
            with (myTable.Cell(i,1).Range){ 37                 font.Size = 8;//調整字體大小
                InsertAfter("博客園"+i);//插入的內容
 } 40             //第二列
            with(myTable.Cell(i,2).Range){ 42                 font.Size = 8; 43  InsertAfter(i); 44                 ParagraphFormat.Alignment=1;//表格內容對齊:0-左對齊 1-居中 2-右對齊
 } 46             //第三列
            with(myTable.Cell(i,3).Range){ 48                 font.Size = 8; 49                 InsertAfter("無價"); 50                 ParagraphFormat.Alignment=2; 51  } 52  } 53         wddoc.saveAs("f:\\PrinterTemp_cnblogs.doc"); //保存臨時文件word
        wddoc.Bookmarks("TotalPrice").Range.Text = "無價" + "\n"; 55         wddoc.Bookmarks("Time").Range.Text = Time; 56         //wdapp.ActiveDocument.ActiveWindow.View.Type = 1;
        wdapp.visible = false; //word模板是否可見 
        wdapp.Application.Printout(); //調用自動打印功能 
 wdapp.quit(); 60         wdapp = null; 61     }

　　最后：

　　　　

• 注意：

　　　　首先要調整好IE瀏覽器的 Internet選項-自定義級別（右邊『ActiveX控件和插件』下，能啟用的都啟用）

　　　　

　　　　『打印機脫機工作』一般是usb沒有插好，換插口，重啟打印機即可

• 感謝以下幾位博主的精彩博文：

　　http://kuangbaoxu.iteye.com/blog/193311

　　http://baser.blog.51cto.com/4153192/844742

　　http://xiaosuncunzhang.blog.51cto.com/317407/584844

　　http://blog.csdn.net/weizengxun/article/details/6870880

　　http://blog.sina.com.cn/s/blog_692d0a650100klr4.html