📃PDF Viewer

View PDF files instantly within the app environment, eliminating the need to download the document first or redirect the user to an external device browser

🧋 Bubble.io Plugin

[Action] Natively - Open PDF

• URL - the direct URL address pointing to the PDF file (e.g., https://example.com/document.pdf)

• Base64 - the Base64 encoded string representing the entire PDF file

• File name - custom filename for the PDF when displayed or downloaded. If not provided, a default name with timestamp will be generated: {timestamp}.pdf

• Download - yes/no - controls whether to show the download button in the PDF viewer

Either URL or Base64 must be provided.

How to use

The native PDF Viewer is triggered via a single action in your workflow: Natively - Open PDF action

1. URL or Base64 - Required - Specify either the URL address pointing to the PDF file or the Base64 encoded string of the file content.

2. File name - Optional - Provide a file name (e.g., invoice_Q4.pdf)

3. Download - Required - Specify yes or no

🛠 JavaScript SDK

// Open from URL with Download Button
window.natively.openPDF({
    url: 'https://example.com/documents/guide.pdf',
    fileName: 'UserGuide.pdf',
    download: true
}, (response) => {
    console.log('PDF Viewer action:', response);
});
// Open from Base64 Data
window.natively.openPDF({
    base64: 'JVBERi0xLjMKJcTl8uXrp...', // Truncated for brevity
    fileName: 'GeneratedReport.pdf',
    download: false
}, (response) => {
    if (response.status === 'FAILED') {
        console.error(''PDF Viewer action:', response.message);
    }
});
//Response structure
{
  "status": "SUCCESS",  // or "FAILED" if an error occurred
  "message": "PDF viewed successfully"  // or error message
}

Download Functionality

When the user taps the Download button within the native PDF Viewer, the following sequence occurs:

• The PDF file is saved directly to the device's default Downloads folder.

• A snackbar notification appears at the bottom of the screen to indicate the success or failure of the download process.

• The download button is replaced with a green checkmark icon to provide immediate visual confirmation that the file has been successfully saved to the device.