Introduction
Taking screenshots is a common need during development, testing, or documentation in Oracle APEX applications. While partial screen captures are easy, capturing a full-page screenshot (including content below the fold) isn’t something APEX supports natively.
Luckily, we can bridge this gap with a simple JavaScript-based solution using the html2canvas library.
This guide walks you through how to integrate full-page screenshot functionality into your Oracle APEX app—step by step!
Why We Need to Do This?
There are several use cases where capturing a full-page screenshot becomes essential:
– Documentation: For reporting or documentation purposes.
– Testing: QA testers can quickly snapshot an entire page state.
– Demonstrations: Capture the entire application flow for presentations.
– User Feedback: Users can share issues with a screenshot of the full screen.
Since APEX does not provide this feature out of the box, we use html2canvas, a lightweight and widely used JavaScript library that can render the DOM to a canvas.
How Do We Solve This?
Step-by-Step Instructions to Capture Full-Page Screenshot
1. Include html2canvas Library
Go to your Oracle
APEX Page > JavaScript > File URLs.
and add the following CDN link:
https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js
2. Create a Screenshot Button
Add a button to your APEX page where users can click to capture the screenshot.
Set the Static ID of the button as:
screenshotBtn
3. Add JavaScript to Trigger the Screenshot
Create a Dynamic Action for the button click event:
– Event: Click
– Selection Type: Button
– Button: screenshotBtn
– True Action: Execute JavaScript Code
Paste the below code in the action:
document.getElementById(“screenshotBtn”).addEventListener(“click”, function () {
html2canvas(document.body, {
scrollY: -window.scrollY, // starts from top of the page
useCORS: true // handles cross-origin images
}).then(function (canvas) {
// Create a download link
var link = document.createElement(“a”);
link.download = “screenshot.png”;
link.href = canvas.toDataURL(“image/png”);
link.click();
});
});
Conclusion
Capturing a full-page screenshot in Oracle APEX can be achieved seamlessly with just a bit of JavaScript and a powerful open-source library like html2canvas.
Whether you need it for documentation, QA, or demo purposes, this method is a simple and effective solution that enhances your app’s usability and presentation.
Integrating such custom features into APEX not only saves time but also opens up possibilities to make your application more user-friendly and efficient.
Apex screen:
Output:
