103 lines
3.7 KiB
HTML
103 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sticker Print Demo</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
|
|
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
|
|
|
<script type="text/javascript" src="lib/zpl-image/pako.js"></script>
|
|
<script type="text/javascript" src="lib/zpl-image/zpl-image.js"></script>
|
|
|
|
<!-- js libs for BrowserPrinter only - not used for Web API printing -->
|
|
<script type="text/javascript" src="lib/zebra-browser-print/BrowserPrint-3.1.250.min.js"></script>
|
|
<script type="text/javascript" src="lib/zebra-browser-print/BrowserPrint-Zebra-1.1.250.min.js"></script>
|
|
<!-- end -->
|
|
|
|
<script src="./sticker-print.js"></script>
|
|
|
|
<!-- js libs for BrowserPrinter only - not used for Web API printing -->
|
|
<script src="./browser-print-api.js"></script>
|
|
<!-- end -->
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h1 class="mb-4">Sticker Print Demo</h1>
|
|
|
|
<div class="d-flex align-items-end">
|
|
<div class="w-100">
|
|
<label class="form-label">Rendered ZPL:</label>
|
|
<textarea class="form-control" name="zpl" rows="10"></textarea>
|
|
</div>
|
|
<div class="ms-3 flex-shrink-0 d-flex flex-column">
|
|
<button class="btn btn-success mb-3 browser-printer-print">
|
|
Print using Browser Printer
|
|
</button>
|
|
<button class="btn btn-success web-api-print">
|
|
Print using Web API
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
|
|
<script>
|
|
const ZEBRA_VENDOR_ID = 0xA5F;
|
|
|
|
function createHooks() {
|
|
// print using BrowserPrint
|
|
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);
|
|
})
|
|
});
|
|
|
|
// print using Web API
|
|
document.querySelector("button.web-api-print").addEventListener("click", async (e) => {
|
|
const device = await navigator.usb.requestDevice({ filters: [{ vendorId: ZEBRA_VENDOR_ID }] });
|
|
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);
|
|
|
|
await device.transferOut(1, data);
|
|
})
|
|
}
|
|
|
|
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("sticker-70x35", options);
|
|
document.querySelector(`textarea[name="zpl"]`).value = zpl;
|
|
}
|
|
|
|
(async function () {
|
|
createHooks();
|
|
await createStickerZPL();
|
|
})();
|
|
</script>
|
|
|
|
</html> |