Intis/zebra-sticker-print
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Web API print

Browse Source
This commit is contained in:
Eden Kirin
2023-08-02 11:04:00 +02:00
parent 87b17e3745
commit 7be2dc2466
3 changed files with 74 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
browser-print-api.js Normal file
View File

@ -0,0 +1,30 @@
function getAvailablePrinters() {
return new Promise((resolve, reject) => {
const devices = [];
BrowserPrint.getDefaultDevice(
"printer",
(device) => {
devices.push(device);
const defaultDevice = device;
BrowserPrint.getLocalDevices((deviceList) => {
deviceList?.printer.forEach(
(device) => {
if (!defaultDevice || device.uid != defaultDevice.uid) {
devices.push(device);
}
},
(error) => {
reject("Error getting local devices");
},
"printer"
);
resolve(devices);
});
},
(error) => {
reject(error);
}
);
});
}

76
index.html
View File

@ -16,6 +16,7 @@
<script type="text/javascript" src="lib/zebra-browser-print/BrowserPrint-Zebra-1.1.250.min.js"></script> <script type="text/javascript" src="lib/zebra-browser-print/BrowserPrint-Zebra-1.1.250.min.js"></script>
<script src="./sticker-print.js"></script> <script src="./sticker-print.js"></script>
<script src="./browser-print-api.js"></script>
</head> </head>
<body> <body>
@ -24,11 +25,16 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<button class="btn btn-success render"> <p>
Render ZPL <button class="btn btn-success render">
Render ZPL
</button>
</p>
<button class="btn btn-success browser-printer-print">
Print using Browser Printer
</button> </button>
<button class="btn btn-success print"> <button class="btn btn-success web-api-print">
Print Print using Web API
</button> </button>
</div> </div>
<div class="col"> <div class="col">
@ -43,45 +49,51 @@
<script> <script>
let selectedDevice = null;
function createHooks() { function createHooks() {
document.querySelector("button.render").addEventListener("click", (e) => { document.querySelector("button.browser-printer-print").addEventListener("click", async (e) => {
const options = { const availableDevices = await getAvailablePrinters();
qrCodeUrl: "/assets/qr-code-example.jpeg", if (!availableDevices) {
agencyLogoUrl: "/assets/agenzia-entrate-logo-mono.png", console.error("No devices available");
companyName: "Vandelay Industries", return;
machineModel: "Model XL-123",
masterSystemId: "master-system-id",
extMasterSystemId: "ext-msid",
};
createInternalStickerZPL(options).then(zpl => {
document.querySelector(`textarea[name="zpl"]`).value = zpl;
});
});
document.querySelector("button.print").addEventListener("click", (e) => {
if (!selectedDevice) {
console.error("Device not selected");
} }
const selectedDevice = availableDevices[0];
const zpl = document.querySelector(`textarea[name="zpl"]`).value; const zpl = document.querySelector(`textarea[name="zpl"]`).value;
selectedDevice.send(zpl, undefined, (error) => { selectedDevice.send(zpl, undefined, (error) => {
console.error(error); console.error(error);
}) })
}); });
document.querySelector("button.web-api-print").addEventListener("click", async (e) => {
let device = await navigator.usb.requestDevice({ filters: [{ vendorId: 0xA5F }] });
await device.open();
await device.selectConfiguration(1);
await device.claimInterface(0);
const zpl = document.querySelector(`textarea[name="zpl"]`).value;
const encoder = new TextEncoder();
const data = encoder.encode(zpl);
const res = await device.transferOut(1, data);
})
} }
(function () { async function createStickerZPL() {
const options = {
qrCodeUrl: "/assets/qr-code-example.jpeg",
agencyLogoUrl: "/assets/agenzia-entrate-logo-mono.png",
companyName: "Vandelay Industries",
machineModel: "Model XL-123",
masterSystemId: "master-system-id",
extMasterSystemId: "ext-msid",
};
const zpl = await createInternalStickerZPL(options);
document.querySelector(`textarea[name="zpl"]`).value = zpl;
}
(async function () {
createHooks(); createHooks();
await createStickerZPL();
getAvailablePrinters().then(devices => {
if (devices) {
selectedDevice = devices[0];
}
})
})(); })();
</script> </script>

26
sticker-print.js
View File

@ -169,29 +169,3 @@ async function createInternalStickerZPL(options) {
...options, ...options,
}); });
} }
function getAvailablePrinters() {
return new Promise((resolve, reject) => {
const devices = [];
BrowserPrint.getDefaultDevice("printer", device => {
devices.push(device);
const defaultDevice = device;
BrowserPrint.getLocalDevices(deviceList => {
//console.log(deviceList)
deviceList.printer.forEach(device => {
if (!defaultDevice || device.uid != defaultDevice.uid) {
devices.push(device);
}
}, error => {
reject("Error getting local devices");
}, "printer");
resolve(devices);
});
}, error => {
reject(error);
})
})
}