Compare commits
6 Commits
87b17e3745
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| ce10a8faa0 | |||
| 71506f60c2 | |||
| de6410abb4 | |||
| 9d8f2df0a9 | |||
| 4d6cd64064 | |||
| 7be2dc2466 |
42
README.md
Normal file
42
README.md
Normal file
@ -0,0 +1,42 @@
|
||||
# Sticker Print Demo
|
||||
|
||||
## Zebra Browser Print
|
||||
|
||||
### Linux
|
||||
|
||||
- ne radi
|
||||
|
||||
### Windows
|
||||
|
||||
- instalirati [drivere](https://www.zebra.com/us/en/support-downloads/printers/desktop/gk420t.html)
|
||||
- instalirati [Browser Print](https://www.zebra.com/us/en/support-downloads/printer-software/by-request-software.html#browser-print)
|
||||
|
||||
## Web API
|
||||
|
||||
Potreban je Chrome ili Chrome based preglednik.
|
||||
|
||||
### Linux
|
||||
|
||||
- ne treba nikakvih posebnih akcija, radi out of box
|
||||
|
||||
### Windows
|
||||
|
||||
- deinstalirati Zebra driver ako je instaliran
|
||||
- instalirati [Zadig](https://zadig.akeo.ie) utility
|
||||
- pratiti [upute za instalaciju](https://stackoverflow.com/a/72469190/168187) drivera preko Zadiga
|
||||
|
||||
## Korisni linkovi
|
||||
|
||||
- [Zebra Programming Language](https://en.wikipedia.org/wiki/Zebra_Programming_Language)
|
||||
- [Labelary - ZPL preview](http://labelary.com/viewer.html)
|
||||
- [ZPL II Programming manual](https://www.zebra.com/content/dam/zebra_new_ia/en-us/manuals/printers/common/programming/zpl-zbi2-pm-en.pdf)
|
||||
- [zpl-image](https://github.com/metafloor/zpl-image) - convert image to GRF encoded image
|
||||
|
||||
### Browser Print SDK
|
||||
|
||||
> Developers can now quickly add USB or Network based printing support to their browser-based apps on Windows 7, Windows 10 and Mac OSX systems, when using Internet Explorer v11, Chrome or Safari. The source code and documentation that come with Browser Print make adding print capabilities simple and straightforward. The ability to perform print time status checking is also included. This solution greatly simplifies the task of adding network or USB-based printing to your application—saving developers time. Developers can also enhance their apps with printer status checking at print time.
|
||||
|
||||
- Windows 7, Windows 10 and Mac OSX
|
||||
- [Browser Print SDK](https://www.zebra.com/us/en/software/printer-software/browser-print.html)
|
||||
- [Browser Print](https://developer.zebra.com/products/printers/browser-print)
|
||||
- [Docs](https://www.zebra.com/content/dam/zebra_new_ia/en-us/solutions-verticals/product/Software/Printer%20Software/Link-OS/browser-print/zebra-browser-print-user-guide-v1-3-en-us.pdf)
|
||||
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);
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
97
index.html
97
index.html
@ -12,76 +12,91 @@
|
||||
<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>Sticker Print Demo</h1>
|
||||
<h1 class="mb-4">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 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="col">
|
||||
<div class="mb-3">
|
||||
<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>
|
||||
let selectedDevice = null;
|
||||
const ZEBRA_VENDOR_ID = 0xA5F;
|
||||
|
||||
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");
|
||||
// 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);
|
||||
})
|
||||
}
|
||||
|
||||
(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("sticker-70x35", options);
|
||||
document.querySelector(`textarea[name="zpl"]`).value = zpl;
|
||||
}
|
||||
|
||||
(async function () {
|
||||
createHooks();
|
||||
|
||||
getAvailablePrinters().then(devices => {
|
||||
if (devices) {
|
||||
selectedDevice = devices[0];
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
await createStickerZPL();
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
@ -149,8 +149,7 @@ function imageToGRF(imgUrl, options) {
|
||||
});
|
||||
}
|
||||
|
||||
async function createInternalStickerZPL(options) {
|
||||
const templateName = "sticker-70x35";
|
||||
async function createInternalStickerZPL(templateName, options) {
|
||||
const template = TEMPLATES[templateName];
|
||||
|
||||
const agencyLogoZPL = await imageToGRF(options.agencyLogoUrl, {
|
||||
@ -169,29 +168,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