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.
- 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
<svgid= "barcode"></svg>
<!-- or -->
<canvasid= "barcode"></canvas>
<!-- or -->
<imgid= "barcode"/>
JsBarcode("#barcode","Hi!");
// or with jQuery
$("#barcode").JsBarcode("Hi!");
JsBarcode("#barcode","1234",{
format:"pharmacode",
lineColor:"#0aa",
width:4,
height:40,
displayValue:false
});
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();
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();
Pass in an object which will be filled with data.
constdata={};
JsBarcode(data,'text',{...options});
data will be filled with aencodings
property which has all the needed values.
See wiki for an example of what data looks like.
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 |
Include the script in your code:
<scriptsrc= "JsBarcode.all.min.js"></script>
You are done! Go generate some barcodes 😄
You can also useBowerornpmto install and manage the library.
bower install jsbarcode --save
npm install jsbarcode --save
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
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);
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 |
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.
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.