Generate BarCode using Javascript Library – JsBarcode

by Posted on

Today I am going to share awesome javascript plugin to create barcode. Using this library you can easily generate various types of barcodes. Barcode generation library works in both the browser and on Node.js. 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.
Generate BarCode using Javascript Library


Libraries

First load the minified all barcode library from CDN.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/JsBarcode.all.min.js"></script>

Or you can load the separate barcode format files if you don’t want to add all barcode format.

<!-- Codabar -->
<script src="JsBarcode.codabar.min.js"></script>
 
<!-- CODE39 -->
<script src="JsBarcode.code39.min.js"></script>
 
<!-- CODE128 -->
<script src="JsBarcode.code128.min.js"></script>
 
<!-- EAN+UPC -->
<script src="JsBarcode.ean-upc.min.js"></script>
 
<!-- ITF -->
<script src="JsBarcode.itf.min.js"></script>
 
<!-- ITF-14 -->
<script src="JsBarcode.itf-14.min.js"></script>
 
<!-- MSI -->
<script src="JsBarcode.msi.min.js"></script>
 
<!-- Pharmacode -->
<script src="JsBarcode.pharmacode.min.js"></script>

HTML

Create an canvas (or image) element where barcode will display.

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



JS

Now call the barcode function with text which barcode need to generate. there are tow method one directory call the function and pass the parameter and second one by using jquery method.

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

You can pass more options to customize barcode.

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

Or define the value and options in the HTML element:

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

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Published by admin