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) {
/*跳過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;
}
以上所述是小編給大家介紹的一種基於浏覽器的自動小票機打印實現方案(js版)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！