Dynamic Printable PDF Document in Oracle APEX

Dynamic Printable PDF Document in Oracle APEX

Introduction

In this document, we demonstrate how to create a dynamic printable document in Oracle APEX using a Dynamic Content Region.The content is generated at runtime using PL/SQL (Function Body returning CLOB) and rendered as HTML. A Print button is provided to allow users to print only the required section of the page using JavaScript.This approach is commonly used for documents like Delivery Challans, Invoices, Receipts, and Reports.

The following technologies has been used to achieve the same.
Oracle APEX
JavaScript,SortableJS Library
AJAX Callbacks
PL/SQL
HTML & CSS

Why We Need to Do This?

1.Dynamic Documents
Data such as dates, customer details, and item lists must be fetched dynamically from the database.

2.Printable Layout
Users often need a clean, formatted print output without APEX headers, menus, or buttons.

3.No External Reports Needed
Avoids dependency on BI Publisher or external reporting tools for simple documents.

4.Real-Time Data Rendering
Displays the latest data at the time of printing.

5.User-Friendly Experience
One-click print option directly from the APEX page.

How Do We Solve It?

Below are the steps to implement the Dynamic Kanban Board in Oracle APEX.
Step 1: Create a Dynamic Content Region
Set Region Type to Dynamic Content.
Set Source Type to PL/SQL Function Body returning a CLOB.

PLSQL CODE:

DECLARE
  l_html CLOB;
BEGIN
    l_html := '<div style="width:100%; font-family:Arial; font-size:13px;" id="printableArea">' ||
  -- Header
    '<div style="text-align:center; margin-bottom:15px;">' ||
    '  <h2 style="margin:0;">MNO HEALTHCARE LIMITED</h2>' ||
    '  <div>Delivery Challan</div>' ||    '  <hr>' ||    '</div>' ||

-- Sender & Receiver
    '<table style="width:100%; border-collapse:collapse; margin-bottom:15px;">' ||
    '<tr>' ||
    ' <td style="width:50%; padding:6px; border:1px solid #000;">' ||
    '   <b>Sender Details</b><br>' ||
    '   Name : ABC Company<br>' ||
    '   Date : ' || TO_CHAR(SYSDATE,'DD/MM/YYYY') || '<br>' ||
    ' </td>' ||
    ' <td style="width:50%; padding:6px; border:1px solid #000;">' ||
    '   <b>Receiver Details</b><br>' ||
    '   Name : XYZ Company<br>' || ' </td>' ||'</tr>' || '</table>' ||

 -- Item Table
    '<table style="width:100%; border-collapse:collapse;">' ||
    '<tr>' ||
    ' <th style="border:1px solid #000;">Sl No</th>' ||
    ' <th style="border:1px solid #000;">Description</th>' ||
    ' <th style="border:1px solid #000;">Qty</th>' ||
    ' <th style="border:1px solid #000;">Rate</th>' ||
    ' <th style="border:1px solid #000;">Amount</th>' ||
  '</tr>';

    -- Sample Data
    FOR r IN (SELECT empno, ename, sal FROM emp WHERE ROWNUM <= 3) LOOP
        l_html := l_html ||
        '<tr>' ||
        ' <td style="border:1px solid #000; text-align:center;">' || r.empno || '</td>' ||
        ' <td style="border:1px solid #000;">' || r.ename || '</td>' ||
        ' <td style="border:1px solid #000; text-align:center;">1</td>' ||
        ' <td style="border:1px solid #000; text-align:right;">' || r.sal || '</td>' ||
        ' <td style="border:1px solid #000; text-align:right;">' || r.sal || '</td>' ||
        '</tr>';
    END LOOP;

  l_html := l_html ||'</table>' ||

    -- Footer
    '<div style="margin-top:15px;">' ||
    ' <b>Declaration:</b> Not for sale. Job work only.' ||
    '</div>' ||
    '<div style="margin-top:25px; text-align:right;">' ||
    ' Authorized Signatory' ||
    '</div>' ||
    '</div>';
 RETURN l_html;
END;

Step 2: Create JavaScript Print Function

Add the following function under Function and Global Variable Declaration.This ensures only the required region is printed.

 

Javascript Code:
function printDiv(printableArea) {
 var printContents = document.getElementById(printableArea).innerHTML;
 var originalContents = document.body.innerHTML;
 document.body.innerHTML = printContents;
 window.print();
 document.body.innerHTML = originalContents;
}

Step 3: Create Print Button & Dynamic Action
Create a button (e.g., PRINT)
Add a Click Dynamic Action
Action: Execute JavaScript Code

Javascript Code:
printDiv('printableArea');



Conclusion

By using a Dynamic Content Region with PL/SQL and JavaScript, we can easily generate professional, printable documents directly within Oracle APEX.This approach is lightweight, flexible, and ideal for real-time business documents such as Delivery Challans, Invoices, and Acknowledgements, while keeping the user experience simple and efficient.

Output

 

Recent Posts