Hello @Siaming Ming,

Please use Window.open() Method to open a new window.

window.open(fileUrl, '_blank');

Hope it helps.

Thank you.

Hi @Siaming Ming,

Can you please look into the existing solution for your requirement.

https://www.outsystems.com/forums/discussion/73748/pdf-preview-in-a-new-window-reactive/

hi @Siaming Ming 

You can check this post:

https://fabiogod.medium.com/using-javascript-to-open-large-pdf-files-in-a-new-window-in-outsystems-4e196b8d2402

I hope this helps

Thanks

Hello @Siaming Ming,

Use the JS code below to open a PDF in a new window, replace google.com to you PDF path

1. const popup= window.open("https://www.google.com", '_blank', 'width=800,height=600');
2. if (!popup ) {
3.   alert('Please allow pop-ups in your browser to open the file.');
4. }

Thanks

Regards,

Gourav Shrivastava

Hi @Siaming Ming,

Below JS is for JPG, JPEG, and PNG image - 

(function () {

    const fileName = $parameters.FileName;

    const fileExtension = $parameters.FileExtension.toLowerCase();

    let base64Data = $parameters.Base64File;

    const fullFileName = `${fileName}`;

    // If base64 string includes data URI prefix, strip it

    if (base64Data.startsWith('data:')) {

        base64Data = base64Data.split(',')[1];

    }

    // Decode base64 to binary

    const byteCharacters = atob(base64Data);

    const byteNumbers = new Array(byteCharacters.length);

    for (let i = 0; i < byteCharacters.length; i++) {

        byteNumbers[i] = byteCharacters.charCodeAt(i);

    }

    const byteArray = new Uint8Array(byteNumbers);

    // MIME types

    const mimeTypes = {

        jpg: "image/jpeg",

        jpeg: "image/jpeg",

        png: "image/png"

    };

    const mimeType = mimeTypes[fileExtension] || "application/octet-stream";

    const blob = new Blob([byteArray], { type: mimeType });

    const fileURL = URL.createObjectURL(blob);

    if (["jpg", "jpeg", "png"].includes(fileExtension)) {

        const contentHTML = `

                ${fileName}

                    body {

                        margin: 0;

                        background: #f8f9fa;

                        font-family: Arial, sans-serif;

                    }

                    .top-bar {

                        display: flex;

                        justify-content: space-between;

                        align-items: center;

                        background-color: #ffffff;

                        padding: 10px 20px;

                        box-shadow: 0 2px 5px rgba(0,0,0,0.1);

                    }

                    .filename {

                        font-size: 16px;

                        color: #012E5D;

                        font-weight: bold;

                    }

                    .download-btn {

                        background-color: #012E5D;

                        color: white;

                        text-decoration: none;

                        padding: 8px 16px;

                        border-radius: 4px;

                        font-weight: bold;

                        font-size: 14px;

                    }

                    .image-container {

                        text-align: center;

                        margin-top: 20px;

                    }

                    img {

                        max-width: 95%;

                        height: auto;

                    }

                    Download

${FileName}

        `;

        const htmlBlob = new Blob([contentHTML], { type: 'text/html' });

        const htmlBlobURL = URL.createObjectURL(htmlBlob);

        const newTab = window.open(htmlBlobURL, '_blank');

        if (!newTab) {

            alert("Popup blocked! Please allow popups for this site.");

        }

        return;

    }

    alert("Unsupported file type: " + fileExtension);

})();

For PDF use the below Forge Component which also have a view layout - 
pdfjs-viewer-reactive-o11