Use multiple printers in JavaScript

Question

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.

score 0 · Answer 1 · answered Aug 12 '23 at 13:43

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/qz-tray@2.2.2/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 499 license 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.

Use multiple printers in JavaScript

1 Answers1