GitHub - hungxp/JsBarcode: Barcode generation library that works in both the browser and on Node.js

Introduction

JsBarcode is a barcode generator written in JavaScript. It supports multiple barcode formats and works in browsers and on the server (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

Supported barcodes:

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

Examples for browsers:

First create an canvas (or image)

<canvas id="canvas"></canvas>
<!-- or -->
<img id="barcode">
<!-- or -->
<svg id="barcode"></svg> <!-- (Beta) -->

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 (beta):

JsBarcode("#barcode")
  .options({fontOptions: "italic"})
  .EAN13("1234567890128")
  .blank(20)
  .EAN5("12345", {height: 85, textPosition: "top", fontSize: 16})
  .render();

Result:

Setup for browsers:

Step 1:

Download the library

Step 2:

Include the script in your code:

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

Bower:

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

bower install jsbarcode --save

Install with npm:

npm install jsbarcode
npm install canvas

Use:

var JsBarcode = require('jsbarcode');
var Canvas = require("canvas");

var canvas = new Canvas();
JsBarcode(canvas, "Hello");

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

The default options:

{
  width: 2,
  height: 100,
  format: "auto",
  displayValue: true,
  fontOptions: "",
  font: "monospace",
  textAlign: "center",
  textPosition: "bottom",
  textMargin: 2,
  fontSize: 20,
  background: "#ffffff",
  lineColor: "#000000",
  margin: 10,
  marginTop: undefined,
  marginBottom: undefined,
  marginLeft: undefined,
  marginRight: undefined,
  valid: function(valid){}
}