JSPM

  • Created
  • Published
  • Downloads 529026
  • Score
    100M100P100Q206705F
  • License MIT

JsBarcode is a simple way to create different types of 1d barcodes.

Package Exports

  • jsbarcode

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jsbarcode) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Build Status Coverage Status

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 B
  • CODE128 C
  • EAN 13
  • EAN 8
  • 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">

Code:

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

Result

Code:

$("#barcode").JsBarcode("9780199532179", {
  format:"EAN",
  displayValue:true,
  fontSize:24,
  lineColor: "#0cc"
});
Result:

Result

Code:

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

Result

Setup for browsers:

Step 1:

Download the library from this page

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

Node.js:

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",
  textMargin: 2,
  fontSize: 20,
  background: "#ffffff",
  lineColor: "#000000",
  margin: 10,
  marginTop: undefined,
  marginBottom: undefined,
  marginLeft: undefined,
  marginRight: undefined,
  valid: function(valid){}
}