Skip to content

Can't use example from https://www.neodynamic.com/articles/How-to-print-raw-Zebra-ZPL-commands-from-Javascript/ on Angular 2+ project. #75

Open
@DAVIAMERICO242

Description

@DAVIAMERICO242

I'd like to make the example form https://www.neodynamic.com/articles/How-to-print-raw-Zebra-ZPL-commands-from-Javascript/
runs on my angular app.

I installed JSPM and jquery through npm CLI, below is my component;

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import $ from "jquery";
import JSPM from "jsprintmanager";

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit{
  title = 'rfid';


  ngOnInit(): void {
      this.configureRFIDPrinter();
  }

  configureRFIDPrinter(){
    JSPM.JSPrintManager.auto_reconnect = true;
    JSPM.JSPrintManager.start();
    if(JSPM.JSPrintManager.WS){
      JSPM.JSPrintManager.WS.onStatusChanged = ()=>{
        if (this.jspmWSStatus()){
          JSPM.JSPrintManager.getPrinters().then(function (myPrinters:unknown) {
              var options = '';
              let myPrintersTyped = myPrinters as any[];
              for (var i = 0; i < myPrintersTyped.length; i++) {
                  options += '<option>' + myPrintersTyped[i] + '</option>';
              }
              $('#installedPrinterName').html(options);
          });
        }
      }
    }
  }

  jspmWSStatus() {
    if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Open)
        return true;
    else if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Closed) {
        alert('JSPrintManager (JSPM) is not installed or not running! Download JSPM Client App from https://neodynamic.com/downloads/jspm');
        return false;
    }
    else if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Blocked) {
        alert('JSPM has blocked this website!');
        return false;
    }
    return false;
  }

  printRFID(){
    if(this.jspmWSStatus()){
      var cpj = new JSPM.ClientPrintJob();
      //Set Printer type (Refer to the help, there many of them!)
      if ($('#useDefaultPrinter').prop('checked')) {
          cpj.clientPrinter = new JSPM.DefaultPrinter();
      } else {
          cpj.clientPrinter = new JSPM.InstalledPrinter($('#installedPrinterName').val() as string);
      }
      //Set content to print...
      //Create Zebra ZPL commands for sample label
      var cmds =  "^XA";
      cmds += "^FO20,30^GB750,1100,4^FS";
      cmds += "^FO20,30^GB750,200,4^FS";
      cmds += "^FO20,30^GB750,400,4^FS";
      cmds += "^FO20,30^GB750,700,4^FS";
      cmds += "^FO20,226^GB325,204,4^FS";
      cmds += "^FO30,40^ADN,36,20^FDShip to:^FS";
      cmds += "^FO30,260^ADN,18,10^FDPart number #^FS";
      cmds += "^FO360,260^ADN,18,10^FDDescription:^FS";
      cmds += "^FO30,750^ADN,36,20^FDFrom:^FS";
      cmds += "^FO150,125^ADN,36,20^FDAcme Printing^FS";
      cmds += "^FO60,330^ADN,36,20^FD14042^FS";
      cmds += "^FO400,330^ADN,36,20^FDScrew^FS";
      cmds += "^FO70,480^BY4^B3N,,200^FD12345678^FS";
      cmds += "^FO150,800^ADN,36,20^FDMacks Fabricating^FS";
      cmds += "^XZ";
      cpj.printerCommands = cmds;
      //Send print job to printer!
      cpj.sendToClient();
    }
  }
}

But on app startup I get this error:

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions