JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Js Barcode

    Barcode generation library that works in both the browser and on Node.js http://lindell.me/JsBarcode
    Filed under  › 

    • 🔾65%Overall
    • 2,325
    • 7.9 days
    • 🕩593
    • 👥12

    JsBarcode

    Join the chat at https://gitter.im/lindell/JsBarcode Build Status Scrutinizer Code Quality Package Quality CDN License

    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:

    Examples for browsers:

    First create a canvas (or image)

    <svg id="barcode"></svg>
    <!-- or -->
    <canvas id="barcode"></canvas>
    <!-- or -->
    <img id="barcode"/>
    

    Simple example:

    JsBarcode("#barcode", "Hi!");
    // or with jQuery
    $("#barcode").JsBarcode("Hi!");
    
    Result:

    Result

    Example with options:

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

    Result

    More advanced use case:

    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.

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

    And then initialize it with:

    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.

    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 kB JsBarcode.all.min.js
    CODE128 CODE128 (auto and force mode) 6.1 kB JsBarcode.code128.min.js
    CODE39 CODE39 5 kB JsBarcode.code39.min.js
    EAN / UPC EAN-13, EAN-8, EAN-5, EAN-2, UPC (A) 6.5 kB JsBarcode.ean-upc.min.js
    ITF ITF, ITF-14 4.9 kB JsBarcode.itf.min.js
    MSI MSI, MSI10, MSI11, MSI1010, MSI1110 4.9 kB JsBarcode.msi.min.js
    Pharmacode Pharmacode 4.6 kB JsBarcode.pharmacode.min.js
    Codabar Codabar 4.8 kB JsBarcode.codabar.min.js

    Step 2:

    Include the script in your code:

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

    Step 3:

    You are done! Go generate some barcodes :smile:

    Bower and npm:

    You can also use Bower or npm to install and manage the library.

    bower install jsbarcode --save
    
    npm install jsbarcode --save
    

    Node.js:

    Install with npm:

    npm install jsbarcode
    npm install canvas
    

    Use:

    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
    

    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.

    Show All