Skip to content
Snippets Groups Projects
helloworld.html 1.74 KiB
Newer Older
  • Learn to ignore specific revisions
  • <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>'Hello, world!' example</title>
    </head>
    <body>
    
    <h1>'Hello, world!' example</h1>
    
    <canvas id="the-canvas" style="border:1px  solid black"></canvas>
    
    <!-- for legacy browsers add compatibility.js -->
    <!--<script src="../compatibility.js"></script>-->
    
    <script src="../../build/pdf.js"></script>
    
    <script id="script">
      //
      // If absolute URL from the remote server is provided, configure the CORS
      // header on that server.
      //
      var url = './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).
      //
      // PDFJS.disableWorker = true;
    
      //
    
      // The workerSrc property shall be specified.
    
      PDFJS.workerSrc = '../../build/pdf.worker.js';
    
    
      //
      // Asynchronous download PDF
      //
      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
          //
          var renderContext = {
            canvasContext: context,
            viewport: viewport
          };
          page.render(renderContext);
        });
      });
    </script>
    
    <hr>
    <h2>JavaScript code:</h2>
    <pre id="code"></pre>
    <script>
      document.getElementById('code').textContent =
          document.getElementById('script').text;
    </script>
    </body>
    </html>