Display PDF in Apex Region

Question

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

Answer 1

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.