How to Preview PDF into a Region in Oracle Apex

jABER IT LTDjABER IT LTD -
1
How To Preview PDF Into A Region In Oracle Apex Application

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

123<span class="lit">SELECT</span><span class="pln"> OID</span><span class="pun">,</span><span class="pln"> SLIDER_TEXT</span><span class="pun">,</span><span class="pln"> MIME_TYPE
  FROM SLIDESHOW_IMG
 WHERE OID IS NOT NULL AND MIME_TYPE IS NOT NULL</span>
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

123456789101112<span class="lit">var</span><span class="pln"> fileId </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">triggeringElement</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'id'</span><span class="pun">);</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> docUrl </span><span class="pun">=</span><span class="pln"> </span><span class="str">'https://apex.oracle.com/pls/apex/my_stock/get/view/'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> fileId</span><span class="pun">;</span><span class="pln">

console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">docUrl</span><span class="pun">);</span><span class="pln">
pdfjsLib</span><span class="pun">.</span><span class="pln">getDocument</span><span class="pun">(</span><span class="pln">docUrl</span><span class="pun">).</span><span class="kwd">then</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">pdf</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'pdf loaded'</span><span class="pun">);</span><span class="pln">
    pdfdoc</span><span class="pun">.</span><span class="pln">document </span><span class="pun">=</span><span class="pln"> pdf</span><span class="pun">;</span><span class="pln">
    pdfdoc</span><span class="pun">.</span><span class="pln">currentPage </span><span class="pun">=</span><span class="pln"> </span><span class="lit">1</span><span class="pun">;</span><span class="pln">
    pdfdoc</span><span class="pun">.</span><span class="pln">renderPage</span><span class="pun">(</span><span class="pln">pdfdoc</span><span class="pun">.</span><span class="pln">currentPage</span><span class="pun">);</span><span class="pln">
</span><span class="pun">},</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">reason</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">error</span><span class="pun">(</span><span class="pln">reason</span><span class="pun">);</span><span class="pln">
</span><span class="pun">});</span>

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

1234567<span class="lit">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">pdfdoc</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">var</span><span class="pln"> nextPage </span><span class="pun">=</span><span class="pln"> pdfdoc</span><span class="pun">.</span><span class="pln">getNextPage</span><span class="pun">();</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'next page'</span><span class="pun">,</span><span class="pln"> nextPage</span><span class="pun">);</span><span class="pln">
    </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">nextPage</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        pdfdoc</span><span class="pun">.</span><span class="pln">renderPage</span><span class="pun">(</span><span class="pln">nextPage</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span>
8. Create A Dynamic Action Within The Previous Page Button

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

Paste The Following Code-

1234567<span class="lit">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">pdfdoc</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">var</span><span class="pln"> previousPage </span><span class="pun">=</span><span class="pln"> pdfdoc</span><span class="pun">.</span><span class="pln">getPreviousPage</span><span class="pun">();</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'previous page'</span><span class="pun">,</span><span class="pln"> previousPage</span><span class="pun">);</span><span class="pln">
    </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">previousPage</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        pdfdoc</span><span class="pun">.</span><span class="pln">renderPage</span><span class="pun">(</span><span class="pln">previousPage</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span>
9. Go To Page Properties

