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







Follow us
facebooklogo github instagram twitter

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock or some other adblocking software which is preventing the page from fully loading.

We need money to operate the site, and almost all of it comes from our online advertising.

Please add websolutionstuff to your ad blocking whitelist or disable your adblocking software.

×