# Barcode Generator (JsBarcode)

Links: [Home](../../../index.md) | [Barcode Reader](barcode-reader.md) | [QR Code Generator](qrcode-generator.md)

Third-party wrapper for [JsBarcode](https://github.com/lindell/JsBarcode) 3.12 (Johan Lindell, MIT) -- a 1D barcode generator that renders CODE128, EAN / UPC, CODE39, CODE93, ITF-14, MSI, Pharmacode and Codabar into an `<svg>`, a `<canvas>` or an `<img>`. For 2D codes use the [QR Code Generator](qrcode-generator.md).

## Loading

```js
Application.require("thirdparty/convert/image/barcode/generator").then(function (JsBarcode) {
    // JsBarcode(element, text, options) -- the library's own API, unchanged
});
```

The wrapper loads `thirdparty/jsbarcode/dist/JsBarcode.all.min.js` (all symbologies, ~65 KB) with `uri-load` and resolves with the `window.JsBarcode` function the bundle registers.

## Supported Formats

| `format` | Symbology | Input |
|---|---|---|
| `CODE128` (default), `CODE128A`, `CODE128B`, `CODE128C` | Code 128 | any ASCII text (`CODE128C` digits only) |
| `EAN13`, `EAN8`, `EAN5`, `EAN2` | EAN | 12 / 7 / 5 / 2 digits (EAN-13 / EAN-8 accept the check digit or compute it) |
| `UPC`, `UPCE` | UPC-A / UPC-E | 11 / 6-8 digits |
| `CODE39` | Code 39 | uppercase letters, digits, `- . $ / + % space` |
| `CODE93` | Code 93 | same character set as Code 39, denser |
| `ITF14`, `ITF` | Interleaved 2 of 5 | 13 digits / even number of digits |
| `MSI`, `MSI10`, `MSI11`, `MSI1010`, `MSI1110` | MSI with check digits | digits |
| `pharmacode` | Pharmacode | number 3 .. 131070 |
| `codabar` | Codabar | digits and `- $ : / . +`, optional A-D start / stop |

`JsBarcode(element, text, { format: 'EAN13' })` throws (or calls `options.valid(false)`) when the text is not valid for the symbology -- wrap the call in `try / catch` for user input.

## Options

| Option | Default | Meaning |
|---|---|---|
| `format` | `'CODE128'` | symbology, see above |
| `width` | `2` | width of a single bar, px |
| `height` | `100` | bar height, px |
| `displayValue` | `true` | print the text under the bars |
| `text` | -- | override the printed text |
| `fontOptions`, `font`, `fontSize`, `textAlign`, `textPosition`, `textMargin` | `''`, `'monospace'`, `20`, `'center'`, `'bottom'`, `2` | text styling |
| `background`, `lineColor` | `'#ffffff'`, `'#000000'` | colours (any CSS colour) |
| `margin`, `marginTop`, `marginBottom`, `marginLeft`, `marginRight` | `10` | quiet zone, px |
| `flat` | `false` | EAN / UPC: no guard bars extending below |
| `valid` | -- | `function (valid)` called instead of throwing on invalid input |

## Use Cases

### Render a barcode into an SVG, a canvas or an image

```js
Application.require("thirdparty/convert/image/barcode/generator").then(function (JsBarcode) {
    JsBarcode('#label-svg', 'SGAPPS-2026-42', { format: 'CODE128', displayValue: true, height: 60 });
    JsBarcode(document.getElementById('label-canvas'), '5901234123457', { format: 'EAN13' });
    JsBarcode('#label-img', 'ORDER-1001', { format: 'CODE39', width: 1.5, background: '#f6f8fa' });
});
```

An `<svg>` target gives a crisp, scalable barcode (one `<rect>` per bar); a `<canvas>` gives pixels you can `toDataURL()`; an `<img>` receives a PNG data URL.

### Generate a barcode and decode it again (round trip with the reader)

```js
Application.require([
    "generate :: thirdparty/convert/image/barcode/generator",
    "ZXing    :: thirdparty/convert/image/barcode/reader"
]).then(function (libs) {
    var canvas = document.createElement('canvas');
    libs.generate(canvas, 'SGAPPS-2026-42', { format: 'CODE128' });

    var reader = new libs.ZXing.BrowserMultiFormatReader();
    reader.decodeFromImageUrl(canvas.toDataURL()).then(function (result) {
        console.log(result.getText());                                        // "SGAPPS-2026-42"
        console.log(libs.ZXing.BarcodeFormat[result.getBarcodeFormat()]);    // "CODE_128"
    });
});
```

### Print labels from a data set

```js
Application.require("thirdparty/convert/image/barcode/generator").then(function (JsBarcode) {
    var items = [{ sku: '1000012', name: 'Cable HDMI 2 m' }, { sku: '1000013', name: 'Adapter USB-C' }];
    var sheet = document.getElementById('labels');

    items.forEach(function (item) {
        var label = document.createElement('div');
        label.className = 'label';
        label.innerHTML = '<strong>' + item.name + '</strong><svg></svg>';
        sheet.appendChild(label);
        JsBarcode(label.querySelector('svg'), item.sku, { format: 'CODE128', height: 40, fontSize: 14 });
    });

    window.print();
});
```

### Validate user input before rendering

```js
Application.require("thirdparty/convert/image/barcode/generator").then(function (JsBarcode) {
    var input = document.getElementById('ean');
    input.addEventListener('input', function () {
        JsBarcode('#preview', input.value, {
            format: 'EAN13',
            valid: function (valid) {
                input.classList.toggle('invalid', !valid);
            }
        });
    });
});
```

### Chained rendering of several symbologies

```js
Application.require("thirdparty/convert/image/barcode/generator").then(function (JsBarcode) {
    // JsBarcode(element) returns a builder: one call per barcode, then render()
    JsBarcode('#multi')
        .EAN13('1234567890128', { fontSize: 18, textMargin: 0 })
        .blank(20)
        .CODE128('Second barcode', { height: 40 })
        .render();
});
```

## Notes

- The wrapper resolves with the library function itself; there is no ApplicationPrototype instance, no events and no `whenLoaded()`.
- The bundle also registers `window.JsBarcode` (and `jQuery.fn.JsBarcode` when jQuery is present); the wrapper does not remove the global.
- `JsBarcode.all.min.js` contains every symbology. The per-format builds in `thirdparty/jsbarcode/dist/barcodes/` (`JsBarcode.ean-upc.min.js`, ...) are smaller but are not loaded by the wrapper.
- The library validates input per symbology; EAN-13 / EAN-8 / UPC compute the check digit when 12 / 7 / 11 digits are given and verify it when 13 / 8 / 12 are given.
- Licence: MIT (`thirdparty/jsbarcode/MIT-LICENSE.txt`). The wrapper itself is Apache-2.0 like the rest of the repository's infrastructure code.