Generate BarCode Using Javascript Library - JsBarcode

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.

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/jsbarcode@3.8.0/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>