How to Preview PDF into a Region in Oracle Apex

How To Preview PDF Into A Region In Oracle Apex Application

In This Post, I Have Tried To Show A Detailed Discussion On How To Preview The PDF File Of Region In The Oracle Apex Application.

Preview Pdf Into A Region In Oracle Apex.

You Must Know Oracle Restful Services To Display The Preview PDF File Apex And Use Restful Services To Display The Preview PDF File. If You Don't Know The Details About Restful Services, You Can Visit My Post About Restful Services Or Visit My YouTube Channel. This Method Will Show You The Preview PDF File, How To Go To the Next Page, The Previous Page, Detailed SQL Code, And The Whole Process.

🔗 How To Use ORDS RESTful Services -
URL- https://youtu.be/jmx1GenEYlM

Steps How To Preview PDF into a Region in Oracle Apex.

I will try to show you step by step How To Preview PDF into a Region in Oracle Apex.

1. Create a New Blank page

Name-Preview PDF Into a Region

2. Create a Classic Report

Name-File List

Type - SQL Query

SELECT OID, SLIDER_TEXT, MIME_TYPE
  FROM SLIDESHOW_IMG
 WHERE OID IS NOT NULL AND MIME_TYPE IS NOT NULL

3. Change OID Column Heading

Name -View Type-Link Target URL = javascript:void(null); Link Text-View Link Attributes-class = "btn-preview-pdf button6" data-id="#OID#"

4. Create a New Reagion

Name - Preview PDF
Source – HTML Code = <canvas id="preview-pane"> </canvas>

5. Create two Buttons

Name - NEXT_PAGE, PREVIOUS_PAGE

6. Create a Dynamic Action

Name- onClickPreviewButton
Action - Click
Selection Type - jQuery Selector
jQuery Selector - .btn-preview-pdf

Action - Execute JavaScript code - Code -
Paste The Following Code

var fileId = $(this.triggeringElement).data('id');
var docUrl = 'https://apex.oracle.com/pls/apex/my_stock/get/view/' + fileId;

console.log(docUrl);
pdfjsLib.getDocument(docUrl).then(function(pdf) {
    console.log('pdf loaded');
    pdfdoc.document = pdf;
    pdfdoc.currentPage = 1;
    pdfdoc.renderPage(pdfdoc.currentPage);
}, function(reason) {
    console.error(reason);
});

Affected Elements - Selection Type - jQuery Selector
jQuery Selector = #preview-pane

7. Create A Dynamic Action Within The Next Page Button

Name- onClickNextPage
Action - Execute JavaScript code - Code

Paste the following code

if (pdfdoc) {
    var nextPage = pdfdoc.getNextPage();
    console.log('next page', nextPage);
    if (nextPage) {
        pdfdoc.renderPage(nextPage);
    }
}

8. Create A Dynamic Action Within The Previous Page Button

Name- onClickPreviousPage < br/ > Action - Execute JavaScript code - Code

Paste The Following Code-

if (pdfdoc) {
    var previousPage = pdfdoc.getPreviousPage();
    console.log('previous page', previousPage);
    if (previousPage) {
        pdfdoc.renderPage(previousPage);
    }
}

9. Go To Page Properties

Javascript File URLs - Paste The Following Code =

