How to Print HTML page directly to multi printers using QZ Tray from an MVC app

Question

I'm trying QZ Tray from my MVC web app

• I want to print my already generated html page to several printers at once and directly from JS after defining the printers to print on

• The printer is printing a white paper with the file name header only on top

I have read the QZ Quick start and go with several pages of their documentation and tried this:

@{ Layout = null;}

<div>Print test Print test Print test Print test Print test Print test</div>

<script src="~/Scripts/jquery-3.5.1.min.js"></script>

<script src="~/Scripts/qz-tray.js"></script>

<script>
    $(document).ready(function (){
        qz.websocket.connect({ retries: 5, delay: 1 }).then(function () {
            return qz.printers.find("hp", { margins: 2, orientation: 'portrait' });              // Pass the printer name into the next Promise
        }).then(function (printer) {
            var config = qz.configs.create(printer, { scaleContent: false });       // Create a default config for the found printer
            var data = [{
                type: 'pixel',
                format: 'html',
                flavor: 'plain', // or 'plain' if the data is raw HTML
                data: 'http://localhost:27210/Home/View1',
                options: { pageWidth: 8.5 /* pageHeight: 11 */ }
            }]; return qz.print(config, data);
        }).catch(function (e) { console.error(e); });
    })
</script>

Answer 1

html page to several printers at once and directly

Since 2.1.0 (per qzind/tray/issues/161) you can provide your printers in an array to send the same job to each one.

// ...
var config1 = qz.configs.create("Printer 1", { scaleContent: false }); 
var config2 = qz.configs.create("Printer 2", { scaleContent: false });
var config3 = qz.configs.create("Printer 3", { scaleContent: false }); 
return qz.print([ config1, config2, config3 ], data);
// ...

white paper with the file name header only on top (comment) what's wrong on code that it didn't print html page content

If you're providing a URL, you should use flavor: file, not flavor: plain. If that still causes problems, ensure the page can be accessed from Incognito Mode/Private Browsing, since QZ Tray requires public access to HTML content.

// ...
            var data = [{
                type: 'pixel',
                format: 'html',
                flavor: 'file', // or 'plain' if the data is raw HTML
//              ^------ HERE
                data: 'http://localhost:27210/Home/View1',
                options: { pageWidth: 8.5 /* pageHeight: 11 */ }
            }]; return qz.print(config, data);
// ...