Printing barcodes with QZ-Tray

Question

I'm trying to print barcode with QZ-Tray however I can't seem to find a good example for this, I've tried the code from here https://groups.google.com/forum/#!topic/qz-print/5ybFBj4S9LA where is starts with this code:

qz.appendHex('x1Bx40'); // init

However browser throws error that qz.appendHex is not a function etc.

Here's my code which can print, but just RAW data:

function printBarcode() {
    console.log("Print barcode");
    var config = getUpdatedConfig();
    var data = [
        'Raw Data\n',
        'More Raw Data\n',
        'Even More Raw Data\n'
    ];
    qz.print(config, data).catch(function(e) { console.error(e); });
}

What can I do for this code to print a barcode?

score 2 · Answer 1 · answered Oct 20 '16 at 16:31

Here's the code that worked for me:

// Print Barcode

    function textToBase64Barcode(text){
        var canvas = document.createElement("canvas");
        JsBarcode(canvas, text, {format: "CODE39"});
        return canvas.toDataURL("image/png");
    }
    function printBarcode() {
        console.log("Print barcode");
        var config = getUpdatedConfig();
        var value = $("#barcode_num").val(); // change this with barcode number
        var base64 = textToBase64Barcode(value);
        var barcodeImg = base64.split(",")[1];
        var printData = [
            {
                type: 'image',
                format: 'base64',
                data: barcodeImg
            }
        ];
        qz.print(config, printData).catch(displayError);
    }
    // End Print Barcode

Using JsBarcode javascript library.

score 2 · Accepted Answer · answered Oct 20 '16 at 17:16

qz.appendHex is not a function etc.

That's old code for QZ Tray 1.9. It's changed in 2.x.

The solution varies based on your printer's capabilities, but this should get you started. Please reference the ESC/P programming guide for further usage.

//barcode data
var code = '12345';

//convenience method
var chr = function(n) { return String.fromCharCode(n); };

var barcode = '\x1D' + 'h' + chr(80) +   //barcode height
    '\x1D' + 'f' + chr(0) +              //font for printed number
    '\x1D' + 'k' + chr(69) + chr(code.length) + code + chr(0); //code39

qz.websocket.connect().then(function() {
   var config = qz.configs.create("Epson TM88V");
   return qz.print(config, ['\n\n\n\n\n' + barcode + '\n\n\n\n\n']);
}).catch(function(err) { alert(err); });

Thanks for this @qz-support although we already have a working barcode printing code as stated in my answer, we will try this out, btw, can you also help with this other issue: http://stackoverflow.com/questions/40168017/suppress-localhost-wants-to-access-connected-printers-untrusted-website-when-a — quarks, Oct 21 '16 at 03:49

score 0 · Answer 3 · answered Jul 24 '19 at 08:50

he @xybrek or @tresf do you know how to combine your answer with ESC/POS raw-printing?

below using raw image, how about from JsBarcode? i've been using JsBarcode. I can create the barcode, but when i'm trying to combine it with raw data, is not working. My Qz version is 2.1

var config = qz.configs.create("Printer Name");

var data = [
   { type: 'raw', format: 'image', data: 'assets/img/image_sample_bw.png', options: { language: "ESCPOS", dotDensity: 'double' } },
   '\x1B' + '\x40',          // init
   '\x1B' + '\x61' + '\x31', // center align
   'Beverly Hills, CA  90210' + '\x0A',
   '\x0A',                   // line break
   'www.qz.io' + '\x0A',     // text and line break
   '\x0A',                   // line break
   '\x0A',                   // line break
   'May 18, 2016 10:30 AM' + '\x0A',
   '\x0A',                   // line break
   '\x0A',                   // line break    
   '\x0A',
   'Transaction # 123456 Register: 3' + '\x0A',
   '\x0A',
   '\x0A',
   '\x0A',
   '\x1B' + '\x61' + '\x30', // left align
   'Baklava (Qty 4)       9.00' + '\x1B' + '\x74' + '\x13' + '\xAA', //print special char symbol after numeric
   '\x0A',
   'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' + '\x0A',       
   '\x1B' + '\x45' + '\x0D', // bold on
   'Here\'s some bold text!',
   '\x0A',
   '\x1B' + '\x45' + '\x0A', // bold off
   '\x1D' + '\x21' + '\x11', // double font size
   'Here\'s large text!',
   '\x0A',
   '\x1D' + '\x21' + '\x00', // standard font size
   '\x1B' + '\x61' + '\x32', // right align
   '\x1B' + '\x21' + '\x30', // em mode on
   'DRINK ME',
   '\x1B' + '\x21' + '\x0A' + '\x1B' + '\x45' + '\x0A', // em mode off
   '\x0A' + '\x0A',
   '\x1B' + '\x61' + '\x30', // left align
   '------------------------------------------' + '\x0A',
   '\x1B' + '\x4D' + '\x31', // small text
   'EAT ME' + '\x0A',
   '\x1B' + '\x4D' + '\x30', // normal text
   '------------------------------------------' + '\x0A',
   'normal text',
   '\x1B' + '\x61' + '\x30', // left align
   '\x0A' + '\x0A' + '\x0A' + '\x0A' + '\x0A' + '\x0A' + '\x0A',
   '\x1B' + '\x69',          // cut paper (old syntax)
// '\x1D' + '\x56'  + '\x00' // full cut (new syntax)
// '\x1D' + '\x56'  + '\x30' // full cut (new syntax)
// '\x1D' + '\x56'  + '\x01' // partial cut (new syntax)
// '\x1D' + '\x56'  + '\x31' // partial cut (new syntax)
   '\x10' + '\x14' + '\x01' + '\x00' + '\x05',  // Generate Pulse to kick-out cash drawer**
                                                // **for legacy drawer cable CD-005A.  Research before using.
                                                // see also http://keyhut.com/popopen4.htm
];

qz.print(config, data).catch(function(e) { console.error(e); });

You should post this as a SO question instead of an answer and tag it with QZ — quarks, Jul 25 '19 at 05:50

Printing barcodes with QZ-Tray

3 Answers3