or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli.mdcode128.mdconfiguration.mdean-upc.mdindex.mdindustrial-formats.md
tile.json

tessl/npm-jsbarcode

JavaScript barcode generator library that creates various types of 1D barcodes with extensive customization options for both browsers and Node.js environments.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/jsbarcode@2.5.x

To install, run

npx @tessl/cli install tessl/npm-jsbarcode@2.5.0

index.mddocs/

JsBarcode

JsBarcode is a JavaScript barcode generator library that creates various types of 1D barcodes including CODE128, EAN, UPC, CODE39, ITF, MSI, and Pharmacode formats. The library is designed to work both in browsers and Node.js environments with canvas support, offering extensive customization options for barcode appearance including width, height, colors, fonts, and text positioning.

Package Information

  • Package Name: jsbarcode
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install jsbarcode

Core Imports

Browser (global):

// Using the all-in-one minified build
<script src="JsBarcode.all.min.js"></script>
// JsBarcode is now available globally

Node.js (CommonJS):

const JsBarcode = require("jsbarcode");

jQuery integration:

// If jQuery is available, it extends with a plugin
$("#barcode").JsBarcode("Hello World!");

// jQuery plugin signature
$("#barcode").JsBarcode(content, options, validFunction);

Basic Usage

// Basic barcode generation on canvas element
JsBarcode("#barcode", "Hello World!");

// With specific format and options
JsBarcode("#barcode", "123456789012", {
  format: "EAN13",
  width: 2,
  height: 100,
  displayValue: true
});

// Using jQuery (if available)
$("#barcode").JsBarcode("CODE128", {
  fontSize: 24,
  textAlign: "center"
});

// Node.js usage with canvas
const Canvas = require("canvas");
const canvas = new Canvas();
JsBarcode(canvas, "Hello World!");

Architecture

JsBarcode is built around several key components:

  • Core Engine: Main JsBarcode function that handles rendering to canvas elements or images
  • Module System: Pluggable barcode format encoders that register themselves with the core
  • Auto-Detection: Automatic format selection based on input data characteristics
  • Caching System: Built-in caching of encoded barcode data for performance optimization
  • Canvas Rendering: Direct canvas manipulation for barcode drawing with customizable styling
  • CLI Tool: Command-line interface for generating barcode images from the terminal

Capabilities

Core Generation Function

Main barcode generation function that works with HTML canvas elements, images, or DOM selectors.

/**
 * Generate a barcode on the specified element
 * @param element - Canvas element, image element, or CSS selector string
 * @param content - The data to encode as a barcode
 * @param options - Configuration options for barcode appearance and format
 */
function JsBarcode(element, content, options);

/**
 * jQuery plugin for barcode generation
 * @param content - The data to encode as a barcode
 * @param options - Configuration options for barcode appearance and format
 * @param validFunction - Optional validation callback function
 * @returns jQuery object for chaining
 */
$.fn.JsBarcode(content, options, validFunction);

CODE128 Barcodes

Comprehensive CODE128 barcode support with automatic mode switching and manual mode selection for optimal encoding density.

// Auto mode selection
JsBarcode(canvas, "Hello123", { format: "CODE128" });

// Manual mode selection
JsBarcode(canvas, "HELLO", { format: "CODE128A" });
JsBarcode(canvas, "Hello123", { format: "CODE128B" });
JsBarcode(canvas, "1234567890", { format: "CODE128C" });

CODE128 Barcodes

EAN and UPC Barcodes

Complete support for European Article Number (EAN) and Universal Product Code (UPC) formats with automatic checksum calculation.

// EAN-13 (with automatic checksum)
JsBarcode(canvas, "123456789012", { format: "EAN13" });

// EAN-8 
JsBarcode(canvas, "1234567", { format: "EAN8" });

// UPC-A
JsBarcode(canvas, "12345678901", { format: "UPC" });

// EAN addon codes
JsBarcode(canvas, "12345", { format: "EAN5" });
JsBarcode(canvas, "12", { format: "EAN2" });

