一種基於瀏覽器的自動小票機列印實現方案(js版)

阿新 • • 發佈：2019-01-21

1、使用場景

使用者在瀏覽器做了某項操作後，自動列印小票。

2、測試方式

嘗試了很多辦法，最終都會出現一個彈出框，讓使用者選擇印表機。不符合我們需求。

2.2 lodop

功能比較強大，但是收費的。暫不考慮。

2.3 PAZU

功能也很強大，免費許可。非常贊！

實現過程：

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>

<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版)

一種基於瀏覽器的自動小票機列印實現方案(js版)

一種基於OpenCV的三維重建實現方案

一種基於智慧卡登入Windows系統的實現方式

Magnostics Image-based Search of Interesting Matrix Views for Guided Network Exploration（一種基於網絡信息矩陣圖像的網絡探索方法）

一種基於python的人臉識別開源系統

一種基於NTC的控溫電路及軟件實現

一種基於 Numpy 的 TF-IDF 實現報告

【書摘】一種基於Git的版本管理方案

一種基於STM32的APP和BootLoader設計的方法

一種基於凸優化的影象去噪方法演示

怎麼通過郵箱發超大附件？介紹一種基於雲服務的方法

一種基於TLS的高階反除錯技術

一種基於TLS的高級反調試技術

NeuralTalk：一種基於Python+numpy使用語句描述影象的多模態遞迴神經網路的例程

【原始碼】NSGA - II：一種基於進化演算法的多目標優化函式

Bert-一種基於深度雙向Transform的語言模型預訓練策略

如何實現大檔案快速傳輸？分享一種基於UDP的解決方案

OCTMAP：一種基於八叉樹的高效概率三維對映框架

一種基於Android Bitmap和陣列操作的簡單卷積影象處理函式

一種基於二叉樹的int32排序演算法

一種基於瀏覽器的自動小票機列印實現方案(js版)

相關推薦