kharandziuk · January 29, 2020 14:53
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/build/pdf.min.js"></script>
 <style>
 #the-canvas {
    border: 1px solid black;
      direction: ltr;
 }
 </style>
 </head>
 <body>

  <h1>PDF.js Previous/Next example</h1>

  <div>
      <button id="prev">Previous</button>
        <button id="next">Next</button>
          &nbsp; &nbsp;
            <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
  </div>

  <canvas id="the-canvas"></canvas>
  <script type="text/javascript">
    // If absolute URL from the remote server is provided, configure the CORS
    // header on that server.
    var url = "https://cors-anywhere.herokuapp.com/https://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf"

 // Loaded via <script> tag, create shortcut to access PDF.js exports.
  var pdfjsLib = window['pdfjs-dist/build/pdf'];

 // The workerSrc property shall be specified.
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/build/pdf.worker.js'

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

 /**
   * Get page info from document, resize canvas accordingly, and render page.
   * @param num Page number.
   */
  function renderPage(num) {
      pageRendering = true;
      // Using promise to fetch the page
      pdfDoc.getPage(num).then(function(page) {
            var viewport = page.getViewport({scale: scale});
            canvas.height = viewport.height;
            canvas.width = viewport.width;

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

            // Wait for rendering to finish
            renderTask.promise.then(function() {
                    pageRendering = false;
                    if (pageNumPending !== null) {
                              // New page rendering is pending
                              renderPage(pageNumPending);
                              pageNumPending = null;
                            }
                  });
          });

      // Update page counters
      document.getElementById('page_num').textContent = num;
  }

 /**
   * If another page rendering in progress, waits until the rendering is
 * finised. Otherwise, executes rendering immediately.
   */
  function queueRenderPage(num) {
      if (pageRendering) {
            pageNumPending = num;
          } else {
                renderPage(num);
              }
  }

 /**
   * Displays previous page.
   */
  function onPrevPage() {
      if (pageNum <= 1) {
              return;
            }
            pageNum--;
            queueRenderPage(pageNum);
          }
          document.getElementById('prev').addEventListener('click', onPrevPage);

          /**
           * Displays next page.
           */
          function onNextPage() {
            if (pageNum >= pdfDoc.numPages) {
                  return;
                }
              pageNum++;
              queueRenderPage(pageNum);
          }
 document.getElementById('next').addEventListener('click', onNextPage);

 /**
   * Asynchronously downloads PDF.
   */
 pdfjsLib.getDocument({url, httpHeaders: {"Access-Control-Allow-Origin": null}}).promise.then(function(pdfDoc_) {
      pdfDoc = pdfDoc_;
      document.getElementById('page_count').textContent = pdfDoc.numPages;

      // Initial/first page rendering
      renderPage(pageNum);
  });
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/build/pdf.min.js"></script>
	<style>
	#the-canvas {
	border: 1px solid black;
	direction: ltr;
	}
	</style>
	</head>
	<body>

	<h1>PDF.js Previous/Next example</h1>

	<div>
	<button id="prev">Previous</button>
	<button id="next">Next</button>

	<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
	</div>

	<canvas id="the-canvas"></canvas>
	<script type="text/javascript">
	// If absolute URL from the remote server is provided, configure the CORS
	// header on that server.
	var url = "https://cors-anywhere.herokuapp.com/https://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf"

	// Loaded via <script> tag, create shortcut to access PDF.js exports.
	var pdfjsLib = window['pdfjs-dist/build/pdf'];

	// The workerSrc property shall be specified.
	pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/build/pdf.worker.js'

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

	/**
	* Get page info from document, resize canvas accordingly, and render page.
	* @param num Page number.
	*/
	function renderPage(num) {
	pageRendering = true;
	// Using promise to fetch the page
	pdfDoc.getPage(num).then(function(page) {
	var viewport = page.getViewport({scale: scale});
	canvas.height = viewport.height;
	canvas.width = viewport.width;

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

	// Wait for rendering to finish
	renderTask.promise.then(function() {
	pageRendering = false;
	if (pageNumPending !== null) {
	// New page rendering is pending
	renderPage(pageNumPending);
	pageNumPending = null;
	}
	});
	});

	// Update page counters
	document.getElementById('page_num').textContent = num;
	}

	/**
	* If another page rendering in progress, waits until the rendering is
	* finised. Otherwise, executes rendering immediately.
	*/
	function queueRenderPage(num) {
	if (pageRendering) {
	pageNumPending = num;
	} else {
	renderPage(num);
	}
	}

	/**
	* Displays previous page.
	*/
	function onPrevPage() {
	if (pageNum <= 1) {
	return;
	}
	pageNum--;
	queueRenderPage(pageNum);
	}
	document.getElementById('prev').addEventListener('click', onPrevPage);

	/**
	* Displays next page.
	*/
	function onNextPage() {
	if (pageNum >= pdfDoc.numPages) {
	return;
	}
	pageNum++;
	queueRenderPage(pageNum);
	}
	document.getElementById('next').addEventListener('click', onNextPage);

	/**
	* Asynchronously downloads PDF.
	*/
	pdfjsLib.getDocument({url, httpHeaders: {"Access-Control-Allow-Origin": null}}).promise.then(function(pdfDoc_) {
	pdfDoc = pdfDoc_;
	document.getElementById('page_count').textContent = pdfDoc.numPages;

	// Initial/first page rendering
	renderPage(pageNum);
	});
	</script>
	</body>
	</html>
No results found