Generating Barcodes Using Java Script

Oracle Application Express is a rapid development tool for Web applications on the Oracle database.
Post Reply
admin
Posts: 1956
Joined: Fri Mar 31, 2006 12:59 am
Location: Pakistan
Contact:

Generating Barcodes Using Java Script

Post by admin »

Table script

Code: Select all

CREATE TABLE  "JS_PRODUCTS" 
   (	"PRODUCT_NAME" VARCHAR2(100), 
	"PRODUCT_PRICE" NUMBER, 
	"PRODUCT_BARCODE" VARCHAR2(32)
   )
/

insert into JS_PRODUCTS (PRODUCT_NAME,PRODUCT_PRICE,PRODUCT_BARCODE) Values ('Orange',34,'123456789012');
insert into JS_PRODUCTS (PRODUCT_NAME,PRODUCT_PRICE,PRODUCT_BARCODE) Values ('Apricot',100,'223456789014');
insert into JS_PRODUCTS (PRODUCT_NAME,PRODUCT_PRICE,PRODUCT_BARCODE) Values ('Apple',24,'323456789015');
/
1. Download code from https://lindell.me/JsBarcode/ or directly use link https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js
2. Unzip and upload as Shared Components Static Application/Workspace Files.
apexstaticfile.png
apexstaticfile.png (103.22 KiB) Viewed 600 times
3. Create a new page and update its properties of JavaScript

Code: Select all

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

File URLs

Code: Select all

#APP_IMAGES#JsBarcode.all.min.js
https://html2canvas.hertzen.com/dist/html2canvas.js
Function and Global Variable Declaration
This is to provide the download of generated barcode

Code: Select all

function download(){
html2canvas(document.querySelector("#Products_Listing")).then(function(canvas) { 
var dummy = document.createElement('dummy');
dummy.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
dummy.download = 'image.jpg';
dummy.click();
});
} 
barcodefunc.png
barcodefunc.png (183.48 KiB) Viewed 599 times
Execute when Page Loads

Code: Select all

JsBarcode(".barcode").init();
barcodefunc2.png
barcodefunc2.png (56.6 KiB) Viewed 598 times
Create a report and here is sample SQL

Code: Select all

select product_name, 
'<svg class="barcode"
 jsbarcode-format="code128" 
 jsbarcode-value= '|| product_barcode ||'
 jsbarcode-textmargin="0"
 jsbarcode-fontoptions="bold"
 jsbarcode-lineColor="#000"
 jsbarcode-background="#ffffff"
 jsbarcode-displayValue= true
 jsbarcode-width= "2.5"
 jsbarcode-height="30"
 jsbarcode-fontSize= "12"
 jsbarcode-marginTop= "9"
 jsbarcode-marginBottom= "9"
 jsbarcode-marginLeft= "2"
 jsbarcode-marginRight= "2" >
</svg>' as barcode
from js_products 
--where product_name = 'Orange'
If Barcode is not displayed and you can see the code in the report like below then switch off "Escape special characters"
barcode_report1.png
barcode_report1.png (49.24 KiB) Viewed 595 times
Like below,
barcode_report2.png
barcode_report2.png (191.26 KiB) Viewed 594 times
Check output of report and to download click on Download Button,
barcode_gen.png
barcode_gen.png (33.07 KiB) Viewed 593 times
Barcodes will be downloaded as image file as below,
barcode_download.png
barcode_download.png (96.21 KiB) Viewed 592 times
Video explaining above steps.

https://youtu.be/9jticJRJ138
Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest