QuickCapture is a high-performance, lightweight tool for OutSystems Reactive and Mobile applications. It allows users to capture specific screen areas and export them as high-quality PDF documents or PNG images directly in the browser.
100% Client-Side: No data ever leaves the user's browser. Processing is done locally, ensuring maximum privacy and GDPR compliance.
High Resolution: Built-in 2x scaling ensures that charts, tables, and dashboards remain crisp in the exported file.
Zero External Dependencies: No need for expensive server-side printing services or third-party APIs.
Smart Rendering: Advanced handling for CORS images and custom backgrounds to prevent blank exports.
Multi-Instance Support: Designed to work perfectly even if multiple export blocks are placed on the same screen.
On your screen, identify the Container you want to export.
Give it a Name (e.g., MonthlyReportContainer).
MonthlyReportContainer
The component will use this element's Runtime ID.
Drag the ExportContainer block onto your screen.
ExportContainer
Best Practice: Place the block outside the target container to prevent the "Export" button from appearing in the final document.
MonthlyReportContainer.Id
"Financial_Report_2026"
"pdf"
"png"
"Export to PDF"
CORS Images: If your container includes images hosted on external domains (URLs), the hosting server must allow CORS. If not, the browser will block the capture of those specific pixels for security reasons.
Visibility: The component can only capture elements that are currently visible in the DOM. It will not work on containers inside closed tabs or hidden via display: none.
display: none
Module Naming: To ensure smooth script loading, it is recommended to name your module without spaces (e.g., LocalExportUtils).
LocalExportUtils
Outside Clicks: The menu is designed to close automatically when clicking outside. This is handled via a unique listener tied to the block's internal ID, ensuring no conflicts with other menus on the same page.
This component leverages the power of:
html2canvas: For DOM-to-Canvas pixel mapping.
jsPDF: For generating client-side PDF blobs.
Empty File (0 bytes): Ensure the TargetContainerId is passed correctly and the element is visible on the screen.
TargetContainerId
Text/Images Missing: Check for CORS restrictions on external assets or ensure all web fonts are fully loaded before exporting.
Para que o teu componente seja um sucesso na Forge, a documentação precisa de ser clara tanto para quem é júnior como para especialistas. Aqui tens uma estrutura completa, formatada em Markdown, pronta para copiar e colar na aba Documentation da Forge.
LocalPDF & PNG Exporter provides a simple, client-side solution to capture any part of your OutSystems Reactive or Mobile application and save it as a high-quality PDF or PNG. Since all processing happens in the user's browser, it is fast, secure, and GDPR-compliant.
Privacy First: No data is sent to external APIs or servers.
High Resolution: Automatic 2x scaling for crisp images and professional-looking PDFs.
Easy Setup: Just drop the block, point to a Container ID, and you're done.
CORS Support: Optimized to handle external images and complex CSS backgrounds.
Ensure the container you want to export has a Name property defined in the Service Studio (e.g., ReportingArea).
ReportingArea
Important: For best results, place the block outside the container you intend to export to avoid recursive rendering issues.
Fill in the input parameters:
TargetContainerId: Pass the Runtime ID of your target (e.g., ReportingArea.Id).
ReportingArea.Id
Filename: Set the name of the file (e.g., "Dashboard_April").
"Dashboard_April"
ExportFormat: Choose between "pdf" or "png".
ButtonLabel: Customize the button text (e.g., "Download Report").
"Download Report"
If your container includes images hosted on a different domain, the external server must allow CORS (Cross-Origin Resource Sharing). If it doesn't, the images will not appear in the exported file due to browser security restrictions.
The component can only capture what is currently rendered. Ensure the target container is not hidden (e.g., inside a closed tab or an If widget set to False) at the moment of export.
If
False
To avoid script loading errors (404), it is highly recommended to name your module without spaces (e.g., LocalExportTool).
LocalExportTool
Q: Why is my PNG 0 bytes or blank? A: This usually happens if the TargetContainerId is incorrect or if the container is hidden via CSS (display: none). Ensure the ID is passed correctly and the element is visible.
Q: Does this work on Mobile? A: Yes! This component is compatible with both Reactive Web and Mobile apps, as it relies on standard browser APIs.
Built using the powerful libraries:
html2canvas (for DOM to Canvas conversion)
jsPDF (for PDF generation)