//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.550/pdf.min.js
Function and Global Variable Declaration >> Paste the following code
var pdfdoc = {
    canvas: null,
    document: null,
    nextButton: null,
    previousButton: null,
    numPages: function() {
        if (document) {
            return document.numPages;
        } else {
            return null;
        }
    },
    currentPage: 1,
    getNextPage: function() {
        var nextPage;
        var currentPage = pdfdoc.currentPage;
        var document = pdfdoc.document;

        if (currentPage) {
            nextPage = currentPage < document.numPages ? currentPage + 1 : null;
        }
        return nextPage;
    },
    getPreviousPage: function() {
        var previousPage;
        var currentPage = pdfdoc.currentPage;
        var document = pdfdoc.document;

        if (currentPage) {
            previousPage = currentPage > 1 ? currentPage - 1 : null;
        }
        return previousPage;
    },
    renderPage: function(pageNumber) {
        if (!pdfdoc.document) {
            console.error('Document not loaded.');
            return;
        }

        pdfdoc.document.getPage(pageNumber).then(function(page) {
            console.log('Page loaded');
            pdfdoc.currentPage = pageNumber;

            var scale = 1.5;
            var viewport = page.getViewport(scale);

            // Prepare canvas using PDF page dimensions
            var canvas = pdfdoc.canvas;
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            var renderTask = page.render(renderContext);
            renderTask.then(function() {
                console.log('Page rendered');
                $(pdfdoc.nextButton).attr('disabled', (pdfdoc.currentPage >= pdfdoc.document.numPages));
                $(pdfdoc.previousButton).attr('disabled', (pdfdoc.currentPage <= 1));
            });
        });
    }
};

10. Create A Dynamic Action Within Page Load

Name- onPageLoad
1. Action - Execute JavaScript code - Code >> Paste The Following Code
pdfdoc.canvas = this.affectedElements[0];
Affected Elements >> Selection Type- jQuery Selector
jQuery Selector- #preview-pane

2. Action- Execute JavaScript code - Code - Paste The Following Code
pdfdoc.nextButton = this.affectedElements[0];
Affected Elements - Selection Type- Button
Button- NEXT_PAGE

3. Action - Execute JavaScript code - Code - Paste the following code
pdfdoc.previousButton = this.affectedElements[0];
Affected Elements >> Selection Type- Button
Button- PREVIOUS_PAGE

Visit My Site To Get More Collaborative Posts About Oracle Apex And Subscribe To My YouTube Channel.

How To Preview PDF Into A Region In Oracle Apex We Hope You Find This Post Useful And Useful. Comment On Any Of Your Problems And Preview PDF Into A Region In Oracle Apex, I Will Try My Best To Solve The Problem, In-shah Allah. Everyone's Cooperation Is Desirable. Visit My Blog Site, New Technology-related Videos, You Will Get Different Types Of Tutorials Of Oracle Apex, Hopefully, You Can Use Them In Your Daily Work.

If There Is Any Problem With The SQL Code Provided By Me, Then You Can Definitely Let Me Know By Mail Or Mobile Number And Comment. I Must Give You Any SQL Code.

Links To All The Parts Related To User Authorization Will Be Given Below.

🔗 User Authorization Related To All Post-
URL- https://www.jaberit.com/search/label/User_Authentication

User Authorization Is An Important Issue For Any Web Application. Without The Use Of “User Authorization”, No Application Is Complete. I Will Try To Show All The Important Things In The Oracle Apex Application Through A Few Parts, Including User Login According To “User Authorization”, User Role, User Log, User Menu Usage. Below Is The Link To All The Posts Related To User Authorization. Can Turn Around A Little If Needed.

🔗 Demo Application-
URL- Demo Application
Username - demo, Pass- demo

I hope everyone will like it. Please watch the full video, Comment on any of your problems,
I will try my best to solve the problem,In-Shah Allah. Everyone's cooperation is desirable. Visit my blog site, new technology related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
Please stay tuned by subscribing to the YouTube channel, and encourages new videos to be uploaded
=================
Visit my site to get more collaborative posts about Oracle Apex and subscribe to my YouTube channel. Thanks.
Comment on any of your issues, I will try my best to solve the problem, In-Shah Allah. Everyone' s cooperation is desirable.
Visit my blog site, New technology-related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work
==============================

🙍🏾‍ Md jABER HOSSEN
📲 Mobile-+8801760688286
📨 Email- jaberit786@gmail.combr /> 🌐 FB- facebook.com/mdjaber.hossen1
Please Subscribe to My Channel

Many thanks for visiting the site.