一种基于浏览器的自动小票机打印实现方案(js版)
1、使用场景
用户在浏览器做了某项操作后，自动打印小票。
2、测试方式
2.1JavaScript实现
尝试了很多办法，最终都会出现一个弹出框，让用户选择打印机。不符合我们需求。
2.2lodop
功能比较强大，但是收费的。暂不考虑。
2.3PAZU
功能也很强大，免费许可。非常赞！
详情：http://www.4fang.net/article/tech/pazu_tprinter.html
实现过程：
2.3.1打印详情页面
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>小票</title>
<style>
body{
margin:0px;
padding:0px;
font-size:11px;
}
hr{width:100%;border:1pxdashedblack;}
/*****************
小票
*****************/
.table.title{
font-size:14px;
}
.table{
width:100%;
}
.table.left{
text-align:right;
}
</style>
</head>
<body>
<tableclass="table">
<tr>
<tdalign="center"class="title">ABC学校</td>
</tr>
<tr>
<tdalign="center">小票</td>
</tr>
<tr>
<td><hrsize="1"/></td>
</tr>
</table>
<tableclass="table">
<caption>
<colstyle="width:40%">
<colstyle="width:60%">
</caption>
<tbody>
<tr>
<tdclass="left">签到时间：</td>
<tdclass="right">2015年10月19日15：30</td>
</tr>
<tr>
<tdclass="left">学员姓名：</td>
<tdclass="right">周深</td>
</tr>
<tr>
<tdclass="left">班级：</td>
<tdclass="right">少儿班</td>
</tr>
<tr>
<tdclass="left">学校名称：</td>
<tdclass="right">ABC学院</td>
</tr>
<tr>
<tdcolspan="2"><hrsize="1"/></td>
</tr>
</tbody>
</table>
<tableclass="table">
<caption>
<colstyle="width:40%">
<colstyle="width:60%">
</caption>
<tbody>
<tr>
<tdclass="left">卡信息：</td>
<tdclass="right">季卡/60次</td>
</tr>
<tr>
<tdclass="left">卡余额：</td>
<tdclass="right">32次</td>
</tr>
<tr>
<tdclass="left">到期日期：</td>
<tdclass="right">无限期</td>
</tr>
<tr>
<tdclass="left">激活日期：</td>
<tdclass="right">2015-09-08</td>
</tr>
<tr>
<tdcolspan="2"><hrsize="1"/></td>
</tr>
</tbody>
</table>
<tableclass="table">
<tr>
<tdalign="center">感谢您的惠顾！<br/>请保管好小票，如有问题，请出示，谢谢！</td>
</tr>
<tr>
<tdalign="center"><imgsrc="code.png"class="code"/><br/>扫码查详情</td>
</tr>
</table>
</body>
</html>
2.3.2业务页面
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <headlang="en"> <metacharset="UTF-8"> <title></title> <scriptsrc="printReceipt.js"></script> </head> <body> <iframeframeborder="0"scrolling="scrolling"src="receipt.html"name="myifrm"id="myifrm"style="height:0;width:323px;"> </iframe> <inputclass="p__"name="Button1"type="button"value="打印试试！"onclick="print(1);"style="width:301px"/> </body> <script> initPrintActiveX(); </script> </html>
2.3.3js引入
/**
*Createdbyheryon2016/7/25.
*/
functioninitPrintActiveX(){
vardiv_=document.createElement('div');
div_.style="display:none";
varobject_=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");
varparam_=document.createElement('param');
param_.setAttribute("name","License");
param_.setAttribute("value","2AE816BA3A24A9BA3F01162E7BF420F4");
object_.appendChild(param_);
div_.appendChild(object_);
document.getElementsByTagName("body")[0].appendChild(div_);
}
//预先选中的纸张
varstrDefaultPaper='A4';
//1.载入打印机和纸张列表
functioninit(){
listPrinters();
//listPapers();
//2.页面载入立即打印
//demo();
}
//列出所有的打印机
functionlistPrinters(){
varps=pazu.TPrinter.getPrinters();
//获得是一个以回车换行分隔的字符串
//alert(ps);
varpa=ps.split("\r\n");
for(vari=0;i<pa.length;i++){
//alert(pa[i]);
varOp=document.createElement("option");
Op.text=pa[i];
Op.value=pa[i];
try{
printers.add(Op);
}catch(ex){
alert(ex.message)
}
}
}
functionprint(num){
/*跳过IE打印选择提示*/
//默认打印机的名称设置为：GP-58120Series
varisPromtUser=false;
/*页面设置*/
varsPaper="A4";
//varsPrinter=printers.value;
varsPrinter="GP-58120Series";
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导出为OfficeEXCEL或者Word格式文件
//要指定打印那个Frame只要用javascript让那个Frame获得焦点就可以了
//注意：这种方式下是不能预览的，只能立即打印。否则预览看到的是整个网页，而不是指定的frame
window.frames['myifrm'].focus();
//pazu.TPrinter.doPreview();//打印预览
pazu.TPrinter.doPrint(isPromtUser);
}
String.prototype.trim=function(){
returnthis.replace(/(^\s*)|(\s*$)/g,"");
}
functionisNum(n){
if(isNaN(n))returnfalse;
returntrue;
}
以上所述是小编给大家介绍的一种基于浏览器的自动小票机打印实现方案(js版)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！