Introduction

JsBarcodeis abarcode generatorwritten in JavaScript. It supports multiple barcode formats and works in browsers and withNode.js.It hasno dependencieswhen it is used for the web but works withjQueryif you are into that.

Demo

Barcode Generator

Simple CodePen Demo

Settings CodePen Demo

Supported barcodes:

• CODE128
  • CODE128 (automatic mode switching)
  • CODE128 A/B/C (force mode)
• EAN
  • EAN-13
  • EAN-8
  • EAN-5
  • EAN-2
  • UPC (A)
  • UPC (E)
• CODE39
• ITF
  • ITF
  • ITF-14
• MSI
  • MSI10
  • MSI11
  • MSI1010
  • MSI1110
• Pharmacode
• Codabar

Examples for browsers:

First create a canvas (or image)

<svgid= "barcode"></svg>
<!-- or -->
<canvasid= "barcode"></canvas>
<!-- or -->
<imgid= "barcode"/>

Simple example:

JsBarcode("#barcode","Hi!");
// or with jQuery
$("#barcode").JsBarcode("Hi!");

Result:

Example with options:

JsBarcode("#barcode","1234",{
format:"pharmacode",
lineColor:"#0aa",
width:4,
height:40,
displayValue:false
});

Result:

More advanced use case:

JsBarcode("#barcode")
.options({font:"OCR-B"})// Will affect all barcodes
.EAN13("1234567890128",{fontSize:18,textMargin:0})
.blank(20)// Create space between the barcodes
.EAN5("12345",{height:85,textPosition:"top",fontSize:16,marginTop:15})
.render();

Result:

Or define the value and options in the HTML element:

Use anyjsbarcode-*ordata-*as attributes where*is any option.

<svgclass= "barcode"
jsbarcode-format= "upc"
jsbarcode-value= "123456789012"
jsbarcode-textmargin= "0"
jsbarcode-fontoptions= "bold">
</svg>

And then initialize it with:

JsBarcode(".barcode").init();

Result:

Retrieve the barcode values so you can render it any way you'd like

Pass in an object which will be filled with data.

constdata={};
JsBarcode(data,'text',{...options});

data will be filled with aencodingsproperty which has all the needed values. See wiki for an example of what data looks like.

Setup for browsers:

Step 1:

Download or get the CDN link to the script:

Name	Supported barcodes	Size (gzip)	CDN / Download
All	All the barcodes!	10.1 kB	JsBarcode.all.min.js
CODE128	CODE128 (auto and force mode)	6.2 kB	JsBarcode.code128.min.js
CODE39	CODE39	5.1 kB	JsBarcode.code39.min.js
EAN / UPC	EAN-13, EAN-8, EAN-5, EAN-2, UPC (A)	6.6 kB	JsBarcode.ean-upc.min.js
ITF	ITF, ITF-14	5 kB	JsBarcode.itf.min.js
MSI	MSI, MSI10, MSI11, MSI1010, MSI1110	5 kB	JsBarcode.msi.min.js
Pharmacode	Pharmacode	4.7 kB	JsBarcode.pharmacode.min.js
Codabar	Codabar	4.9 kB	JsBarcode.codabar.min.js

Step 2:

Include the script in your code:

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

Step 3:

You are done! Go generate some barcodes 😄

Bower and npm:

You can also useBowerornpmto install and manage the library.

bower install jsbarcode --save

npm install jsbarcode --save

Node.js:

With canvas:

varJsBarcode=require('jsbarcode');

// Canvas v1
varCanvas=require("canvas");
// Canvas v2
var{createCanvas}=require("canvas");

// Canvas v1
varcanvas=newCanvas();
// Canvas v2
varcanvas=createCanvas();

JsBarcode(canvas,"Hello");

// Do what you want with the canvas
// See https://github /Automattic/node-canvas for more information

With svg:

const{DOMImplementation,XMLSerializer}=require('xmldom');
constxmlSerializer=newXMLSerializer();
constdocument=newDOMImplementation().createDocument('http:// w3.org/1999/xhtml','html',null);
constsvgNode=document.createElementNS('http:// w3.org/2000/svg','svg');

JsBarcode(svgNode,'test',{
xmlDocument:document,
});

constsvgText=xmlSerializer.serializeToString(svgNode);

Options:

For information about how to use the options, seethe wiki page.

Option	Default value	Type
format	"auto" (CODE128)	String
width	2	Number
height	100	Number
displayValue	true	Boolean
text	undefined	String
fontOptions	""	String
font	"monospace"	String
textAlign	"center"	String
textPosition	"bottom"	String
textMargin	2	Number
fontSize	20	Number
background	"#ffffff"	String (CSS color)
lineColor	"#000000"	String (CSS color)
margin	10	Number
marginTop	undefined	Number
marginBottom	undefined	Number
marginLeft	undefined	Number
marginRight	undefined	Number
valid	function(valid){}	Function

Contributions and feedback:

We ❤️ contributions and feedback.

If you want to contribute, please check out theCONTRIBUTING.mdfile.

If you have any question or suggestioncreate an issueor ask about it in thegitter chat.

Bug reports should always be done with anew issue.

License:

JsBarcode is shared under theMIT license.This means you can modify and use it however you want, even for comercial use. But please give this the Github repo a ⭐ and write a small comment of how you are using JsBarcode in thegitter chat.