JsBarcode

To use JsBarcode in a web browser, follow these steps:

1. Download or use a CDN link: You can use the full library (JsBarcode.all.min.js) or specific barcode format bundles to reduce file size.
2. Include the script: Add the <script> tag to your HTML.

Available Bundles:

• JsBarcode.all.min.js: All barcodes
• JsBarcode.code128.min.js: CODE128
• JsBarcode.code39.min.js: CODE39
• JsBarcode.ean-upc.min.js: EAN and UPC
• JsBarcode.itf.min.js: ITF and ITF-14
• JsBarcode.msi.min.js: MSI formats
• JsBarcode.pharmacode.min.js: Pharmacode
• JsBarcode.codabar.min.js: Codabar
• JsBarcode.code93.min.js: CODE93

<script src="JsBarcode.all.min.js"></script>

You can manage JsBarcode as a dependency using npm or Bower.

npm install jsbarcode --save

JsBarcode supports a chaining API to configure options and render multiple barcodes sequentially.

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();

You can define barcode values and options directly in the HTML element using jsbarcode-* or data-* attributes. Then, call .init() on the selector.

<svg class="barcode"
  jsbarcode-format="upc"
  jsbarcode-value="123456789012"
  jsbarcode-textmargin="0"
  jsbarcode-fontoptions="bold">
</svg>

<script>
JsBarcode(".barcode").init();
</script>

To use JsBarcode in a Node.js environment with a canvas, you must provide a canvas instance (e.g., from the canvas package).

var JsBarcode = require('jsbarcode');
var Canvas = require("canvas");
var canvas = new Canvas();

JsBarcode(canvas, "Hello");

You can pass an options object as the third argument to customize the barcode appearance.

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

First, create an HTML element to hold the barcode (SVG, Canvas, or Img). Then, call JsBarcode with the element selector and the value.

HTML:

<svg id="barcode"></svg>

JavaScript:

JsBarcode("#barcode", "Hi!");

To generate SVG in Node.js, use xmldom to create a DOM structure and pass it to JsBarcode via the xmlDocument option.

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);

If you want to retrieve the raw encoding values instead of rendering directly to an element, pass an object as the first argument. The object will be populated with an encodings property containing the necessary data.

const data = {};
JsBarcode(data, 'text', {...options});
// data.encodings will contain the barcode data

When using SVGRenderer, you can pass an options object to control the visual output. Key options include:

• marginLeft, marginRight, marginTop: Spacing around the barcode.
• background: A color value for the SVG background.
• lineColor: The color of the barcode bars.
• displayValue: Boolean to show/hide the barcode text.
• textPosition: Position of the text ('top' or 'bottom').
• textMargin: Spacing between the barcode and the text.
• fontSize: Size of the text.
• font: Font family name.
• fontOptions: Array of strings for font styling (e.g., ['bold'], ['italic']).
• textAlign: Alignment of the text ('left', 'right', or 'center').
• width, height: Dimensions of the individual barcode bars.
• xmlDocument: An optional custom document object (defaults to document).

When using JsBarcode, you may encounter specific error types that you can catch to handle invalid inputs or rendering issues. The following exceptions are exported by the library:

• InvalidInputException: Thrown when the provided input data is not valid for the specified symbology. It includes the symbology and the faulty input in its properties.
• InvalidElementException: Thrown when the target element type is not supported for rendering.
• NoElementException: Thrown when no target element is found to render the barcode on.