Creating Custom PDFs Using jsPDF in Apex

Introduction:-

 Creating downloadable PDFs directly from our Oracle APEX application can significantly enhance the user experience—especially for generating reports, invoices, or summaries. In this guide, we’ll walk through how to use the jsPDF JavaScript library to create custom PDFs within Oracle APEX. We’ll learn how to structure content, add text in the PDF.

The following technologies has been used to achieve the same.

Oracle APEX
Java Script

Why We Need to Do This?

1. Export User Data Easily:-

Generate downloadable PDFs directly from APEX forms, allowing users to quickly save or share their profile information in a structured format.

2.Enhance User Experience:-

Providing a one-click option to download filled-in data increases user convenience and professionalism in our application.

3.Include Images and Branding:-

jsPDF allows embedding profile pictures, logos, or signatures, helping create visually rich and branded documents.

How Do We Solve This?

Step 1: Create necessary page items to get user details from user.Add a button to our page, for example, labeled “Generate PDF”.Set button action to “Defined by Dynamic Action” .

Step 2: Include the jsPDF Library: Go to Page Designer > JavaScript > File URLs.

Add this CDN URL for the jsPDF library:
https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js

Step 3: Create a Dynamic Action,
Event: Click

Selection Type: Button
Add JavaScript Code to Generate the PDF,Add a True Action of type Execute JavaScript Code.

JavaScript Code:

// Import jsPDF from the global window object
var { jsPDF } = window.jspdf;

// Gather form values from page items
var ename = $v('P8_NAME');
var email = $v('P8_EMAIL_ID');
var phone = $v('P8_PHONE_NUMBER');

// Function to generate and download the PDF with optional image
function generatePDFWithImage(imgDataUrl) {
var doc = new jsPDF();

// PAGE DIMENSIONS
var pageWidth = doc.internal.pageSize.getWidth();

// --- MAIN HEADING ---
doc.setFont("helvetica", "bold");
doc.setFontSize(24);
doc.setTextColor(10, 10, 80);
var mainTitle = 'My Custom PDF Report';
var textWidth = doc.getTextWidth(mainTitle);
var xPos = (pageWidth - textWidth) / 2;  // Center horizontally
var yPos = 18;                           // Vertical position from top
doc.text(mainTitle, xPos, yPos);

// --- SECTION BORDER ---
var sectionX = 15,
sectionY = 30,
sectionW = 180,
sectionH = 80;
doc.setDrawColor(0, 150, 200); // Light blue border
doc.setLineWidth(1.5);
doc.rect(sectionX, sectionY, sectionW, sectionH);

// --- SECTION TITLE ---
doc.setFont("helvetica", "bold");
doc.setFontSize(18);
doc.setTextColor(40, 40, 120);
doc.text('User Profile', sectionX + 5, sectionY + 12);

// --- USER DETAILS (LEFT SIDE) ---
var leftX = sectionX + 8;
var valX = leftX + 35;
var startY = sectionY + 25;
var lineHeight = 14;

// Name Label & Value
doc.setFont("helvetica", "bold");
doc.setFontSize(12);
doc.setTextColor(0, 102, 204);  // Blue
doc.text('Name:', leftX, startY);
doc.setFont("helvetica", "normal");
doc.setTextColor(60, 60, 60);   // Dark gray
doc.text(ename, valX, startY);

// Email Label & Value
 doc.setFont("helvetica", "bold");
 doc.setTextColor(0, 102, 204);
doc.text('Email:', leftX, startY + lineHeight);
doc.setFont("helvetica", "normal");
doc.setTextColor(60, 60, 60);
doc.text(email, valX, startY + lineHeight);

// Phone Label & Value
doc.setFont("helvetica", "bold");
doc.setTextColor(0, 102, 204);
doc.text('Phone:', leftX, startY + 2 * lineHeight);
doc.setFont("helvetica", "normal");
doc.setTextColor(60, 60, 60);
doc.text(phone, valX, startY + 2 * lineHeight);

// --- PROFILE IMAGE (RIGHT SIDE) ---
var imgW = 50;
var imgH = 50;
var imgX = sectionX + sectionW - imgW - 10;
var imgY = sectionY + 15;

if (imgDataUrl) {
 // Draw border around image
doc.setDrawColor(160, 160, 160); // Gray border
doc.setLineWidth(1);
doc.rect(imgX - 2, imgY - 2, imgW + 4, imgH + 4);
// Add image
doc.addImage(imgDataUrl, 'JPEG', imgX, imgY, imgW, imgH);
} else {
// If no image, display placeholder text
doc.setFontSize(11);
doc.setTextColor(140, 140, 140);
doc.text('No Profile Picture', imgX, imgY + imgH / 2);
}

// --- VERTICAL SEPARATOR LINE ---
var sepX = imgX - 13;
doc.setDrawColor(200, 220, 255);
doc.setLineWidth(1);
doc.line(sepX, sectionY + 8, sepX, sectionY + sectionH - 8);

// Save/download the PDF file
doc.save('UserDetails.pdf');
}

// Convert file input (file browse) image to base64 DataURL and generate PDF
var fileInput = document.getElementById('P8_PROFILE');
if (fileInput && fileInput.files && fileInput.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
generatePDFWithImage(e.target.result);
 };
 reader.readAsDataURL(fileInput.files[0]);
} else {
generatePDFWithImage(null);
}

Conclusion:-

 Using jsPDF in Oracle APEX provides a powerful and user-friendly way to generate dynamic, downloadable PDF documents directly from user input. It enhances the application’s functionality by enabling offline access, ensures consistency in data presentation, and supports richer content like profile images.

Output:-

Recent Posts