How To Generate Barcode Using Javascript

Websolutionstuff | Nov-01-2022 | Categories : jQuery

In this article, we will see how to generate barcode using javascript. We will use a javascript plugin to generate or create barcodes. Using this library you can easily generate different types of barcodes. The barcode generation library works in the web browser as well as on Node.js. For web browsers just need to use the JsBarcode CDN file.

We will use the JsBarcode library. JsBarcode is a barcode generator written in JavaScript. JsBarcode support multiple barcode formats with multiple options. As per requirements, we can change barcodes like width, height, color, background, font, format, margin, text alignment, etc. It's very easy to use to generate barcodes.

So, let's see how to generate a barcode using jquery and jquery barcode generator.

Javascript Barcode Generate

Include Libraries

First, we will add the latest jquery and barcode library using 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>

As per requirements, you can add different CDN files as the below links.

<!-- All the barcodes!-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/JsBarcode.all.min.js"></script>
 
<!-- CODE39 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/barcodes/JsBarcode.code39.min.js"></script>
 
<!-- CODE128 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/barcodes/JsBarcode.code128.min.js"></script>
 
<!-- EAN+UPC -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/barcodes/JsBarcode.ean-upc.min.js"></script>
 
<!-- ITF -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/barcodes/JsBarcode.itf.min.js"></script>
 
<!-- ITF-14 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/barcodes/JsBarcode.itf-14.min.js"></script>
 
<!-- MSI -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/barcodes/JsBarcode.msi.min.js"></script>
 
<!-- Pharmacode -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/barcodes/JsBarcode.pharmacode.min.js"></script>

Read Also: How To Remove Package From Laravel

Create Canvas or Image

Now, we will add HTML code in the body tag. And you can create different types to generate barcodes.

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

Add Javascript

In this step, we will generate a barcode using vanilla javascript. Also, you can use multiple ways to generate barcodes.

// By using querySelector
JsBarcode("#barcode", "websolutionstuff_barcode_generator");

// or by passing an element variable
var element = document.getElementById("barcode");
JsBarcode(element, "websolutionstuff_barcode_generator");

// using jQuery
$("#barcode").JsBarcode("websolutionstuff_barcode_generator");

Example:

<html>
    <head>
        <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>
    </head>
    <body>
        <h3>How To Generate Barcode Using Javascript - Websolutionstuff</h3>
        <img id="barcode"/>
    </body>
</html>
<script>
    $(document).ready(function(){
        JsBarcode("#barcode", "websolutionstuff", {  
            lineColor: "#03aa96",
            width: 2,
            height: 100,
            displayValue: true
        });
    });
</script>

Read Also: Laravel 9 Phone Number Validation Using Regex

Output:

how_to_generate_barcode_using_javascript

Generate Barcode with Options

Format: The format option is used to define different types of formats.

default: "auto" (CODE128)

JsBarcode("#barcode", "123456789012", {
  format: "EAN13"
});

Width: The width option is used to define the width of a single bar.

default: 2

JsBarcode("#barcode", "Smallest width", {
  width: 1
});

JsBarcode("#barcode", "Wider barcode", {
  width: 3
});

Customize the barcode with the 17 different options.

Example:

<html>
    <head>
        <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>
        <style>
        svg {
        margin: 30px;
        }

        body{
        margin: 50px;
        }

        h2{
        text-align: center;
        }
        </style>
    </head>
    <body>
        <h2>How To Generate Barcode Using Javascript - Websolutionstuff</h2>
        <svg id="barcode1"></svg>
        <svg id="barcode2"></svg>
        <svg id="barcode3"></svg>
    </body>
</html>
<script>
    $(document).ready(function(){
        JsBarcode("#barcode1", "websolutionstuff", {
            fontSize: 40,
            background: "#4b8b7f",
            lineColor: "#ffffff",
            margin: 40,
            marginLeft: 40  
        });

        JsBarcode("#barcode2", "websolutionstuff", {
            textAlign: "left",
            textPosition: "top",
            font: "cursive",
            fontOptions: "bold",
            fontSize: 40,
            textMargin: 15,
            text: "websolutionstuff"
        });

        JsBarcode("#barcode3", "1234", {
            format: "pharmacode",
            displayValue: false,
            height: 50,
            width: 6
        });
    });
</script>

Read Also: Laravel 9 Barcode Generator Example

Output:

how_to_generate_barcode_with_options_using_javascript