一种基于浏览器的自动小票机打印实现方案(js版

用户在浏览器做了某项操作后,自动打印小票。

2、测试方式

2.1 JavaScript实现

尝试了很多办法,最终都会出现一个弹出框,让用户选择打印机。不符合我们需求。

2.2 lodop

功能比较强大,但是收费的。暂不考虑。

2.3 PAZU

功能也很强大,免费许可。非常赞!

详情:

实现过程:

2.3.1 打印详情页面

<!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> <tr> <td>ABC学校</td> </tr> <tr> <td>小票</td> </tr> <tr> <td><hr size="1" /></td> </tr> </table> <table> <caption> <col> <col> </caption> <tbody> <tr> <td>签到时间:</td> <td>2015年10月19日 15:30</td> </tr> <tr> <td>学员姓名:</td> <td>周深</td> </tr> <tr> <td>班级:</td> <td>少儿班</td> </tr> <tr> <td>学校名称:</td> <td>ABC学院</td> </tr> <tr> <td colspan="2"><hr size="1" /></td> </tr> </tbody> </table> <table> <caption> <col> <col> </caption> <tbody> <tr> <td>卡信息:</td> <td>季卡/60次</td> </tr> <tr> <td>卡余额:</td> <td>32次</td> </tr> <tr> <td>到期日期:</td> <td>无限期</td> </tr> <tr> <td>激活日期:</td> <td>2015-09-08</td> </tr> <tr> <td colspan="2"><hr size="1" /></td> </tr> </tbody> </table> <table> <tr> <td>感谢您的惠顾!<br/>请保管好小票,如有问题,请出示,谢谢!</td> </tr> <tr> <td><img src="https://www.jb51.net/code.png"/><br/>扫码查详情</td> </tr> </table> </body> </html>

2.3.2 业务页面

<!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="https://www.jb51.net/printReceipt.js"></script> </head> <body> <iframe frameborder="0" scrolling="scrolling" src="https://www.jb51.net/receipt.html"> </iframe> <input type="button" value="打印试试!"/> </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_); } //预先选中的纸张 var strDefaultPaper = 'A4'; //1.载入打印机和纸张列表 function init() { listPrinters(); //listPapers(); //2.页面载入立即打印 //demo(); } //列出所有的打印机 function listPrinters() { var ps = pazu.TPrinter.getPrinters(); //获得是一个以回车换行分隔的字符串 // 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) { /*跳过IE打印选择提示*/ //默认打印机的名称设置为:GP-58120 Series var isPromtUser = false; /*页面设置*/ 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 = ""; //属性 页脚 pazu.TPrinter.header = ""; //属性 页眉 pazu.TPrinter.orientation = 1; //属性 整型:纸张方向 1=纵向 2=横向 pazu.TPrinter.paperName = sPaper; //属性 纸张大小名称 pazu.TPrinter.printerName = sPrinter; //属性 打印机名称 pazu.TPrinter.isPrintBackground = false; //属性 是否打印背景 true / false pazu.TPrinter.isZoomOutToFit = true; //属性 是否缩放以适应大小打印 true / false //pazu.TPrinter.printTemplate = sPT; //属性 打印模板的URL pazu.TPrinter.copies = num; //属性 打印份数 //pazu.TPrinter.range = range.value; //属性 页面范围 pazu.TPrinter.isCopyByCopy = false; //属性 是否整份打印结束后再打印下一份 true / false //pazu.TPrinter.getDefaultPrinter //方法 获得默认打印机的对象 //pazu.TPrinter.printToDefaultPrinter //方法 把要打印的字符串输送到默认打印机(配合getDefaultPrinter 使用) //pazu.TPrinter.getPaperForms //方法 返回所有纸张格式的列表,以vbCrlf 分割 //pazu.TPrinter.getPrinters //方法 返回一个打印机列表,以vbCrlf 分割 //pazu.TPrinter.createPaper //方法 按指定的宽度和高度创建自定义纸张 请看示例 //pazu.TPrinter.doPrint //方法 执行打印 //pazu.TPrinter.doPrint_ //方法 执行打印但是不进行页面参数设置 //pazu.TPrinter.doPreview //方法 打印预览 //pazu.TPrinter.doPageSetup //方法 执行页面参数的设置 //pazu.TPrinter.showPageSetup //方法 弹出页面设置窗口 //pazu.TPrinter.writeHTMLtoOfficeFile 方法 把HTML导出为Office EXCEL或者 Word格式文件 //要指定打印那个Frame只要用javascript 让那个Frame获得焦点就可以了 //注意:这种方式下是不能预览的,只能立即打印。否则预览看到的是整个网页,而不是指定的frame window.frames['myifrm'].focus(); //pazu.TPrinter.doPreview();//打印预览 pazu.TPrinter.doPrint(isPromtUser); } String.prototype.trim = function () { return this.replace(/(^\s*)|(\s*$)/g, ""); } function isNum(n) { if (isNaN(n))return false; return true; }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzxpgp.html