1 2 Previous Next 20 Replies Latest reply: Jul 13, 2012 7:12 AM by Sudhir_Meru RSS

    Display PDF in Apex Region

    Sudhir_Meru
      Hi,

      I have a requirement to view the PDF content in the apex page region, I am using Apex 3.2 and Oracle 10 Enterprise edition.

      I Uploaded the PDF file in the shared component under static file. Now i need to view the content of the PDF file.

      Please suggest me method to view the PDF content.

      I saw the link in denes blog here he shows how the PDF is getting displayed. but there is no steps of methods mentioned

      >>http://htmldb.oracle.com/pls/otn/f?p=31517:108:56351399589001:::::

      Please suggest.

      Thanks
      Sudhir
        • 1. Re: Display PDF in Apex Region
          VC
          Hi Sudhir,

          Just use HTML iframe tag inside a HTML region of APEX
          <iframe src="#WORKSPACE_IMAGES#yourfile.pdf" height="880" width="660"></iframe>
          • 2. Re: Display PDF in Apex Region
            Sudhir_Meru
            I tried this method it's not showing me the content in the region. It goes to download option. Either to open or Save the file.

            I am using Internet explorer 8


            Thanks
            Sudhir
            • 3. Re: Display PDF in Apex Region
              VC
              Sudhir,

              Try
              <embed src="#WORKSPACE_IMAGES#yourfile.pdf" width="500" height="375">
              • 4. Re: Display PDF in Apex Region
                Sudhir_Meru
                Hi,

                I have uploaded the file in shared components under static file with name tos.pdf.

                Created a HTML region and added the below code in region source

                >> <embed src="#WORKSPACE_IMAGES#tos.pdf" width="600" height="500">

                Still not able to see the PDF content in the region. Not sure were is the mistake now. Please guide me


                Thanks
                Sudhir
                • 5. Re: Display PDF in Apex Region
                  VC
                  I have uploaded the pdf into shared components > images and the iframe tag is working fine

                  See this live example http://apex.oracle.com/pls/apex/f?p=46417:32

                  Can you reproduce your problem on apex.oracle.com?
                  • 6. Re: Display PDF in Apex Region
                    Sudhir_Meru
                    Hi,

                    Created a sample application apex.oracle.com


                    WORKSPACE: MERUDEV
                    USER ID : SUDHIRN@MERUNETWORKS.COM
                    PASSWORD : MERUDEV


                    Application = 12987

                    Application User ID : sudhirn@merunetworks.com
                    Password: MERUDEV

                    Have uploaded the file in shared compoent >> static files


                    Thanks
                    Sudhir
                    • 7. Re: Display PDF in Apex Region
                      VC
                      It is working now ! on page 3 which is iframe tag

                      The problem was you have entered the pdf file name in wrong case and also there was unwanted parameter something like &p_inline
                      • 8. Re: Display PDF in Apex Region
                        Sudhir_Meru
                        Thank you so much its working perfect in apex 4, I tried the same in apex 3.2 it's not working. Please suggest me


                        Thanks
                        Sudhir
                        • 9. Re: Display PDF in Apex Region
                          Dietmar Aust
                          Hi VC,

                          sorry, but you were messing with my try to make it work, this is why I copied the page ;).

                          The &p_inline=YES is ok, but it is the default anyway.

                          The problem is, that you can NEVER control it 100%, because people can always choose not to display the file inline and have the browser use the download mechanism:
                          http://stackoverflow.com/questions/291813/best-way-to-embed-pdf-in-html

                          This is surprisingly a really hard problem.

                          I could only make it work (on page 3 in the region "page canvas" ;). There I use http://mozilla.github.com/pdf.js/ but I am not sure how backward compatible this is with regard to older browsers.

                          Which browsers do you need this implementation for?

                          Cheers,
                          Dietmar.
                          -----
                          blog: [ http://daust.blogspot.com ] JDD-Spreadsheet-Suite: [ http://jdd-software.com ]
                          JasperReportsIntegration: [ http://www.opal-consulting.de/tools ] [ https://www.opal-consulting.de/forums  ]
                          • 10. Re: Display PDF in Apex Region
                            Sudhir_Meru
                            Hi,


                            This code is shows the google doc

                            >> <iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>


                            How to change the code to show the workspace static file. Please suggest me in modifying the code i tied with the below code its not working


                            >> <iframe src="#WORKSPACE_IMAGES#tos.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>


                            Thanks
                            Sudhir
                            • 11. Re: Display PDF in Apex Region
                              VC
                              Dietmar Aust wrote:
                              Hi VC,

                              sorry, but you were messing with my try to make it work, this is why I copied the page ;).
                              No worries Dietmar!
                              The &p_inline=YES is ok, but it is the default anyway.
                              That's why I just said unwanted...

                              And the link mentioned above in the initial question was just using a iframe tag and that's what I have suggested
                              The problem is, that you can NEVER control it 100%, because people can always choose not to display the file inline and have the browser use the download mechanism:
                              http://stackoverflow.com/questions/291813/best-way-to-embed-pdf-in-html

                              This is surprisingly a really hard problem.

                              I could only make it work (on page 3 in the region "page canvas" ;). There I use http://mozilla.github.com/pdf.js/ but I am not sure how backward compatible this is with regard to older browsers.
                              I agree...
                              Which browsers do you need this implementation for?
                              Its not my problem and I was just helping Sudhir
                              • 12. Re: Display PDF in Apex Region
                                Dietmar Aust
                                Hi Vikram,
                                Its not my problem and I was just helping Sudhir
                                I know, I should have put it this way:

                                @Sudhir: Which browsers do you need this implementation for?

                                Thanks and best regards,
                                Dietmar.
                                -----
                                blog: [ http://daust.blogspot.com ] JDD-Spreadsheet-Suite: [ http://jdd-software.com ]
                                JasperReportsIntegration: [ http://www.opal-consulting.de/tools ] [ https://www.opal-consulting.de/forums  ]
                                • 13. Re: Display PDF in Apex Region
                                  Sudhir_Meru
                                  Internet Explorer 9
                                  • 14. Re: Display PDF in Apex Region
                                    Dietmar Aust
                                    Hi Sudhir,

                                    when you look at page 3, region "pdf canvas" then you will see the code:
                                      <canvas id="the-canvas" style="border:1px solid black"></canvas>
                                    
                                      <!-- Use latest PDF.js build from Github -->
                                      <script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
                                      
                                      <script type="text/javascript">
                                        //
                                        // NOTE:
                                        // Modifying the URL below to another server will likely *NOT* work. Because of browser
                                        // security restrictions, we have to use a file server with special headers
                                        // (CORS) - most servers don't support cross-origin browser requests.
                                        //
                                        var url = '#WORKSPACE_IMAGES#Shilpa.pdf';
                                    
                                        //
                                        // Disable workers to avoid yet another cross-origin issue (workers need the URL of
                                        // the script to be loaded, and dynamically loading a cross-origin script does
                                        // not work)
                                        //
                                        PDFJS.disableWorker = true;
                                    
                                        //
                                        // Asynchronous download PDF as an ArrayBuffer
                                        //
                                        PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
                                          //
                                          // Fetch the first page
                                          //
                                          pdf.getPage(1).then(function getPageHelloWorld(page) {
                                            var scale = 1.5;
                                            var viewport = page.getViewport(scale);
                                    
                                            //
                                            // Prepare canvas using PDF page dimensions
                                            //
                                            var canvas = document.getElementById('the-canvas');
                                            var context = canvas.getContext('2d');
                                            canvas.height = viewport.height;
                                            canvas.width = viewport.width;
                                    
                                            //
                                            // Render PDF page into canvas context
                                            //
                                            page.render({canvasContext: context, viewport: viewport});
                                          });
                                        });
                                      </script>
                                     
                                    There you can change the url, I actually already reference your workspace file in there.

                                    But please give a list of browsers you are trying to support. It all depends on the specifics.

                                    Cheers,
                                    Dietmar.
                                    1 2 Previous Next