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>

 

 

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>

 

 

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>

 

 

Output:

how_to_generate_barcode_with_options_using_javascript

 


You might also like:

Recommended Post
Featured Post
Laravel 9 Livewire Image Upload Example
Laravel 9 Livewire Image Uploa...

In this article, we will see the laravel 9 livewire image upload example. Here, we will learn how to upload an imag...

Read More

Dec-01-2022

Laravel 9 whereNull / whereNotNull Query Example
Laravel 9 whereNull / whereNot...

In this article, we will see the laravel 9 whereNull / whereNotNull query example. In laravel 9 additional where clauses...

Read More

Oct-18-2022

Laravel Eloquent Relationships
Laravel Eloquent Relationships

In this example we will see Laravel Eloquent relationships, laravel provides many relationship like laravel ha...

Read More

Mar-23-2021

How to Multiple Image Upload in Laravel 10 API
How to Multiple Image Upload i...

Hello everyone! I'm excited to share with you how I'm enhancing my Laravel 10 API by enabling the capability to...

Read More

Dec-01-2023