Javascript File URLs - Paste The Following Code =

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768<span class="com">//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.550/pdf.min.js</span><span class="pln">
</span><span class="typ">Function</span><span class="pln"> </span><span class="kwd">and</span><span class="pln"> </span><span class="typ">Global</span><span class="pln"> </span><span class="typ">Variable</span><span class="pln"> </span><span class="typ">Declaration</span><span class="pln"> </span><span class="pun">&gt;&gt;</span><span class="pln"> </span><span class="typ">Paste</span><span class="pln"> the following code
</span><span class="kwd">var</span><span class="pln"> pdfdoc </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    canvas</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">,</span><span class="pln">
    document</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">,</span><span class="pln">
    nextButton</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">,</span><span class="pln">
    previousButton</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">,</span><span class="pln">
    numPages</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">document</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="kwd">return</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">numPages</span><span class="pun">;</span><span class="pln">
        </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">;</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    currentPage</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    getNextPage</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> nextPage</span><span class="pun">;</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> currentPage </span><span class="pun">=</span><span class="pln"> pdfdoc</span><span class="pun">.</span><span class="pln">currentPage</span><span class="pun">;</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> document </span><span class="pun">=</span><span class="pln"> pdfdoc</span><span class="pun">.</span><span class="pln">document</span><span class="pun">;</span><span class="pln">

        </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">currentPage</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            nextPage </span><span class="pun">=</span><span class="pln"> currentPage </span><span class="pun">&lt;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">numPages </span><span class="pun">?</span><span class="pln"> currentPage </span><span class="pun">+</span><span class="pln"> </span><span class="lit">1</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">;</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
        </span><span class="kwd">return</span><span class="pln"> nextPage</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    getPreviousPage</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> previousPage</span><span class="pun">;</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> currentPage </span><span class="pun">=</span><span class="pln"> pdfdoc</span><span class="pun">.</span><span class="pln">currentPage</span><span class="pun">;</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> document </span><span class="pun">=</span><span class="pln"> pdfdoc</span><span class="pun">.</span><span class="pln">document</span><span class="pun">;</span><span class="pln">

        </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">currentPage</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            previousPage </span><span class="pun">=</span><span class="pln"> currentPage </span><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">1</span><span class="pln"> </span><span class="pun">?</span><span class="pln"> currentPage </span><span class="pun">-</span><span class="pln"> </span><span class="lit">1</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">;</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
        </span><span class="kwd">return</span><span class="pln"> previousPage</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    renderPage</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">pageNumber</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="pln">pdfdoc</span><span class="pun">.</span><span class="pln">document</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            console</span><span class="pun">.</span><span class="pln">error</span><span class="pun">(</span><span class="str">'Document not loaded.'</span><span class="pun">);</span><span class="pln">
            </span><span class="kwd">return</span><span class="pun">;</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">

        pdfdoc</span><span class="pun">.</span><span class="pln">document</span><span class="pun">.</span><span class="pln">getPage</span><span class="pun">(</span><span class="pln">pageNumber</span><span class="pun">).</span><span class="kwd">then</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">page</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'Page loaded'</span><span class="pun">);</span><span class="pln">
            pdfdoc</span><span class="pun">.</span><span class="pln">currentPage </span><span class="pun">=</span><span class="pln"> pageNumber</span><span class="pun">;</span><span class="pln">

            </span><span class="kwd">var</span><span class="pln"> scale </span><span class="pun">=</span><span class="pln"> </span><span class="lit">1.5</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> viewport </span><span class="pun">=</span><span class="pln"> page</span><span class="pun">.</span><span class="pln">getViewport</span><span class="pun">(</span><span class="pln">scale</span><span class="pun">);</span><span class="pln">

            </span><span class="com">// Prepare canvas using PDF page dimensions</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> canvas </span><span class="pun">=</span><span class="pln"> pdfdoc</span><span class="pun">.</span><span class="pln">canvas</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> context </span><span class="pun">=</span><span class="pln"> canvas</span><span class="pun">.</span><span class="pln">getContext</span><span class="pun">(</span><span class="str">'2d'</span><span class="pun">);</span><span class="pln">
            canvas</span><span class="pun">.</span><span class="pln">height </span><span class="pun">=</span><span class="pln"> viewport</span><span class="pun">.</span><span class="pln">height</span><span class="pun">;</span><span class="pln">
            canvas</span><span class="pun">.</span><span class="pln">width </span><span class="pun">=</span><span class="pln"> viewport</span><span class="pun">.</span><span class="pln">width</span><span class="pun">;</span><span class="pln">

            </span><span class="com">// Render PDF page into canvas context</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> renderContext </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                canvasContext</span><span class="pun">:</span><span class="pln"> context</span><span class="pun">,</span><span class="pln">
                viewport</span><span class="pun">:</span><span class="pln"> viewport
            </span><span class="pun">};</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> renderTask </span><span class="pun">=</span><span class="pln"> page</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="pln">renderContext</span><span class="pun">);</span><span class="pln">
            renderTask</span><span class="pun">.</span><span class="kwd">then</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'Page rendered'</span><span class="pun">);</span><span class="pln">
                $</span><span class="pun">(</span><span class="pln">pdfdoc</span><span class="pun">.</span><span class="pln">nextButton</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'disabled'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">(</span><span class="pln">pdfdoc</span><span class="pun">.</span><span class="pln">currentPage </span><span class="pun">&gt;=</span><span class="pln"> pdfdoc</span><span class="pun">.</span><span class="pln">document</span><span class="pun">.</span><span class="pln">numPages</span><span class="pun">));</span><span class="pln">
                $</span><span class="pun">(</span><span class="pln">pdfdoc</span><span class="pun">.</span><span class="pln">previousButton</span><span class="pun">).</span><span class="pln">attr</span><span class="pun">(</span><span class="str">'disabled'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">(</span><span class="pln">pdfdoc</span><span class="pun">.</span><span class="pln">currentPage </span><span class="pun">&lt;=</span><span class="pln"> </span><span class="lit">1</span><span class="pun">));</span><span class="pln">
            </span><span class="pun">});</span><span class="pln">
        </span><span class="pun">});</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">};</span>
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.

Then Enjoy.........................

1 Comments

Hlo Sir

Previous Post Next Post