CODEWITHSUNDEEP
javascriptpdfgoogle-chrome-extension
Brent Moses
Brent Moses

Reputation: 253

PDF.js opens pdf in Firefox but not Chrome/Chromium or Extension

I am just trying to get a simple test of pdf.js to run to test it's basic functionality and using the following code it displays fine in Firefox but not in any Chrome browser or Chrome extension which is where I really need it(Chrome Extension). I am just grabbing a pdf locally to display with PDF.js. Any suggestions?

<html>
<body>
  <div>
    <button id="prev" onclick="goPrevious()">Previous</button>
    <button id="next" onclick="goNext()">Next</button>
    &nbsp; &nbsp;
    <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
  </div>

  <div>
    <canvas id="the-canvas" style="border:1px solid black"></canvas>
  </div>

  <!-- Use latest PDF.js build from Github -->
  <script type="text/javascript" src="http://mozilla.github.io/pdf.js/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 = '/home/brent/Documents/pdfviewer/custodian-parent.pdf';

    //
    // Disable workers to avoid yet another cross-origin issue (workers need the URL of
    // the script to be loaded, and currently do not allow cross-origin scripts)
    //
    PDFJS.disableWorker = true;

    var pdfDoc = null,
        pageNum = 1,
        scale = 1.0,
        canvas = document.getElementById('the-canvas'),
        ctx = canvas.getContext('2d');

    //
    // Get page info from document, resize canvas accordingly, and render page
    //
    function renderPage(num) {
      // Using promise to fetch the page
      pdfDoc.getPage(num).then(function(page) {
        var viewport = page.getViewport(scale);
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        var renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };
        page.render(renderContext);
      });

      // Update page counters
      document.getElementById('page_num').textContent = pageNum;
      document.getElementById('page_count').textContent = pdfDoc.numPages;
    }

    //
    // Go to previous page
    //
    function goPrevious() {
      if (pageNum <= 1)
        return;
      pageNum--;
      renderPage(pageNum);
    }

    //
    // Go to next page
    //
    function goNext() {
      if (pageNum >= pdfDoc.numPages)
        return;
      pageNum++;
      renderPage(pageNum);
    }

    //
    // Asynchronously download PDF as an ArrayBuffer
    //
    PDFJS.getDocument(url).then(function getPdfHelloWorld(_pdfDoc) {
      pdfDoc = _pdfDoc;
      renderPage(pageNum);
    });
  </script>  
</body>
</html>

This code was grabbed from the PDF.js github on one of their examples: [http://jsbin.com/pdfjs-prevnext-v2/6748/edit][1]

Even on their example it does not run In Chrome.

Upvotes: 2

Views: 4190

Answers (1)

async5
async5

Reputation: 2691

Chrome's XHR cannot handle file resources. Use local web server when you develop a web application for Chrome that uses XMLHttpRequest. PDF.js and files must be on the same web server due to CORS.

Also the extension's access to the 'file://' scheme is determined by the user-controlled 'Allow access to File URLs' checkbox.

Upvotes: 2

Related Questions