77 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			77 lines
		
	
	
		
			1.8 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!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="../../node_modules/pdfjs-dist/web/compatibility.js"></script>-->
 | 
						|
 | 
						|
<script src="../../node_modules/pdfjs-dist/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 = '../../node_modules/pdfjs-dist/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>
 |