Barcode Generator in Oracle APEX - Javainhand Tutorial

In this Oracle APEX Tutorial, We are going to see the how to add barcode generator in Oracle APEX.

Basically, I am using a third party library whose name is JSBarcode. JsBarcode is a barcode generator which is written in JavaScript.

You can easily generate different types of barcodes using JsBarcode. The Barcode generation library that works in both browser and Node.js. Barcode generation libraries support multiple barcode formats.

Barcode Generator in Oracle APEX

I am sharing following steps which will help to add barcode generator in Oracle APEX.

Step 1:-Use the following link in your page JavaScript File URL section either You can download the minified Js Barcode library and you can use it in your application. See the following screenshot.

https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js

Step 2:-Create a user input screen where users can enter any information. We have created a region, item field and one submit button on my page. See the following screenshot. 

Step 3:- Now we have to create a canvas region or image element for the display Barcode. We have used the canvas element for display barcode. You can also use image elements for display barcode. See the following screenshot.

<canvas id="canvas"></canvas>

Step 4:-Create a click dynamic action on the button. Go to the button and right-click on the mouse then choose the dynamic action option. Follow the below dynamic action instruction and see the following screenshot.

Identification: Display Barcode // Dynamic Action Name

Event: Click

Selection Type: Button

Button: Submit //Choose your page button name

After the creating dynamic action, add true action with the following instruction.

Action: Execute JavaScript Code

Code:   v=apex.item( "P27_INPUT" ).getValue(); //Pass your page item

             JsBarcode("#canvas", v);                             //Pass canvas id

More Customization in Barcode Generator in Oracle APEX then You have to add some extra property of JsBarcode Library for customization. Add the following JavaScript Code.

Code:-

v=apex.item( "P27_INPUT" ).getValue();//pass your item name

JsBarcode("#canvas", v,{

  lineColor: "#0aa",

  width: 3,

  height: 150,

  displayValue: false

}); 

You can change width, height, or line code value according to your requirement. Click Here For Demo

I have generated a simple barcode using JsBarcode Library. There are more options available in JSBarcode Library to customize the barcode. I am sharing JsBarcode library URL where you can learn more about barcode customization.

Click Here For JsBarcode

Generate QR code in Oracle APEX

How to Download Barcode in Local System

In this section, I will add some javascript code which will help you download the barcode as an image in your local system.

Add Following URL in your javascript file URL section

https://html2canvas.hertzen.com/dist/html2canvas.js

Add the given javascript function in your function and global declaration section which will help you to download the barcode as an image in your local system.

function download_barcode(){
//pass your canvas id
html2canvas(document.querySelector("#canvas")).then(function(canvas) { 
var a = document.createElement('a');
a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.download = 'image.jpg';
a.click();
});
} 

Now call the above javascript function in your existing dynamic action. See the below screenshot for a better understanding.

That's all for today, I hope you like my (Barcode Generator in Oracle APEX) blog post. If you liked this post then comment in the comment box section.

You can also subscribe to our youtube channel where we also post videos of Oracle APEX.

Reference:-

https://lindell.me/JsBarcode
https://html2canvas.hertzen.com/dist/html2canvas.js