jsb

jsbarcode2

Barcode generation library written in JavaScript that works in both the browser and on Node.js

Showing:

Popularity

Downloads/wk

30

GitHub Stars

0

Maintenance

Last Commit

4yrs ago

Contributors

26

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

JsBarcode

Join the chat at https://gitter.im/lindell/JsBarcode Build Status Scrutinizer Code Quality Package Quality CDN License

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:

Examples for browsers:

First create an canvas (or image)

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

Simple example:

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

Result

Example with options:

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

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:

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:

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:

NameSupported barcodesSize (gzip)CDN / Download
AllAll the barcodes!9.6 kBJsBarcode.all.min.js
CODE128CODE128 (auto and force mode)6 kBJsBarcode.code128.min.js
CODE39CODE395 kBJsBarcode.code39.min.js
EAN / UPCEAN-13, EAN-8, EAN-5, EAN-2, UPC (A)6.2 kBJsBarcode.ean-upc.min.js
ITF-14ITF-144.8 kBJsBarcode.itf-14.min.js
ITFITF4.7 kBJsBarcode.itf.min.js
MSIMSI, MSI10, MSI11, MSI1010, MSI11104.9 kBJsBarcode.msi.min.js
PharmacodePharmacode4.6 kBJsBarcode.pharmacode.min.js
CodabarCodabar4.8 kBJsBarcode.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 😄

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:

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

Options:

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

OptionDefault valueType
format"auto" (CODE128)String
width2Number
height100Number
displayValuetrueBoolean
textundefinedString
fontOptions""String
font"monospace"String
textAlign"center"String
textPosition"bottom"String
textMargin2Number
fontSize20Number
background"#ffffff"String (CSS color)
lineColor"#000000"String (CSS color)
margin10Number
marginTopundefinedNumber
marginBottomundefinedNumber
marginLeftundefinedNumber
marginRightundefinedNumber
validfunction(valid){}Function

Contributions and feedback:

We ❤️ 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 ⭐ and write a small comment of how you are using JsBarcode in the gitter chat.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial