PLSQL DYNAMIC CONTENT:
declare
V_COMPANY_NAME VARCHAR2(100):='ABC COMPANY.';
N number:= 1;
gsl number(10):=0;
begin
htp.p('
<html>
<header>
<title>Bangladesh Medical</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h2.page-header {
margin: 0;
padding: 0;
}
h3.page-header {
align:center;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
text-transform: uppercase;
}
p {text-align: center;}
.napkin2,th,td {
border: 1px solid black ;
border-collapse: collapse;
padding: 5px;
}
.napkin,th {
border: 1px solid #607d8b ;
border-collapse: collapse;
padding: 5px;
}
.p1 {
border: 0px;
text-align: left;
}
.td1 {
border: 0px;
text-align: left;
}
.td1 {
border: 0px;
text-align: left;
}
.full {
width:100%;
}
.p00 {text-align: right; border: 0px;}
.m2 {text-align:center;}
.m3{text-align: center;
.m4{text-align: center;
border: 1px solid #607d8b;}
.m4{text-align: center;
border: 1px solid #607d8b;
}
.m5{text-align: center;}
.m1,.m2,.m3.m4,.m5 {border: 0px solid #607d8b;}
.m1{padding-left: 5px;}
.m2{padding-right: 5px;}
.m3{padding-right: 5px;}
.m4{padding-right: 5px;}
.lower { padding-top: 50px;}
.low,.low1 {text-align: center;}
</style>
</header>
<body>
<h2 class="page-header" align="center">'||V_COMPANY_NAME||'</h2>
<h3 class="page-header" align="center"><u>Order Items</u></h3>
');
htp.p('
<table class="napkin2" align="center" width=1024px >
<thead>
<tr>
<th width="50px">ID</th>
<th width="400px">Products </th>
<th width="100px">Unit Price</th>
<th width="350px">Quantity</th>
<th width="100px">Amount</th>
</tr>
</thead>
');
for r in (SELECT ORDER_ITEM_ID,PRODUCT_ID,UNIT_PRICE,QUANTITY,NVL(UNIT_PRICE,0)*NVL(QUANTITY,0) AMOUNT FROM DEMO_ORDER_ITEMS) loop
htp.p('
<tbody>
<tr>
<td width="400px" align=center>'||' '||htf.escape_sc(r.ORDER_ITEM_ID)||'</td>
<td width="100px" align=center>'||' '||htf.escape_sc(r.PRODUCT_ID)||'</td>
<td width="350px" align=center>'||' '||htf.escape_sc(r.UNIT_PRICE)||'</td>
<td width="100px" align=center>'||' '||htf.escape_sc(r.QUANTITY)||'</td>
<td width="100px" align=center>'||' '||htf.escape_sc(r.AMOUNT)||'</td>
</tr>
</tbody>
');
end loop;
htp.p('
</table>
</body>
');
htp.p('</div>');
end;
Add Close and Print Button :
htp.p('
<a id="b_exit" type="button1" class="button button3" class="exit" '||'href="'||APEX_UTIL.PREPARE_URL('f?p=&APP_ID.:1:&SESSION.::&DEBUG.::::')||'">Close</a><input type="button1" class="button button1" class="t-Icon t-Icon--right fa fa-print" id="print" type="button" onclick="printdiv(''div_print1'');" value="Print"/><br/>
<div id="div_print1" style="margin-top:5px; align:right;" >
');
Enter the following code before the End of your PL SQL dynamic content.
htp.p('</div>');
Copy and Past in Function and Global Variable :
function printdiv(printpage)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
4.If you want to design print button. You can use this CSS (Inline CSS)
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button1:hover {
background-color: #008CBA;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid #f44336;
}
.button3:hover {
background-color: #f44336;
color: white;
}
ENJOY!
With Picture :
CREATE TABLE "IMAGES"
( "IMAGE_ID" NUMBER(10,0),
"NAME" VARCHAR2(100),
"MOBILE_NUMBER" VARCHAR2(100),
"ADDRESS" VARCHAR2(100),
"IMAGE_DATA" BLOB,
"IMAGE_MIMETYPE" VARCHAR2(2000),
"IMAGE_FILENAME" VARCHAR2(2000),
"IMAGE_LAST_UPDATE" DATE,
"IMAGE_CHARACTERSET" VARCHAR2(2000)
) ;
DECLARE
cursor mycur IS
SELECT IMAGE_ID,NAME,MOBILE_NUMBER,ADDRESS,IMAGE_DATA,IMAGE_MIMETYPE,IMAGE_FILENAME,IMAGE_LAST_UPDATE, IMAGE_CHARACTERSET FROM IMAGES;
BEGIN
htp.p('<a id="b_exit" type="button1" class="button button3" class="exit" '||'href="'||APEX_UTIL.PREPARE_URL('f?p=&APP_ID.:1:&SESSION.::&DEBUG.::::')||'">Close</a>
<input type="button1" class="button button1" class="t-Icon t-Icon--right fa fa-print" id="print" type="button" onclick="printDiv(''div_print1'') ;" value="Print"/><br/>
');
--- onClick="window.print()"
htp.p('<!DOCTYPE html>
<html>
<head>
<style>
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
<script type = "text/javascript" src="functions.js"></script>
</head>
<div id="div_print1" style="margin-top:5px;">
<body>
<table id="customers">
<tr>
<th>SL NO</th>
<th>EMP ID</th>
<th>NAME</th>
<th>PICTURE</th>
</tr>');
for i in mycur loop
htp.p('
<tr>
<td>'||i.IMAGE_ID||'</td>
<td>'||i.NAME||'</td>
<td>'||i.ADDRESS||'</td>
<td style="width: 25%;">'||'<img src="'||apex_util.get_blob_file_src('P3_IMAGE_DATA',i.IMAGE_ID)||'" style="height: 250px;width: 100%;border-radius: 24px;" />'||'</td>
</tr>');
END LOOP;
htp.p('
</table>
<script>
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
//document.getElementById("ftr").style.display = "block";
window.print();
document.body.innerHTML = originalContents;
javascript:apex.submit();
}
</script>
</body>
</div>
</html>
');
END;