Multifunctional Barcode Generator with jQuery and Html5 Canvas - JsBarcode

Multifunctional Barcode Generator with jQuery and Html5 Canvas - JsBarcode

Just another barcode generator plugin to creates various types of barcodes using jQuery and Html5 canvas element.

Supported barcode types:

  • CODE128
  • EAN
  • UPC-A and UPC-E
  • CODE39
  • ITF and ITF 14
  • MSI
  • Pharmacode
  • Codabar

See also:

Basic Usage:

1. Include the jQuery javascript library and jQuery JsBarcode plugin in the document.

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

2. Or include a separate JavaScript in the document.

<!-- 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>

3. Create an empty canvas, SVG or img tag on the webpage.

<svg id="example"></svg>
<canvas id="example"></canvas>
<img id="example">

4. Draw a barcode on the webpage. You can save the barcode as a PNG file.

$("#example").JsBarcode("jQuery Script");

5. All possible options to customize your barcodes.

$("#example").JsBarcode("jQuery Script",{
  width: 2,
  height: 100,
  format: "auto",
  displayValue: true,
  fontOptions: "",
  font: "monospace",
  text: undefined,
  textAlign: "center",
  textPosition: "bottom",
  textMargin: 2,
  fontSize: 20,
  background: "#ffffff",
  lineColor: "#000000",
  margin: 10,
  marginTop: undefined,
  marginBottom: undefined,
  marginLeft: undefined,
  marginRight: undefined,
  valid: function valid() {}


v3.9.0 (2018-05-26)


  • Ensured that the CODE128 parameter is a string

This awesome jQuery plugin is developed by lindell. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 26.05.2018
  • Source