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

时间：2021-05-25

1、使用场景

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

2、测试方式

2.1 JavaScript实现

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

2.2 lodop

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

2.3 PAZU

功能也很强大，免费许可。非常赞！

详情：http://www.4fang.net/article/tech/pazu_tprinter.html

实现过程：

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 class="table"><tr><td align="center" class="title">ABC学校</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">签到时间：</td><td class="right">2015年10月19日 15：30</td></tr><tr><td class="left">学员姓名：</td><td class="right">周深</td></tr><tr><td class="left">班级：</td><td class="right">少儿班</td></tr><tr><td class="left">学校名称：</td><td class="right">ABC学院</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">无限期</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/>请保管好小票，如有问题，请出示，谢谢！</td></tr><tr><td align="center"><img src="code.png" class="code"/><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="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_);}//预先选中的纸张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) {//默认打印机的名称设置为：GP-58120 Seriesvar 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 / falsepazu.TPrinter.isZoomOutToFit = true; //属性 是否缩放以适应大小打印 true / false//pazu.TPrinter.printTemplate = sPT; //属性 打印模板的URLpazu.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获得焦点就可以了//注意：这种方式下是不能预览的，只能立即打印。否则预览看到的是整个网页，而不是指定的framewindow.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;}

以上所述是小编给大家介绍的一种基于浏览器的自动小票机打印实现方案(js版)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章