Generating Barcodes Using Java Script
Posted: Mon Jul 19, 2021 5:28 pm
Table script
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.
3. Create a new page and update its properties of JavaScript
or
File URLs
Function and Global Variable Declaration
This is to provide the download of generated barcode
Execute when Page Loads
Create a report and here is sample SQL
If Barcode is not displayed and you can see the code in the report like below then switch off "Escape special characters"
Like below,
Check output of report and to download click on Download Button,
Barcodes will be downloaded as image file as below,
Video explaining above steps.
https://youtu.be/9jticJRJ138
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');
/
2. Unzip and upload as Shared Components Static Application/Workspace Files.
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
File URLs
Code: Select all
#APP_IMAGES#JsBarcode.all.min.js
https://html2canvas.hertzen.com/dist/html2canvas.js
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();
});
}
Code: Select all
JsBarcode(".barcode").init();
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'
Like below,
Check output of report and to download click on Download Button,
Barcodes will be downloaded as image file as below,
Video explaining above steps.
https://youtu.be/9jticJRJ138