【JS】通过JS实现超市小票打印功能——ActiveX控件
應客戶的需求= = ,要在網(wǎng)頁端實現(xiàn)打印小票的功能
先來一張打印出的小票效果圖(合計明顯不對,因為有修改訂單功能,請各位忽略)
用什么方法實現(xiàn)呢:
我想應該是有三種吧
1.用第三方的瀏覽器控件(這個好似比較方便,我的老師也是這樣建議我)向大家推薦一個 Lodop打印控件
2.用CSS寫好模板,然后直接用頁面打印的方法(應該是這樣吧)
(以上兩種還沒有嘗試,這兩天陸續(xù)嘗試)
3.用微軟自己的ActiveX控件(ActiveX控件可以實現(xiàn)調(diào)用本地的文件等操作(之前試過調(diào)用cmd,實現(xiàn)shutdown -s -t,在網(wǎng)頁控制電腦的定時關機))
當然這種方法的缺點也很明顯:限操作系統(tǒng)-因為是微軟的東西只能Windows下,限瀏覽器-因為ActiveX也只能在IE瀏覽器下。所以局限性比較大
實現(xiàn)過程:
1.編輯『word小票模板』,要用到word中『書簽』這個工具(通過『書簽』的定位,js就可以操作word在『書簽』指定的位置進行 修改、寫入內(nèi)容)
2.在js對word模板進行 打開、賦值、打印操作
一、編輯『word小票模板』
1.以word2007為例,首先排好大致的樣式
2.用『書簽』進行標記定位
選中要添加書簽的文字區(qū)域-點擊『書簽』-填寫書簽名-點擊『添加』-『定位』可以查看此書簽的位置
二、js
直接上源代碼吧:
<input type="button" value="toPrinter " onclick="viewToWord();" />
 1 function viewToWord() {
 2         //當前時間
 3         var Time;
 4         var today = new Date();
 5         Time = today.toLocaleString();
 6         
 7         try {  
 8             // 創(chuàng)建ActiveXObject對象  
 9             wdapp = new ActiveXObject("Word.Application");  
10         }  
11         catch (e) {  
12             console.log("無法調(diào)用Office對象,!", e)  
13             wdapp = null;  
14             return;  
15         }
16         wdapp.Documents.Open("f:\PrinterTemplate1.doc"); //打開本地(客戶端)word模板
17         wddoc = wdapp.ActiveDocument;  
18         wddoc.Bookmarks("OrderNum").Range.Text = "201509080959" + "
";
19         wddoc.Bookmarks("OrderName").Range.Text = "鄭斌" + "
";  
20         wddoc.Bookmarks("OrderAddress").Range.Text = "www.cnblogs.com/zhengbin" + "
";
21         wddoc.Bookmarks("OrderPhoneNum").Range.Text = "QQ:1746788394" + "
";
22         wddoc.Bookmarks("OrderDaocanTime").Range.Text = "10:00-11:00" + "
";
23         wddoc.Bookmarks("OrderTime").Range.Text = "09-08 10:15";
24         //添加表格
25         var myTable = wddoc.Tables.Add (wddoc.Bookmarks("OrderCart").Range,3,3);//(賦值區(qū)域,行數(shù),列數(shù))
26         //隱藏邊框
27         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++){//行
35             //第一列
36             with (myTable.Cell(i,1).Range){
37                 font.Size = 8;//調(diào)整字體大小
38                 InsertAfter("博客園"+i);//插入的內(nèi)容
39             }
40             //第二列
41             with(myTable.Cell(i,2).Range){
42                 font.Size = 8;
43                 InsertAfter(i);
44                 ParagraphFormat.Alignment=1;//表格內(nèi)容對齊:0-左對齊 1-居中 2-右對齊
45             }
46             //第三列
47             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
54         wddoc.Bookmarks("TotalPrice").Range.Text = "無價" + "
";
55         wddoc.Bookmarks("Time").Range.Text = Time; 
56         //wdapp.ActiveDocument.ActiveWindow.View.Type = 1;
57         wdapp.visible = false; //word模板是否可見  
58         wdapp.Application.Printout(); //調(diào)用自動打印功能  
59         wdapp.quit();
60         wdapp = null;  
61     }
最后:
注意:
首先要調(diào)整好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
總結(jié)
以上是生活随笔為你收集整理的【JS】通过JS实现超市小票打印功能——ActiveX控件的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
                            
                        - 上一篇: Kanzi Studio中的概念
 - 下一篇: Spark SQL读写方法