Long Screenshot feature in APEX
Capture the Entire APEX Page Screenshot
Where It All Started
A few months back, one of our project team members asked me a simple question: "Can we let users take a screenshot of the entire page?" I said, "Sure, that should be easy!" and immediately regretted it.
"I tried using the browser's built-in screenshot option first. But it only captured what was visible on the screen. Anything below the fold was missing. That was not going to work for our use case."
So I went looking for alternatives. I tried a few browser extension based approaches but those obviously would not work for end users who don't have the extension installed. Then I found html2canvas and things started to make sense.
Why Would You Even Need This?
Honestly, at first I thought it was a niche requirement. But after deploying it, the team started using it for so many things:
Quick page snapshots for user guides.
QA could snapshot the exact state before reporting a bug.
Capture live app screens for presentations.
Users share issues along with a full page snapshot.
So yeah, it turned out to be more useful than I expected. Now let me walk you through exactly how I set it up.
How I Finally Got It Working
The solution comes down to three steps. It is simpler than it looks, I promise. The first time I tried, I actually missed one tiny thing which caused the screenshot to look completely blank. I will mention that too.
Load the html2canvas Library
Go to your Oracle APEX Page, then open JavaScript and look for the File URLs section. Add this CDN link there:
This tells APEX to load the library before running your page JavaScript. No npm, no build step, nothing complicated.
One issue I faced here was that I initially put the CDN link in the wrong place and the library was loading after my JavaScript tried to call it. Make sure it's in the File URLs section so it loads first.
Add a Screenshot Button to the Page
Add a regular Button component anywhere on your APEX page. The only important thing here is setting its Static ID to exactly:
screenshotBtn
The JavaScript we write next will look for this ID. If the ID is different, nothing will happen when you click the button. I forgot this the first time and spent 20 minutes wondering why nothing worked.
Button label can be anything you like. "Download Screenshot", "Save Page", "Take Snapshot" - whatever makes sense for your users. Only the Static ID matters here.
Wire Up the JavaScript via Dynamic Action
Create a Dynamic Action on the button. Set it up like this:
- Event: Click
- Selection Type: Button
- Button: screenshotBtn
- True Action: Execute JavaScript Code
Then paste this code in the Execute JavaScript Code action:
document.getElementById("screenshotBtn").addEventListener("click", function () { html2canvas(document.body, { scrollY: -window.scrollY, useCORS: true }).then(function (canvas) { var link = document.createElement("a"); link.download = "screenshot.png"; link.href = canvas.toDataURL("image/png"); link.click(); }); });
"The first time I ran this, the screenshot was totally blank. After some digging I realized I forgot to pass scrollY: -window.scrollY. That line tells html2canvas to start from the top of the page rather than your current scroll position. Once I added that, the full page captured perfectly."
The useCORS: true part is needed if your page has images loaded from a different domain. Without it, those images might not show up in the screenshot. Better to keep it in.
So What Actually Happens Behind the Scenes?
I was curious about this myself. html2canvas takes your entire document.body and draws it onto an HTML Canvas element. Think of it like taking a photo of the DOM. Once it has that canvas, converting it to a PNG is just one line of code. The download is triggered programmatically by clicking a hidden link, so the user just sees the file appear in their downloads folder.
The whole thing runs in the browser. There is no server involved, no file upload, no backend API calls. It is all client side. For an APEX app where you might not want to send data back to the server just for a screenshot, this is a nice clean approach.
Finally this approach worked without any issues. The screenshot captures the full page height including all the content below the fold, all charts, all tables, everything. It downloads as a PNG file directly.
Wrapping Up
It took me longer than I expected to get this working correctly, mostly because of that scrollY detail. But once it clicked, it really was just three steps and a handful of lines of JavaScript.
If your users or QA team ever complain about not being able to capture the whole page, this is the simplest fix you can drop into any APEX application. No plugins, no paid tools, no server side work needed.
Happy Snapping! 📸
Comments
Post a Comment