js-barcode-x

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)
```html





``

#### Simple example:
``javascript
JsBarcode("#barcode", "Hi!");
// or with jQuery
$("#barcode").JsBarcode("Hi!");
``

##### Result:
!Result


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


#### More advanced use case:
``javascript
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.
``html
jsbarcode-format="upc"
jsbarcode-value="123456789012"
jsbarcode-textmargin="0"
jsbarcode-fontoptions="bold">

``

And then initialize it with:
``javascript
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.
`javascript
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:
----


$3


``html

``

$3

Bower and npm:
----
You can also use Bower or npm to install and manage the library.
``bash
bower install jsbarcode --save
``
``bash
npm install jsbarcode --save
``

Node.js:
----

#### With canvas:
`` javascript
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:
`` javascript
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.

[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"