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
-
Cube Slider – awesome CSS3 3D images slider
No Comments | Mar 24, 2018 -
jQuery file input plugin – styling with Bootstrap
No Comments | Jan 21, 2016 -
Animated circular progress bars with jQuery
No Comments | Dec 29, 2015 -
CSS3 fullscreen background image slideshow – a tutorial
No Comments | Mar 16, 2016