Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lindell/JsBarcode
Barcode generation library written in JavaScript that works in both the browser and on Node.js
https://github.com/lindell/JsBarcode
barcode barcode-generator es2015 es6 javascript
Last synced: 6 days ago
JSON representation
Barcode generation library written in JavaScript that works in both the browser and on Node.js
- Host: GitHub
- URL: https://github.com/lindell/JsBarcode
- Owner: lindell
- License: mit
- Created: 2011-12-29T15:38:35.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2024-03-11T23:16:10.000Z (8 months ago)
- Last Synced: 2024-04-14T11:06:08.516Z (7 months ago)
- Topics: barcode, barcode-generator, es2015, es6, javascript
- Language: JavaScript
- Homepage: http://lindell.me/JsBarcode
- Size: 3.16 MB
- Stars: 5,279
- Watchers: 135
- Forks: 1,076
- Open Issues: 121
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: MIT-LICENSE.txt
Awesome Lists containing this project
- awesome - lindell/JsBarcode - Barcode generation library written in JavaScript that works in both the browser and on Node.js (JavaScript)
- starred-awesome - JsBarcode - Barcode generation library written in JavaScript that works in both the browser and on Node.js (JavaScript)
README
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](http://lindell.github.io/JsBarcode/generator/)
#### [Simple CodePen Demo](http://codepen.io/lindell/pen/eZKBdO?editors=1010)
#### [Settings CodePen Demo](http://codepen.io/lindell/pen/mPvLXx?editors=1010)
Supported barcodes:
----
* [CODE128](https://github.com/lindell/JsBarcode/wiki/CODE128)
* CODE128 (automatic mode switching)
* CODE128 A/B/C (force mode)
* [EAN](https://github.com/lindell/JsBarcode/wiki/EAN)
* EAN-13
* EAN-8
* EAN-5
* EAN-2
* UPC (A)
* UPC (E)
* [CODE39](https://github.com/lindell/JsBarcode/wiki/CODE39)
* [ITF](https://github.com/lindell/JsBarcode/wiki/ITF-14)
* ITF
* ITF-14
* [MSI](https://github.com/lindell/JsBarcode/wiki/MSI)
* MSI10
* MSI11
* MSI1010
* MSI1110
* [Pharmacode](https://github.com/lindell/JsBarcode/wiki/pharmacode)
* [Codabar](https://github.com/lindell/JsBarcode/wiki/codabar)
Examples for browsers:
----
#### First create a canvas (or image)
````html
![]()
````
#### Simple example:
````javascript
JsBarcode("#barcode", "Hi!");
// or with jQuery
$("#barcode").JsBarcode("Hi!");
````
##### Result:
#### Example with options:
````javascript
JsBarcode("#barcode", "1234", {
format: "pharmacode",
lineColor: "#0aa",
width:4,
height:40,
displayValue: false
});
````
##### 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:
#### Or define the value and options in the HTML element:
Use any `jsbarcode-*` or `data-*` as attributes where `*` is any option.
````html
````
And then initialize it with:
````javascript
JsBarcode(".barcode").init();
````
##### 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:
----
### Step 1:
Download or get the CDN link to the script:
| Name | Supported barcodes | Size (gzip) | CDN / Download |
|------|--------------------|:-----------:|---------------:|
| *All* | *All the barcodes!* | *10.1 kB* | *[JsBarcode.all.min.js][1]* |
| CODE128 | CODE128 (auto and force mode) | 6.2 kB | [JsBarcode.code128.min.js][2] |
| CODE39 | CODE39 | 5.1 kB | [JsBarcode.code39.min.js][3] |
| EAN / UPC | EAN-13, EAN-8, EAN-5, EAN-2, UPC (A) | 6.6 kB | [JsBarcode.ean-upc.min.js][4] |
| ITF | ITF, ITF-14 | 5 kB | [JsBarcode.itf.min.js][5] |
| MSI | MSI, MSI10, MSI11, MSI1010, MSI1110 | 5 kB | [JsBarcode.msi.min.js][6] |
| Pharmacode | Pharmacode | 4.7 kB | [JsBarcode.pharmacode.min.js][7] |
| Codabar | Codabar | 4.9 kB | [JsBarcode.codabar.min.js][8] |
### Step 2:
Include the script in your code:
````html
````
### Step 3:
You are done! Go generate some barcodes :smile:
Bower and npm:
----
You can also use [Bower](http://bower.io) or [npm](https://www.npmjs.com) 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](https://github.com/lindell/JsBarcode/wiki/Options).
| Option | Default value | Type |
|--------|---------------|------|
| [`format`](https://github.com/lindell/JsBarcode/wiki/Options#format) | `"auto" (CODE128)` | `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 (CSS color)` |
| [`lineColor`](https://github.com/lindell/JsBarcode/wiki/Options#line-color) | `"#000000"` | `String (CSS color)` |
| [`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](https://github.com/lindell/JsBarcode/blob/master/CONTRIBUTING.md) file.
If you have any question or suggestion [create an issue](https://github.com/lindell/JsBarcode/issues/new) or ask about it in the [gitter chat](https://gitter.im/lindell/JsBarcode).
Bug reports should always be done with a [new issue](https://github.com/lindell/JsBarcode/issues/new).
License:
----
JsBarcode is shared under the [MIT license](https://github.com/lindell/JsBarcode/blob/master/MIT-LICENSE.txt). 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](https://gitter.im/lindell/JsBarcode).
[1]: https://cdn.jsdelivr.net/npm/[email protected]/dist/JsBarcode.all.min.js "jsdelivr all barcodes"
[2]: https://cdn.jsdelivr.net/npm/[email protected]/dist/barcodes/JsBarcode.code128.min.js "jsdelivr code128"
[3]: https://cdn.jsdelivr.net/npm/[email protected]/dist/barcodes/JsBarcode.code39.min.js "jsdelivr code39"
[4]: https://cdn.jsdelivr.net/npm/[email protected]/dist/barcodes/JsBarcode.ean-upc.min.js "jsdelivr ean/upc"
[5]: https://cdn.jsdelivr.net/npm/[email protected]/dist/barcodes/JsBarcode.itf.min.js "jsdelivr itf"
[6]: https://cdn.jsdelivr.net/npm/[email protected]/dist/barcodes/JsBarcode.msi.min.js "jsdelivr msi"
[7]: https://cdn.jsdelivr.net/npm/[email protected]/dist/barcodes/JsBarcode.pharmacode.min.js "jsdelivr pharmacode"
[8]: https://cdn.jsdelivr.net/npm/[email protected]/dist/barcodes/JsBarcode.codabar.min.js "jsdelivr codabar"