jsbarcode

What is jsbarcode?

The jsbarcode npm package is a versatile library for generating barcodes in various formats. It supports multiple barcode types and can be used in both Node.js and browser environments. The package is highly customizable, allowing users to adjust the appearance and format of the generated barcodes.

What are jsbarcode's main functionalities?

Generate Barcode in HTML

This feature allows you to generate a barcode and embed it in an HTML image element. The code uses the 'canvas' module to create a canvas element, which is then used by JsBarcode to draw the barcode.

const JsBarcode = require('jsbarcode');
const { createCanvas } = require('canvas');

const canvas = createCanvas();
JsBarcode(canvas, '123456789012', { format: 'CODE128' });
console.log('<img src="' + canvas.toDataURL() + '" />');

Generate Barcode in SVG

This feature allows you to generate a barcode in SVG format. The code uses the 'xmldom' module to create an SVG document, which is then used by JsBarcode to draw the barcode.

const JsBarcode = require('jsbarcode');
const { DOMImplementation, XMLSerializer } = require('xmldom');

const document = new DOMImplementation().createDocument(null, 'svg', null);
const svgNode = document.documentElement;
JsBarcode(svgNode, '123456789012', { format: 'CODE128' });
const svgString = new XMLSerializer().serializeToString(svgNode);
console.log(svgString);

Customizing Barcode Appearance

This feature allows you to customize the appearance of the barcode. You can change the line color, width, height, and whether to display the value below the barcode.

const JsBarcode = require('jsbarcode');
const { createCanvas } = require('canvas');

const canvas = createCanvas();
JsBarcode(canvas, '123456789012', {
  format: 'CODE128',
  lineColor: '#0aa',
  width: 4,
  height: 40,
  displayValue: true
});
console.log('<img src="' + canvas.toDataURL() + '" />');

Other packages similar to jsbarcode

bwip-js

bwip-js is another popular barcode generation library that supports a wide range of barcode formats. It is known for its high-quality output and extensive customization options. Compared to jsbarcode, bwip-js offers more barcode types and advanced features like postal barcodes.

barcode

The barcode npm package is a simple and lightweight library for generating barcodes. It supports fewer barcode types compared to jsbarcode but is easier to use for basic barcode generation needs.

node-barcode

node-barcode is a barcode generation library that supports both 1D and 2D barcodes. It is similar to jsbarcode in terms of functionality but also includes support for QR codes, which jsbarcode does not natively support.

README

Introduction

JsBarcode is a barcode generator written in JavaScript. It supports multiple barcode formats and works in browsers and with Node.js. It has no dependencies when it is used for the web but works with jQuery if 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)

<svg id="barcode"></svg>
<!-- or -->
<canvas id="barcode"></canvas>
<!-- or -->
<img id="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 any jsbarcode-* or data-* as attributes where * is any option.

<svg class="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.

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

data will be filled with a encodings property 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:

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

Step 3:

You are done! Go generate some barcodes :smile:

Bower and npm:

You can also use Bower or npm to install and manage the library.

bower install jsbarcode --save

npm install jsbarcode --save

Node.js:

With canvas:

var JsBarcode = require('jsbarcode');

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

// Canvas v1
var canvas = new Canvas();
// Canvas v2
var canvas = createCanvas();

JsBarcode(canvas, "Hello");

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

With svg:

const { DOMImplementation, XMLSerializer } = require('xmldom');
const xmlSerializer = new XMLSerializer();
const document = new DOMImplementation().createDocument('http://www.w3.org/1999/xhtml', 'html', null);
const svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

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

const svgText = xmlSerializer.serializeToString(svgNode);

Options:

For information about how to use the options, see the 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 :heart: contributions and feedback.

If you want to contribute, please check out the CONTRIBUTING.md file.

If you have any question or suggestion create an issue or ask about it in the gitter chat.

Bug reports should always be done with a new issue.

License:

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