要实现 JavaScript 连接打印机,打印小票的功能,可以借助 JavaScript 打印插件JSPrintManager。
JSPrintManager 是一个完全跨平台和打印技术无关的 JavaScript 打印客户端(打印机驱动程序),可通过扩展 Web 端点管理打印机及其设置,生成和打印 ZPL、EPL、ESC/POS、HTML、PDF、PNG、JPEG、GIF、TIFF、TXT 等格式的打印工作。
下面是实现“javaScript 连接打印机,打印小票”的攻略:
步骤一:引入JSPrintManager插件
在HTML页面的
标签中嵌入以下代码:<!--加载JSPrintManager.js文件及它的相关依赖项-->
<script src="js/numeral.min.js"></script>
<script src="js/jQuery.min.js"></script>
<script src="js/JSPrintManager.js"></script>
步骤二:设置打印机
在 JavaScript 中添加以下代码:
var myPrinter = null;
// 打印机设置
function doPrinterSettings() {
// 确定选择的打印机名称,可在页面中选择
var printerName = $("#cmbInstalledPrinters").val();
if (printerName === "") {
alert("请选择打印机!");
return;
}
myPrinter = new JSPM.ClientPrint(myPrinters);
myPrinter.clientPrinter = new JSPM.DefaultPrinter(printerName);
myPrinter.sendToClient();
}
步骤三:生成小票
在 JavaScript 中添加以下代码:
// 生成小票
function doPrint() {
if (myPrinter === null) {
alert("请先选择打印机!");
return;
}
// 生成小票内容
var mainContent = "<div><h4>小票标题</h4></div>";
mainContent += "<div>顾客:张三 先生</div>";
mainContent += "<div>桌号:3</div>";
mainContent += "<div>订单号:16095656</div>";
mainContent += "<div>订单金额:100元</div>";
var job = new JSPM.PrintJob();
job.clientPrinter = myPrinter.clientPrinter;
var htmlContent = "<!DOCTYPE html>" +
"<html>" +
"<head>" +
"<title>小票打印</title>" +
"<link rel='stylesheet' href='css/bootstrap.min.css'>" +
"</head>" +
"<body>" +
mainContent +
"</body>" +
"</html>";
job.content.push(new JSPM.PrintContent.RawHTML(htmlContent));
// 同步打印
job.sendToClient();
}
以上是一个简单的示例,具体生成小票内容可以根据实际需要修改。
示例1:最简单的小票生成代码:
var myPrinter = null;
function doPrint() {
if (myPrinter === null) {
alert("请先选择打印机!");
return;
}
var job = new JSPM.PrintJob();
job.clientPrinter = myPrinter.clientPrinter;
var htmlContent = "<div><h1>Hello World!</h1></div>";
job.content.push(new JSPM.PrintContent.RawHTML(htmlContent));
job.sendToClient();
}
function doPrinterSettings() {
var printerName = $("#cmbInstalledPrinters").val();
if (printerName === "") {
alert("请选择打印机!");
return;
}
myPrinter = new JSPM.ClientPrint(myPrinters);
myPrinter.clientPrinter = new JSPM.DefaultPrinter(printerName);
myPrinter.sendToClient();
}
示例2:将小票打印成 PDF 文件
var myPrinter = null;
function doPrint() {
if (myPrinter === null) {
alert("请先选择打印机!");
return;
}
var job = new JSPM.PrintJob();
job.clientPrinter = myPrinter.clientPrinter;
var htmlContent = "<div><h1>Hello World!</h1></div>";
// 将小票转为 PDF
var pdfContent = new JSPM.PrintContent.RawHTML(htmlContent);
pdfContent.format = JSPM.PrintContent.Format.PDF;
job.content.push(pdfContent);
// 异步打印
job.sendToClient().then(function (job) {
// 下载 PDF 文件
job.download();
});
}
function doPrinterSettings() {
var printerName = $("#cmbInstalledPrinters").val();
if (printerName === "") {
alert("请选择打印机!");
return;
}
myPrinter = new JSPM.ClientPrint(myPrinters);
myPrinter.clientPrinter = new JSPM.DefaultPrinter(printerName);
myPrinter.sendToClient();
}
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javaScript 连接打印机,打印小票的实例 - Python技术站