一種基于瀏覽器的自動(dòng)小票機(jī)打印實(shí)現(xiàn)方案(js版)

更新時(shí)間：2016年07月26日 14:17:07 作者：53545436

這篇文章主要介紹了一種基于瀏覽器的自動(dòng)小票機(jī)打印實(shí)現(xiàn)方案(js版)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

1、使用場(chǎng)景

用戶在瀏覽器做了某項(xiàng)操作后，自動(dòng)打印小票。

2、測(cè)試方式

2.1 JavaScript實(shí)現(xiàn)

嘗試了很多辦法，最終都會(huì)出現(xiàn)一個(gè)彈出框，讓用戶選擇打印機(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é)校名稱：</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è)以回車換行分隔的字符串
// 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ī)的名稱設(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; //屬性 紙張大小名稱
pazu.TPrinter.printerName = sPrinter; //屬性 打印機(jī)名稱
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)站的支持！

您可能感興趣的文章: