javaScript 连接打印机,打印小票的实例

要实现 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技术站

(0)
上一篇 2023年6月15日
下一篇 2023年6月15日

相关文章

  • JDBC连接MySQL5.7的方法

    JDBC是Java语言操作数据库的标准接口,而MySQL是目前最受欢迎的开源数据库之一。在本文中,我们将探讨如何使用JDBC连接MySQL 5.7数据库。 步骤1:下载MySQL JDBC驱动程序 首先,我们需要下载MySQL官方提供的JDBC驱动程序,从而能够在Java应用程序中访问MySQL 5.7数据库。你可以从以下链接下载最新的MySQL JDBC驱…

    Java 2023年6月16日
    00
  • Java线程休眠的5种方法

    Java线程休眠的5种方法 Java中的线程可以通过休眠来暂停一段时间。线程的休眠有5种方法,本文将详细介绍这5种方法,并给出代码示例。 方法一:使用Thread.sleep() Thread.sleep()是Java中比较常用的线程休眠方法。它可以将当前正在执行的线程休眠指定的时间,单位是毫秒。下面是使用Thread.sleep()方法的示例: publi…

    Java 2023年5月19日
    00
  • spring MVC实现简单登录功能

    Spring MVC实现简单登录功能攻略 Spring MVC是一种基于Java的Web框架,它提供了许多便捷的功能和工具,使得开发者可以更加高效地开发Web应用程序。其中,实现简单登录功能是Spring MVC中常用的一种技术,本文将详细讲解如何在Spring MVC中实现简单登录功能,并提供两个示例来说明如何实现这一过程。 步骤一:创建Spring MV…

    Java 2023年5月17日
    00
  • JSP组件commons-fileupload实现文件上传

    以下是使用JSP组件commons-fileupload实现文件上传的详细攻略: 环境准备 首先需要在项目中引入commons-fileupload组件,可以在Maven中添加以下依赖: <dependency> <groupId>commons-fileupload</groupId> <artifactId&gt…

    Java 2023年6月15日
    00
  • SpringMVC适配器模式作用范围介绍

    SpringMVC适配器模式作用范围介绍 在SpringMVC中,适配器模式是一个非常重要的设计模式,它可以帮助我们将不同类型的请求映射到不同的处理器方法上。本文将介绍适配器模式的作用范围,并提供两个示例说明。 适配器模式的作用范围 适配器模式的作用范围主要包括以下几个方面: 请求类型:适配器模式可以将不同类型的请求(如GET、POST、PUT、DELETE…

    Java 2023年5月17日
    00
  • SpringBoot集成Tomcat服务架构配置

    SpringBoot集成Tomcat服务架构配置的攻略包括以下几个步骤: 在pom.xml文件中添加Tomcat依赖,示例代码如下: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-…

    Java 2023年5月19日
    00
  • 一文搞懂MyBatis多数据源Starter实现

    一文搞懂MyBatis多数据源Starter实现 多数据源在一些应用场景下非常常见,MyBatis也提供了多数据源的支持。但是对于开发者来说,要手动实现多数据源的切换非常繁琐,而且容易出错。MyBatis多数据源Starter可以帮助我们自动配置多数据源并提供切换功能。本文将对MyBatis多数据源Starter的使用进行详细讲解。 步骤一:添加依赖 首先,…

    Java 2023年5月20日
    00
  • ASP.NET MVC页面重定向简单介绍

    下面我来介绍一下“ASP.NET MVC页面重定向简单介绍”的完整攻略。 一、什么是ASP.NET MVC页面重定向? ASP.NET MVC页面重定向是指在处理Web请求时将用户浏览器重定向到另一个URL的过程。在ASP.NET MVC中,可以使用Redirect和RedirectToAction方法来执行页面重定向。 二、使用Redirect方法进行页面…

    Java 2023年6月15日
    00
合作推广
合作推广
分享本页
返回顶部