Web API print
This commit is contained in:
76
index.html
76
index.html
@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user