gavinwahl · September 25, 2012 17:00
diff --git a/gistfile1.txt b/gistfile1.txt
 <html>
 <body>
  <div>
    <input type=file id="the_file">
    <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="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/tracemonkey.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 = 0.8,
        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
    //
    var file_input = document.getElementById('the_file');
    file_input.onchange = function() {
      var x = new FileReader();
      x.onload = function() {
         PDFJS.getDocument(x.result).then(function getPdfHelloWorld(_pdfDoc) {
         pdfDoc = _pdfDoc;
         renderPage(pageNum);
       });
      };
      x.readAsArrayBuffer(file_input.files[0]);
    };
  </script>  
 </body>
 </html>
	<html>
	<body>
	<div>
	<input type=file id="the_file">
	<button id="prev" onclick="goPrevious()">Previous</button>
	<button id="next" onclick="goNext()">Next</button>

	<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="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/tracemonkey.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 = 0.8,
	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
	//
	var file_input = document.getElementById('the_file');
	file_input.onchange = function() {
	var x = new FileReader();
	x.onload = function() {
	PDFJS.getDocument(x.result).then(function getPdfHelloWorld(_pdfDoc) {
	pdfDoc = _pdfDoc;
	renderPage(pageNum);
	});
	};
	x.readAsArrayBuffer(file_input.files[0]);
	};
	</script>
	</body>
	</html>