JavaScript Barcode Generator (JsBarcode)
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">
or
<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:
GitHub:
https://github.com/lindell/JsBarcode
See also:
Enjoy!
Related Posts
-
jQuery convert JSON to grid plugin – Columns
No Comments | Feb 29, 2016 -
jQuery Isotope plugin – filter & sort, responsive magical layouts
No Comments | Dec 9, 2015 -
ImageLens – A lens effect image zoom plugin
No Comments | Nov 25, 2015 -
JavaScript multiple date picker – jQuery multiPicker
No Comments | Feb 13, 2020