EAN and UPC Barcodes

Industrial and Specialized Formats

Support for CODE39, ITF (Interleaved 2 of 5), MSI, and Pharmacode formats commonly used in industrial and specialized applications.

// CODE39 (alphanumeric)
JsBarcode(canvas, "HELLO123", { format: "CODE39" });

// ITF (even-length numeric)
JsBarcode(canvas, "1234567890", { format: "ITF" });

// ITF-14 (GTIN-14)
JsBarcode(canvas, "1234567890123", { format: "ITF14" });

// MSI with various checksum options
JsBarcode(canvas, "123456", { format: "MSI" });
JsBarcode(canvas, "123456", { format: "MSI10" });

// Pharmacode
JsBarcode(canvas, "12345", { format: "pharmacode" });

Industrial and Specialized Formats

Configuration and Customization

Extensive customization options for barcode appearance, sizing, colors, fonts, and text positioning.

const defaultOptions = {
  width: 2,              // Width of a single bar
  height: 100,           // Height of the barcode
  format: "auto",        // Barcode format or "auto" for detection
  displayValue: true,    // Show text below barcode
  fontOptions: "",       // Font style (e.g., "bold", "italic")
  font: "monospace",     // Font family
  textAlign: "center",   // Text alignment: "left", "center", "right"
  textPosition: "bottom", // Text position: "top", "bottom"
  textMargin: 2,         // Space between barcode and text
  fontSize: 20,          // Font size in pixels
  background: "#ffffff", // Background color
  lineColor: "#000000",  // Barcode line color
  margin: 10,            // All margins
  marginTop: undefined,  // Individual margin overrides
  marginBottom: undefined,
  marginLeft: undefined,
  marginRight: undefined,
  valid: function(valid) {} // Validation callback
};

Configuration and Options

Command Line Interface

Node.js command-line tool for generating barcode images with extensive format and styling options.

# Basic usage
JsBarcode "Hello World!" -o barcode.png

# With format and styling
JsBarcode "123456789012" -f EAN13 -W 3 -H 150 -d --background white --lineColor black

# Output to stdout
JsBarcode "CODE39" -f CODE39 -s | cat > barcode.png

Command Line Interface

Module System and Extensions

Format Registration

/**
 * Register a new barcode format module
 * @param module - Constructor function for the barcode encoder
 * @param regex - Regular expression pattern to match the format name
 * @param priority - Priority for auto-selection (higher = preferred)
 */
JsBarcode.register(module, regex, priority);

/**
 * Get a registered barcode module by format name
 * @param name - Format name to lookup
 * @returns Constructor for the barcode encoder
 */
JsBarcode.getModule(name);

/**
 * Automatically select the best encoder for the given content
 * @param content - Data to encode
 * @returns Constructor for the most suitable barcode encoder
 */
JsBarcode.autoSelectEncoder(content);

Performance and Caching

/**
 * Cache encoded barcode data for reuse
 * @param format - Barcode format name
 * @param input - Input data
 * @param output - Encoded binary data
 */
JsBarcode.cache(format, input, output);

/**
 * Retrieve cached barcode data
 * @param format - Barcode format name
 * @param input - Input data
 * @returns Cached binary data or empty string if not found
 */
JsBarcode.getCache(format, input);

Error Handling

JsBarcode throws descriptive errors for common issues:

try {
  JsBarcode(canvas, "invalid", { format: "EAN13" });
} catch (error) {
  // "The data is not valid for the type of barcode."
}

try {
  JsBarcode(canvas, "test", { format: "NONEXISTENT" });
} catch (error) {
  // "Module NONEXISTENT does not exist or is not loaded."
}

try {
  JsBarcode("invalid-selector", "test");
} catch (error) {
  // "Not supported type to draw on."
}

Use the valid callback option for custom error handling:

JsBarcode(canvas, "potentially-invalid", {
  format: "EAN13",
  valid: function(isValid) {
    if (!isValid) {
      console.log("Barcode generation failed");
      // Handle invalid data gracefully
    }
  }
});