JavaScript Barcode Generator (JsBarcode)

DirectCode | January 18, 2016 | E-commerce, JavaScript, jQuery | No Comments

JsBarcode is a JavaScript Barcode Generator, and a a simple way to create different types of 1D bar codes.

JavaScript Barcode Generator in action

The plugin uses Html5Canvas to generate draw the barcodes. This is a ready to use solution. Open source.

Supported types of barcodes:

– EAN (13)

– CODE128 (B or C)

– UPC-A

– CODE39

– ITF (Interleaved 2 of 5)

– ITF14

– Pharmacode

Setup and usage

As well as downloading the files and including them regularly, we can use Bower, to install and manage the library:

bower install jsbarcode –save

Setup:

<script src="JsBarcode.js"></script>

And then, include relevant library, for example CODE128.js to generate a CODE 128 barcode:

<script src="CODE128.js"></script>

Or simply include all-in-one script:

<script src="JsBarcode.all.min.js"></script>

Running the code

There are two ways of using the library.

With jQuery:

$(object).JsBarcode(string, options);

Pure JavaScript:

JsBarcode(object, string, options);

The parameters:

– string is the sring to be encoded to the barcode

– options is additional options put i an object (look below)

The default options are as follows:

{
    width:  2,
    height: 100,
    quite: 10,
    format: "CODE128",
    displayValue: false,
    fontOptions: "",
    font:"monospace",
    textAlign:"center",
    fontSize: 12,
    backgroundColor:"",
    lineColor:"#000"
}

Examples

HTML element:

<img id="barcode">

<canvas id="barcode"></canvas>

JS samples:


// I
$("#barcode").JsBarcode("Hi!");

// II
$("#barcode").JsBarcode("JS rulez!", {width: 1, height: 25});

// III
$("#barcode").JsBarcode("9780199532179",
  {format: "EAN", displayValue: true, fontSize: 20});

Demo:

http://lindell.me/JsBarcode