javaScript 连接打印机,打印小票的实例-Java开发

要实现 JavaScript 连接打印机，打印小票的功能，可以借助 JavaScript 打印插件JSPrintManager。

要实现 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();
}

步骤一：引入JSPrintManager插件

步骤二：设置打印机

步骤三：生成小票

基础教程推荐