How to generate Barcode using Javascript : Simple and Easy

How to generate Barcode using Javascript : Simple and Easy

In this Article you will learn how to generate barcode with javascript.

What is a barcode??

A barcode is a method of representing the data in a visual or machine-readable form. It is used in many places, for example you have seen the box of your online delivery which has a receipt with that bar code.

Steps for Generating barcode using Javascript:

Step 1: Put this Script in your head tag 


This is a lib for generating bar code. if you want to dive more into this library you can check this out using this Link

Step 2: Set up a Html for generating Bar Code

 <!DOCTYPE html>

<html lang="en">


    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Barcode Generator</title>

    <script src=""></script>




    <div class="container">

        <input type="text" name="query" id="query">


        <svg id="bar-code"></svg>

        <button class="btn btn-primary">

            Generate Barcode







Step 3: Now add an Eventlistner to button to generate bar code. 

 <script type="text/javascript">
    let inp =  document.getElementById("query");
    let btn = document.getElementById("button");

     let str = inp.value;

After this Run the code and you will able to Generate Barcode using Javascript. If you have any type of query or question please comment or Contact us.

Leave a comment