Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<body>
  <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 = 'http://cdn.mozilla.net/pdfjs/helloworld.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)
    //
​
​
    //
    // Asynchronous download PDF as an ArrayBuffer
    //
    PDFJS.getPdf(url, function getPdfHelloWorld(data) {
      //
      // Instantiate PDFDoc with PDF data
      //
      var pdf = new PDFJS.PDFDoc(data);
      var page = pdf.getPage(1);
      var scale = 1.5;
​
      //
      // Prepare canvas using PDF page dimensions
      //
      var canvas = document.getElementById('the-canvas');
      var context = canvas.getContext('2d');
      canvas.height = page.height * scale;
      canvas.width = page.width * scale;
​
      //
      // Render PDF page into canvas context
      //
      page.startRendering(context);
    });
  </script>
  
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers