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