一種基于瀏覽器的自動(dòng)小票機(jī)打印實(shí)現(xiàn)方案(js版)
1、使用場(chǎng)景
用戶(hù)在瀏覽器做了某項(xiàng)操作后,自動(dòng)打印小票。
2、測(cè)試方式
2.1 JavaScript實(shí)現(xiàn)
嘗試了很多辦法,最終都會(huì)出現(xiàn)一個(gè)彈出框,讓用戶(hù)選擇打印機(jī)。不符合我們需求。
2.2 lodop
功能比較強(qiáng)大,但是收費(fèi)的。暫不考慮。
2.3 PAZU
功能也很強(qiáng)大,免費(fèi)許可。非常贊!
詳情:http://www.4fang.net/article/tech/pazu_tprinter.html
實(shí)現(xiàn)過(guò)程:
2.3.1 打印詳情頁(yè)面
<!doctype html> <html> <head> <meta charset="utf-8"> <title>小票</title> <style> body { margin: 0px; padding: 0px; font-size: 11px; } hr{width: 100%; border: 1px dashed black;} /***************** 小票 *****************/ .table .title{ font-size:14px; } .table{ width:100%; } .table .left{ text-align:right; } </style> </head> <body> <table class="table"> <tr> <td align="center" class="title">ABC學(xué)校</td> </tr> <tr> <td align="center">小票</td> </tr> <tr> <td><hr size="1" /></td> </tr> </table> <table class="table"> <caption> <col style="width:40%"> <col style="width:60%"> </caption> <tbody> <tr> <td class="left">簽到時(shí)間:</td> <td class="right">2015年10月19日 15:30</td> </tr> <tr> <td class="left">學(xué)員姓名:</td> <td class="right">周深</td> </tr> <tr> <td class="left">班級(jí):</td> <td class="right">少兒班</td> </tr> <tr> <td class="left">學(xué)校名稱(chēng):</td> <td class="right">ABC學(xué)院</td> </tr> <tr> <td colspan="2"><hr size="1" /></td> </tr> </tbody> </table> <table class="table"> <caption> <col style="width:40%"> <col style="width:60%"> </caption> <tbody> <tr> <td class="left">卡信息:</td> <td class="right">季卡/60次</td> </tr> <tr> <td class="left">卡余額:</td> <td class="right">32次</td> </tr> <tr> <td class="left">到期日期:</td> <td class="right">無(wú)限期</td> </tr> <tr> <td class="left">激活日期:</td> <td class="right">2015-09-08</td> </tr> <tr> <td colspan="2"><hr size="1" /></td> </tr> </tbody> </table> <table class="table"> <tr> <td align="center">感謝您的惠顧!<br/>請(qǐng)保管好小票,如有問(wèn)題,請(qǐng)出示,謝謝!</td> </tr> <tr> <td align="center"><img src="code.png" class="code"/><br/>掃碼查詳情</td> </tr> </table> </body> </html>
2.3.2 業(yè)務(wù)頁(yè)面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="printReceipt.js"></script> </head> <body> <iframe frameborder="0" scrolling="scrolling" src="receipt.html" name="myifrm" id="myifrm" style="height: 0;width: 323px;"> </iframe> <input class="p__" name="Button1" type="button" value="打印試試!" onclick="print(1);" style="width: 301px"/> </body> <script> initPrintActiveX(); </script> </html>
2.3.3 js引入
/** * Created by hery on 2016/7/25. */ function initPrintActiveX(){ var div_ = document.createElement('div'); div_.style="display:none"; var object_=document.createElement('object'); object_.setAttribute("classid","clsid:AF33188F-6656-4549-99A6-E394F0CE4EA4"); object_.setAttribute("codebase","http://www.4Fang.net/4ff/sc_setup.exe"); object_.setAttribute("id","pazu"); object_.setAttribute("name","pazu"); var param_=document.createElement('param'); param_.setAttribute("name","License"); param_.setAttribute("value","2AE816BA3A24A9BA3F01162E7BF420F4"); object_.appendChild(param_); div_.appendChild(object_); document.getElementsByTagName("body")[0].appendChild(div_); } //預(yù)先選中的紙張 var strDefaultPaper = 'A4'; //1.載入打印機(jī)和紙張列表 function init() { listPrinters(); //listPapers(); //2.頁(yè)面載入立即打印 //demo(); } //列出所有的打印機(jī) function listPrinters() { var ps = pazu.TPrinter.getPrinters(); //獲得是一個(gè)以回車(chē)換行分隔的字符串 // alert(ps); var pa = ps.split("\r\n"); for (var i = 0; i < pa.length; i++) { //alert(pa[i]); var Op = document.createElement("option"); Op.text = pa[i]; Op.value = pa[i]; try { printers.add(Op); } catch (ex) { alert(ex.message) } } } function print(num) { /*跳過(guò)IE打印選擇提示*/ //默認(rèn)打印機(jī)的名稱(chēng)設(shè)置為:GP-58120 Series var isPromtUser = false; /*頁(yè)面設(shè)置*/ var sPaper = "A4"; // var sPrinter = printers.value; var sPrinter = "GP-58120 Series"; pazu.TPrinter.marginTop = 1; //屬性 上邊距 pazu.TPrinter.marginBottom = 14; //屬性 下邊距 pazu.TPrinter.marginLeft = 7; //屬性 左邊距 pazu.TPrinter.marginRight = 8; //屬性 右邊距 pazu.TPrinter.footer = ""; //屬性 頁(yè)腳 pazu.TPrinter.header = ""; //屬性 頁(yè)眉 pazu.TPrinter.orientation = 1; //屬性 整型:紙張方向 1=縱向 2=橫向 pazu.TPrinter.paperName = sPaper; //屬性 紙張大小名稱(chēng) pazu.TPrinter.printerName = sPrinter; //屬性 打印機(jī)名稱(chēng) pazu.TPrinter.isPrintBackground = false; //屬性 是否打印背景 true / false pazu.TPrinter.isZoomOutToFit = true; //屬性 是否縮放以適應(yīng)大小打印 true / false //pazu.TPrinter.printTemplate = sPT; //屬性 打印模板的URL pazu.TPrinter.copies = num; //屬性 打印份數(shù) //pazu.TPrinter.range = range.value; //屬性 頁(yè)面范圍 pazu.TPrinter.isCopyByCopy = false; //屬性 是否整份打印結(jié)束后再打印下一份 true / false //pazu.TPrinter.getDefaultPrinter //方法 獲得默認(rèn)打印機(jī)的對(duì)象 //pazu.TPrinter.printToDefaultPrinter //方法 把要打印的字符串輸送到默認(rèn)打印機(jī)(配合getDefaultPrinter 使用) //pazu.TPrinter.getPaperForms //方法 返回所有紙張格式的列表,以vbCrlf 分割 //pazu.TPrinter.getPrinters //方法 返回一個(gè)打印機(jī)列表,以vbCrlf 分割 //pazu.TPrinter.createPaper //方法 按指定的寬度和高度創(chuàng)建自定義紙張 請(qǐng)看示例 //pazu.TPrinter.doPrint //方法 執(zhí)行打印 //pazu.TPrinter.doPrint_ //方法 執(zhí)行打印但是不進(jìn)行頁(yè)面參數(shù)設(shè)置 //pazu.TPrinter.doPreview //方法 打印預(yù)覽 //pazu.TPrinter.doPageSetup //方法 執(zhí)行頁(yè)面參數(shù)的設(shè)置 //pazu.TPrinter.showPageSetup //方法 彈出頁(yè)面設(shè)置窗口 //pazu.TPrinter.writeHTMLtoOfficeFile 方法 把HTML導(dǎo)出為Office EXCEL或者 Word格式文件 //要指定打印那個(gè)Frame只要用javascript 讓那個(gè)Frame獲得焦點(diǎn)就可以了 //注意:這種方式下是不能預(yù)覽的,只能立即打印。否則預(yù)覽看到的是整個(gè)網(wǎng)頁(yè),而不是指定的frame window.frames['myifrm'].focus(); //pazu.TPrinter.doPreview();//打印預(yù)覽 pazu.TPrinter.doPrint(isPromtUser); } String.prototype.trim = function () { return this.replace(/(^\s*)|(\s*$)/g, ""); } function isNum(n) { if (isNaN(n))return false; return true; }
以上所述是小編給大家介紹的一種基于瀏覽器的自動(dòng)小票機(jī)打印實(shí)現(xiàn)方案(js版),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
iframe實(shí)現(xiàn)與父頁(yè)面跨域隔離的JavaScript?代碼沙箱
這篇文章主要介紹了使用iframe實(shí)現(xiàn)與父頁(yè)面跨域隔離的JavaScript代碼沙箱,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05js+css實(shí)現(xiàn)三級(jí)導(dǎo)航菜單
這篇文章主要為大家詳細(xì)介紹了js+css實(shí)現(xiàn)三級(jí)導(dǎo)航菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08javascript中eval和with用法實(shí)例總結(jié)
這篇文章主要介紹了javascript中eval和with用法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript中eval和with的功能、用法與相關(guān)注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11利用JS輕松實(shí)現(xiàn)獲取表單數(shù)據(jù)
本文主要介紹了利用JS輕松實(shí)現(xiàn)獲取表單數(shù)據(jù)。方法有別于原始的做法,大家可以試著找原始做法與本文所說(shuō)方法之間的區(qū)別。有興趣的朋友可以看下,希望對(duì)大家有所幫助2016-12-12Knockout結(jié)合Bootstrap創(chuàng)建動(dòng)態(tài)UI實(shí)現(xiàn)產(chǎn)品列表管理
這篇文章主要為大家詳細(xì)介紹了Knockout結(jié)合Bootstrap創(chuàng)建動(dòng)態(tài)UI實(shí)現(xiàn)產(chǎn)品列表管理,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09詳解webpack 打包文件體積過(guò)大解決方案(code splitting)
這篇文章主要介紹了webpack 打包文件體積過(guò)大解決方案(code splitting),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04