Wiki - 2.1 Pixel Printing

Compatibility

Background

These features may not work with many raw printing devices, such as Zebra, Epson, Citizen printers. The data is sent in Pixel Printing format, which is more common for LaserJet or Deskjet printers. The ZDesigner driver from Zebra allows both raw and pixel printing.

To test these features without a physical printer, use a printer emulator

Contents

The following code can be used for Pixel Printing (formerly Postscript Printing) only. If you are unsure what Pixel Printing is, please refer to What is Pixel Printing?


HTML Printing

  1. HTML rendering is done via pure Java in using an embedded webkit browser

    var config = qz.configs.create("Printer Name");
    var data = [{
       type: 'pixel',
       format: 'html',
       flavor: 'file', // or 'plain' if the data is raw HTML
       data: 'assets/html_sample.html'
    }];
    qz.print(config, data).catch(function(e) { console.error(e); });
  2. An options parameter can be supplied to to signify things including margins, orientation, size, printer language, encoding, etc.

    var config = qz.configs.create("Printer Name", { margins: 2, orientation: 'landscape'});
    var data = [{
       type: 'pixel',
       format: 'html',
       flavor: 'file', // or 'plain' if the data is raw HTML
       data: 'assets/html_sample.html'
    }];
    qz.print(config, data).catch(function(e) { console.error(e); });
  3. A print parameter can be supplied to force a particular HTML page width

    var config = qz.configs.create("Printer Name");
    var data = [{
       type: 'pixel',
       format: 'html',
       flavor: 'file', // or 'plain' if the data is raw HTML
       data: 'assets/html_sample.html',
       options: { pageWidth: 8 }
    }];
    qz.print(config, data).catch(function(e) { console.error(e); });

JavaFX

PDF Printing

  1. How to print a PDF file

    var config = qz.configs.create("Printer Name");
    var data = [{ 
          type: 'pixel',
          format: 'pdf',
          flavor: 'file'
          data: 'assets/pdf_sample.pdf' 
    }];
    qz.print(config, data).catch(function(e) { console.error(e); });

Base64 PDF

  1. How to print a base64 PDF

    var config = qz.configs.create("Printer Name");
    var data = [{ 
       type: 'pixel',
       format: 'pdf',
       flavor: 'base64',
       data: 'Ck4KcTYwOQpRMjAzLDI2CkI1LDI2LDAsMUEsMyw3LDE1MixCLCIxMjM0IgpBMzEwLDI2LDAsMywx...' 
    }];
    qz.print(config, data).catch(function(e) { console.error(e); });

Image Printing

  1. How to print an image

    var config = qz.configs.create("Printer Name");
    var data = [{ 
      type: 'pixel',
      format: 'image',
      flavor: 'file',
      data: 'assets/img/image_sample.png' 
    }];
    qz.print(config, data).catch(function(e) { console.error(e); });
    • Shorthand: { type: 'pixel', data: 'assets/img/image_sample.png' } format and flavor will default to proper values

Base64 Image

  1. How to print a base64 image

    var config = qz.configs.create("Printer Name");
    var data = [{ 
       type: 'Pixel', 
       format: 'image',
       flavor: 'base64',
       data: 'AAAA...==' 
    }];
    qz.print(config, data).catch(function(e) { console.error(e); });

Advanced Printing

In this section, we will focus on creating a config with various options.

Page Size

A page size can be set using the config parameter size.

Dymo LabelWriter

The following example illustrates how to print a 2.25in x 1.25in label to a Dymo LabelWriter printer.

