HTML Code:
declare
cursor c1 is
select rownum sl, item_name, item_no from items
where cat_id = apex_application.g_x01
and item_type = apex_application.g_x02;
begin
htp.p('
<div id="print_area">
<div class="rpt-main">
<div class="rpt-header">
<h2>ABC COMPANY LIMITED</h2>
<p>Akshya Nagar 1st Block 1st Cross, Rammurthy nagar, Bangalore-560016</p>
</div>
<div class="rpt-content">
<span>'||get_category(apex_application.g_x01)||' Report</span>
<table class="rpt-tbl">
<thead>
<tr>
<th>SL#</th>
<th>Item Name</th>
<th>Item No</th>
</tr>
</thead>
<tbody>');
for i in c1
loop
htp.p('
<tr>
<td>'||i.sl||'</td>
<td>'||i.item_name||'</td>
<td>'||i.item_no||'</td>
</tr>');
end loop;
htp.p('
</tbody>
</table>
</div>
</div>
</div>
');
end;
CSS CODE
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.rv-box
{
margin: 0 auto;
min-height: 550px;
color: #ddd;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.rv-box span:last-child {
font-size: 25px;
margin-top: 10px;
}
.rpt-main {
width: 29cm;
height: 22cm;
margin: 0 auto;
font-size: 13pt;
font-family: 'Roboto', sans-serif;
}
.rpt-header {
width: 100%;
padding-left: 10pt;
padding-right: 10pt;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 30pt;
}
.rpt-header h2 {
margin: 0;
padding: 0;
}
.rpt-header p {
margin: 0;
padding: 0;
width: 200pt;
text-align: center;
}
.rpt-content
{
display: flex;
flex-direction: column;
}
.rpt-content>span
{
font-size: 20pt;
padding: 10pt;
width: 100%;
background-color: #ddd;
text-align: center;
margin-top: 15pt;
margin-bottom: 10pt;
}
.rpt-tbl
{
width: 100%;
border-collapse: collapse;
}
.rpt-tbl tr, .rpt-tbl tr th, .rpt-tbl tr td {
border: 1pt solid #222;
}
.rpt-tbl tr td, .rpt-tbl tr th {
padding: 10pt;
}
.rpt-tbl tr td:first-child {
text-align: center;
}
Javascript:
function run_report(){
apex.server.process("CAT_REPORT",
{x01:apex.item('P9_CAT_ID').getValue(), x02:apex.item('P9_ITEM_TYPE').getValue()},
{dataType: 'text',
success: function(pData){
$("#cat_rpt").html(pData);
}});
}
function printOrderReport(x){
var headerstr = "<!DOCTYPE html><html><head><title></title></head><body>";
var footerstr = "</body>";
var newstr = document.all.item(x).innerHTML;
document.body.innerHTML = headerstr+newstr+footerstr;
window.print();
location.reload();
return false;
}
