Web API print

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

View File

@ -16,6 +16,7 @@
<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="./browser-print-api.js"></script>
</head>
<body>
@ -24,11 +25,16 @@
<div class="row">
<div class="col">
<button class="btn btn-success render">
Render ZPL
<p>
<button class="btn btn-success render">
Render ZPL
</button>
</p>
<button class="btn btn-success browser-printer-print">
Print using Browser Printer
</button>
<button class="btn btn-success print">
Print
<button class="btn btn-success web-api-print">
Print using Web API
</button>
</div>
<div class="col">
@ -43,45 +49,51 @@
<script>
let selectedDevice = null;
function createHooks() {
document.querySelector("button.render").addEventListener("click", (e) => {
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",
};
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");
document.querySelector("button.browser-printer-print").addEventListener("click", async (e) => {
const availableDevices = await getAvailablePrinters();
if (!availableDevices) {
console.error("No devices available");
return;
}
const selectedDevice = availableDevices[0];
const zpl = document.querySelector(`textarea[name="zpl"]`).value;
selectedDevice.send(zpl, undefined, (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();
getAvailablePrinters().then(devices => {
if (devices) {
selectedDevice = devices[0];
}
})
await createStickerZPL();
})();
</script>