Merge branch 'web-api'
This commit is contained in:
30
browser-print-api.js
Normal file
30
browser-print-api.js
Normal 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
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>
|
||||
|
||||
|
||||
@ -169,29 +169,3 @@ async function createInternalStickerZPL(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);
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user