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">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barcode Generator</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.3/JsBarcode.all.min.js"></script>
</head>
<body>
<div class="container">
<input type="text" name="query" id="query">
<svg id="bar-code"></svg>
<button class="btn btn-primary">
Generate Barcode
</button>
</div>
</body>
</html>
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");
btn.addEventListener('click',function(){
let str = inp.value;
JsBarcode("#bar-code",str);
})
</script>
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.
