I need to print labels and receipts using a web app. Im using vanilla js. Before printing, I need a way to specify the printer in a js function. How best can I do that? or if I can have something that allows me to print that on the client side. I have found qz tray but I was without a USD 499 license there will be a lot of popups every time you send a print request.
1 Answer
Before printing, I need a way to specify the printer in a js function.
The basic syntax is:
var config = qz.configs.create("My POS Printer");
qz.websocket.connect().then(() => {
return qz.printers.find("My POS Printer");
}).then(printer => {
var config = qz.configs.create(printer /*, additional settings */);
var data = [ "Hello world\n\n\n\n\n" ];
qz.print(config, data);
})
If you're not sure what printer you want to use, you may add all printers to a drop-down instead:
<body onload="listPrinters()">
<label for="printers">Choose a printer:</label>
<select name="printers" id="printers"></select><br>
<button onclick="print()">Print</button>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/qz-tray.min.js"></script>
<script>
function listPrinters() {
connect().then(() => {
return qz.printers.find();
}).then(printers => {
var dropdown = document.getElementById("printers");
for(var i in printers) {
var option = document.createElement('option');
var name = document.createTextNode(printers[i]);
option.appendChild(name);
dropdown.add(option);
}
}).catch(err => {
console.error(err);
});
}
function print() {
connect().then(() => {
var printer = document.getElementById("printers").value;
var config = qz.configs.create(printer /*, additional options */);
var data = [ "Hello world from QZ Tray\n\n\n\n\n"];
return qz.print(config, data);
}).catch(err => {
console.error(err);
});
}
// connection wrapper
// - allows active and inactive connections to resolve regardless
// - try to connect once before firing the mimetype launcher
// - if connection fails, catch the reject, fire the mimetype launcher
// - after mimetype launcher is fired, try to connect 3 more times
function connect() {
return new Promise(function(resolve, reject) {
if (qz.websocket.isActive()) { // if already active, resolve immediately
resolve();
} else {
// try to connect once before firing the mimetype launcher
qz.websocket.connect().then(resolve, function retry() {
// if a connect was not successful, launch the mimetime, try 3 more times
window.location.assign("qz:launch");
qz.websocket.connect({ retries: 2, delay: 1 }).then(resolve, reject);
});
}
});
}
</script>
</body>
If you want to specify multiple printers, var config can be an array and it will loop over all printers specified.
I have found qz tray but I was without a
USD 499license there will be a lot of popups every time you send a print request.
For now, use the free key and cert provided in QZ Tray menu | Advanced | Site Manager | "+" | Create New.
In the meantime, if there's a price you can afford, reach out to QZ, they've been known to make special arrangements.