function printStuff() {
var config = qz.configs.create("Printer Name", {
   size: {width: 2.25, height: 1.25}, units: 'in', 
   colorType: 'grayscale', 
   interpolation: "nearest-neighbor" 
});

var data = [{ 
   type: 'pixel',
   format: 'image', //'pdf'
   flavor: 'file',
   data: 'assets/img/image_sample.png' // 'assets/pdf_sample.pdf'
}];

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

Margins

A config parameter margins can be provided to change the default page margins around the content.

var top = 0.25, right = 0.25, bottom = 0.25, left = 0.25;
var config = qz.configs.create("Printer Name", { margins: [ top, right, bottom, left] });
var data = [{ 
   type: 'pixel',
   format: 'image', //'pdf'
   flavor: 'file',
   data: 'assets/img/image_sample.png' // 'assets/pdf_sample.pdf'
}];
qz.print(config, data).catch(function(e) { console.error(e); });

Image Interpolation

A config parameter interpolation can be provided to change the pixel blending technique used when scaling an image.

var config = qz.configs.create("Printer Name", { interpolation: "nearest-neighbor" });
var data = [{ 
   type: 'pixel',
   format: 'image',
   flavor: 'file',
   data: 'assets/img/image_sample.png'
}];
qz.print(config, data).catch(function(e) { console.error(e); });

Density

Not providing a density will cause printing to use the default value for the printer. A config parameter density can be provided to change the DPI, dots/mm or dots/cm respectively.

var config = qz.configs.create("Printer Name", { units: "in", density: "600" });  // force 600dpi
var data = [{ 
   type: 'pixel',
   format: 'image', //'pdf'
   flavor: 'file',
   data: 'assets/img/image_sample.png' // 'assets/pdf_sample.pdf'
}];
qz.print(config, data).catch(function(e) { console.error(e); });

Custom Job Name

A config parameter jobName can be provided to change the name listed in the print queue.

var config = qz.configs.create("Printer Name", { jobName: "Receipt #123456" });
var data = [{ 
   type: 'pixel',
   format: 'image', //'pdf'
   flavor: 'file',
   data: 'assets/img/image_sample.png' // 'assets/pdf_sample.pdf'
}];
qz.print(config, data).catch(function(e) { console.error(e); });

Define Printer Tray

A config parameter printerTray can be provided to specify the destination tray or cartridge used for printing.

var config = qz.configs.create("Printer Name", { printerTray: 1 });
// or
config = var config = qz.configs.create("Printer Name", { printerTray: 'Tray 1' });
var data = [{ 
   type: 'pixel',
   format: 'image', //'pdf'
   flavor: 'file',
   data: 'assets/img/image_sample.png' // 'assets/pdf_sample.pdf'
}];
qz.print(config, data).catch(function(e) { console.error(e); });

Disable Autoscale

By default, content is automatically scaled to the destination page size. This is done as a courtesy to take out the guesswork in fitting the content to the media. A config parameter scaleContent can be forced to prevent auto-scaling.

var config = qz.configs.create("Printer Name", { scaleContent: "false" });  // do not stretch image to page width
var data = [{ 
   type: 'pixel',
   format: 'image', //'pdf'
   flavor: 'file',
   data: 'assets/img/image_sample.png' // 'assets/pdf_sample.pdf'
}];
qz.print(config, data).catch(function(e) { console.error(e); });

Rasterize

In some cases, rather than rasterizing print output, the vector version is preferred. This can have both quality as well as performance benefits during the printing process. A config parameter rasterize can be forced to prevent software rasterization prior to printing.

var config = qz.configs.create("Printer Name", { rasterize: "false" });  // use vector rendering
var data = [{ 
   type: 'pixel',
   format: 'image', //'pdf'
   flavor: 'file',
   data: 'assets/img/image_sample.png' // 'assets/pdf_sample.pdf'
}];
qz.print(config, data).catch(function(e) { console.error(e); });

Chaining Requests

Print requests can be chained together to print several documents at once, or to print to several different printers.

var config = qz.configs.create();
var data = [{ type: 'image', data: null, }];

data.data = 'assets/img/my_first_image.png';       ////// First document
config.setPrinter('First Printer');                ////// First printer
qz.print(config, data)

.then(function() {
   data.data = 'assets/img/my_second_image.png';   ////// Second document
   config.setPrinter('Second Printer');            ////// First printer
   return qz.print(config, data);
})

.then(function() {
   data.data = 'assets/img/my_third_image.png';    ////// Third document
   config.setPrinter('Third Printer');             ////// Third printer
   return qz.print(config, data);
})

.catch(function(e) {
   console.error(e);                // Exceptions throw all the way up the stack
});

Promise Loop

Looping multiple configs and multiple data objects is now built-in to the 2.1 API. More information here.

Edit this page