Introduction to JSBarCode
JSBarCode is a powerful JavaScript library for generating barcodes. It is designed to be easy to use and supports multiple types of barcodes and customization options. In this article, we will explore the features of JSBarCode, look at various API examples, and provide a complete application example.
Installation
// Using npm
npm install jsbarcode
// or using a CDN
<script src="https://cdn.jsdelivr.net/npm/jsbarcode"></script>
Basic Usage
To generate a basic barcode, you can use the following code:
<canvas id="barcode"></canvas>
<script>
JsBarcode("#barcode", "123456789012");
</script>
Customizing Barcodes
JSBarCode provides numerous options for customizing barcodes. Here are some examples:
Changing the Barcode Format
<canvas id="barcode"></canvas>
<script>
JsBarcode("#barcode", "123456789012", {
format: "CODE128"
});
</script>
Adjusting Width and Height
<canvas id="barcode"></canvas>
<script>
JsBarcode("#barcode", "123456789012", {
width: 2,
height: 100
});
</script>
Adding Text Below the Barcode
<canvas id="barcode"></canvas>
<script>
JsBarcode("#barcode", "123456789012", {
displayValue: true
});
</script>
Changing the Text Options
<canvas id="barcode"></canvas>
<script>
JsBarcode("#barcode", "123456789012", {
displayValue: true,
fontSize: 18,
textMargin: 0,
font: "fantasy"
});
</script>
App Example Using JSBarCode
Let’s create a simple application that generates barcodes based on user input.
<!DOCTYPE html>
<html>
<head>
<title>Barcode Generator</title>
</head>
<body>
<input id="input" type="text" placeholder="Enter text">
<button onclick="generateBarcode()">Generate Barcode</button>
<canvas id="barcode"></canvas>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode"></script>
<script>
function generateBarcode() {
var text = document.getElementById("input").value;
JsBarcode("#barcode", text, {
format: "CODE128",
width: 2,
height: 100,
displayValue: true
});
}
</script>
</body>
</html>
With JSBarCode, you can easily add barcode generation functionality to your web applications. Try out the various options and customize the barcodes to suit your needs!
Hash: d3de68ecc13bb6c1228b24e74c75be2ef2b1c25e0c72980617ed33aacf80d30e
