A Browser based Implementation Scheme of Automatic Receipt Printing Machine of js Version

2021-07-06 09:43:38
OfStack

1. Use scenarios

After the user has done an operation in the browser, the receipt will be printed automatically.

2. Test method

2.1 JavaScript Implementation

After trying many methods, a pop-up box will appear, allowing the user to select a printer. It doesn't meet our needs.

2.2 lodop

The function is more powerful, but it is charged. Don't consider it for the time being.

2.3 PAZU

The function is also very powerful, free license. Very good!

Details: http://www. 4fang. net/article/tech/pazu _ tprinter. html

Implementation process:

2.3. 1 Print Details page


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Receipt </title>
<style>
body {
margin: 0px;
padding: 0px;
font-size: 11px;
}
hr{width: 100%; border: 1px dashed black;}
/*****************
 Receipt 
*****************/
.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 Schools </td>
</tr>
<tr>
<td align="center"> Receipt </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"> Check-in time: </td>
<td class="right">2015 Year 10 Month 19 Day  15 : 30</td>
</tr>
<tr>
<td class="left"> Student name: </td>
<td class="right"> Charlie </td>
</tr>
<tr>
<td class="left"> Class: </td>
<td class="right"> Children's class </td>
</tr>
<tr>
<td class="left"> School name: </td>
<td class="right">ABC College </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"> Card information: </td>
<td class="right"> Season card /60 Times </td>
</tr>
<tr>
<td class="left"> Card balance: </td>
<td class="right">32 Times </td>
</tr>
<tr>
<td class="left"> Expiration Date: </td>
<td class="right"> Indefinite </td>
</tr>
<tr>
<td class="left"> Activation date: </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"> Thank you for your patronage! <br/> Please keep the receipt. If there is any problem, please show it. Thank you! </td>
</tr>
<tr>
<td align="center"><img src="code.png" class="code"/><br/> Scan code to check details </td>
</tr>
</table>
</body>
</html>

2.3. 2 Business page


<!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=" Try printing! " onclick="print(1);" style="width: 301px"/>
</body>
<script>
initPrintActiveX();
</script>
</html>

2.3. 3 js introduction


/**
* 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();
//获得是1个以回车换行分隔的字符串
// 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; //属性 是否整份打印结束后再打印下1份 true / false
//pazu.TPrinter.getDefaultPrinter //方法 获得默认打印机的对象
//pazu.TPrinter.printToDefaultPrinter //方法 把要打印的字符串输送到默认打印机（配合getDefaultPrinter 使用）
//pazu.TPrinter.getPaperForms //方法 返回所有纸张格式的列表，以vbCrlf 分割
//pazu.TPrinter.getPrinters //方法 返回1个打印机列表，以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;
}