JsBarcode

Barcode generation library written in JavaScript that works in both the bro...

Canvas
lindell/JsBarcodelindell.me/JsBarcodejsbarcode

README

JsBarcode

Build Status Scrutinizer Code 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:
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)

  1. ```` html
  2. <svg id="barcode"></svg>
  3. <canvas id="barcode"></canvas>
  4. <img id="barcode"/>
  5. ````



Simple example:

  1. ```` js
  2. JsBarcode("#barcode", "Hi!");
  3. // or with jQuery
  4. $("#barcode").JsBarcode("Hi!");
  5. ````

Result:
Result


Example with options:

  1. ```` js
  2. JsBarcode("#barcode", "1234", {
  3.   format: "pharmacode",
  4.   lineColor: "#0aa",
  5.   width:4,
  6.   height:40,
  7.   displayValue: false
  8. });
  9. ````
Result:
Result


More advanced use case:

  1. ```` js
  2. JsBarcode("#barcode")
  3.   .options({font: "OCR-B"}) // Will affect all barcodes
  4.   .EAN13("1234567890128", {fontSize: 18, textMargin: 0})
  5.   .blank(20) // Create space between the barcodes
  6.   .EAN5("12345", {height: 85, textPosition: "top", fontSize: 16, marginTop: 15})
  7.   .render();
  8. ````
Result:
Result



Or define the value and options in the HTML element:

Use any `jsbarcode- or data- as attributes where *` is any option.
  1. ```` html
  2. <svg class="barcode"
  3.   jsbarcode-format="upc"
  4.   jsbarcode-value="123456789012"
  5.   jsbarcode-textmargin="0"
  6.   jsbarcode-fontoptions="bold">
  7. </svg>
  8. ````

And then initialize it with:
  1. ```` js
  2. JsBarcode(".barcode").init();
  3. ````

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.
  1. ``` js
  2. const data = {};
  3. JsBarcode(data, 'text', {...options});
  4. ```
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:

NameSupportedSizeCDN
|------|--------------------|:-----------:|---------------:|
*All**All*10.1*[JsBarcode.all.min.js][1]*
CODE128CODE1286.2[JsBarcode.code128.min.js][2]
CODE39CODE395.1[JsBarcode.code39.min.js][3]
EANEAN-13,6.7[JsBarcode.ean-upc.min.js][4]
ITFITF,5[JsBarcode.itf.min.js][5]
MSIMSI,5[JsBarcode.msi.min.js][6]
PharmacodePharmacode4.7[JsBarcode.pharmacode.min.js][7]
CodabarCodabar4.9[JsBarcode.codabar.min.js][8]


Step 2:

Include the script in your code:


  1. ```` html
  2. <script src="JsBarcode.all.min.js"></script>
  3. ````

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.
  1. ```` sh
  2. bower install jsbarcode --save
  3. ````
  1. ```` sh
  2. npm install jsbarcode --save
  3. ````

Node.js:

With canvas:

  1. ```` javascript
  2. var JsBarcode = require('jsbarcode');

  4. // Canvas v1
  5. var Canvas = require("canvas");
  6. // Canvas v2
  7. var { createCanvas } = require("canvas");

  9. // Canvas v1
  10. var canvas = new Canvas();
  11. // Canvas v2
  12. var canvas = createCanvas();

  14. JsBarcode(canvas, "Hello");

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

With svg:

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

  7. JsBarcode(svgNode, 'test', {
  8.     xmlDocument: document,
  9. });

  11. const svgText = xmlSerializer.serializeToString(svgNode);
  12. ````


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

OptionDefaultType
|--------|---------------|------|
[`format`](https://github.com/lindell/JsBarcode/wiki/Options#format)`"auto"`String`
[`width`](https://github.com/lindell/JsBarcode/wiki/Options#width)`2``Number`
[`height`](https://github.com/lindell/JsBarcode/wiki/Options#height)`100``Number`
[`displayValue`](https://github.com/lindell/JsBarcode/wiki/Options#display-value)`true``Boolean`
[`text`](https://github.com/lindell/JsBarcode/wiki/Options#text)`undefined``String`
[`fontOptions`](https://github.com/lindell/JsBarcode/wiki/Options#font-options)`""``String`
[`font`](https://github.com/lindell/JsBarcode/wiki/Options#font)`"monospace"``String`
[`textAlign`](https://github.com/lindell/JsBarcode/wiki/Options#text-align)`"center"``String`
[`textPosition`](https://github.com/lindell/JsBarcode/wiki/Options#text-position)`"bottom"``String`
[`textMargin`](https://github.com/lindell/JsBarcode/wiki/Options#text-margin)`2``Number`
[`fontSize`](https://github.com/lindell/JsBarcode/wiki/Options#font-size)`20``Number`
[`background`](https://github.com/lindell/JsBarcode/wiki/Options#background)`"#ffffff"``String
[`lineColor`](https://github.com/lindell/JsBarcode/wiki/Options#line-color)`"#000000"``String
[`margin`](https://github.com/lindell/JsBarcode/wiki/Options#margins)`10``Number`
[`marginTop`](https://github.com/lindell/JsBarcode/wiki/Options#margins)`undefined``Number`
[`marginBottom`](https://github.com/lindell/JsBarcode/wiki/Options#margins)`undefined``Number`
[`marginLeft`](https://github.com/lindell/JsBarcode/wiki/Options#margins)`undefined``Number`
[`marginRight`](https://github.com/lindell/JsBarcode/wiki/Options#margins)`undefined``Number`
[`valid`](https://github.com/lindell/JsBarcode/wiki/Options#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.



[1]: https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js "jsdelivr all barcodes"
[2]: https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/barcodes/JsBarcode.code128.min.js "jsdelivr code128"
[3]: https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/barcodes/JsBarcode.code39.min.js "jsdelivr code39"
[4]: https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/barcodes/JsBarcode.ean-upc.min.js "jsdelivr ean/upc"
[5]: https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/barcodes/JsBarcode.itf.min.js "jsdelivr itf"
[6]: https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/barcodes/JsBarcode.msi.min.js "jsdelivr msi"
[7]: https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/barcodes/JsBarcode.pharmacode.min.js "jsdelivr pharmacode"
[8]: https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/barcodes/JsBarcode.codabar.min.js "jsdelivr codabar"