88 lines
2.8 KiB
HTML
88 lines
2.8 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>
|
|
|
|
<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>
|
|
|
|
<script src="./sticker-print.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h1>Sticker Print Demo</h1>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<button class="btn btn-success render">
|
|
Render ZPL
|
|
</button>
|
|
<button class="btn btn-success print">
|
|
Print
|
|
</button>
|
|
</div>
|
|
<div class="col">
|
|
<div class="mb-3">
|
|
<label class="form-label">Rendered ZPL:</label>
|
|
<textarea class="form-control" name="zpl" rows="10"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
|
|
<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");
|
|
}
|
|
const zpl = document.querySelector(`textarea[name="zpl"]`).value;
|
|
selectedDevice.send(zpl, undefined, (error) => {
|
|
console.error(error);
|
|
})
|
|
});
|
|
|
|
}
|
|
|
|
(function () {
|
|
createHooks();
|
|
|
|
getAvailablePrinters().then(devices => {
|
|
if (devices) {
|
|
selectedDevice = devices[0];
|
|
|
|
}
|
|
})
|
|
|
|
})();
|
|
</script>
|
|
|
|
</html> |