Open
Description
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:
Metadata
Metadata
Assignees
Labels
No labels