Overview
This guide walks you through creating a custom PDF in Oracle APEX
using the jsPDF library.
How do we do
Step 1:
Create necessary page items to get user details from user.Add a button
to your 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);
}
Output:
