pdf.js/examples/learning/prevnext.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Previous/Next example</title>
</head>
<body>

<h1>'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>

<div>
  <canvas id="the-canvas" style="border: 1px solid black; direction: ltr;"></canvas>
</div>

<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>

<script id="script" type="module">
  //
  // If absolute URL from the remote server is provided, configure the CORS
  // header on that server.
  //
  var url = '../../web/compressed.tracemonkey-pldi-09.pdf';

  //
  // In cases when the pdf.worker.js is located at the different folder than the
  // PDF.js's one, or the PDF.js is executed via eval(), the workerSrc property
  // shall be specified.
  //
  pdfjsLib.GlobalWorkerOptions.workerSrc =
    '../../node_modules/pdfjs-dist/build/pdf.worker.mjs';

  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, });
      // Support HiDPI-screens.
      var outputScale = window.devicePixelRatio || 1;

      canvas.width = Math.floor(viewport.width * outputScale);
      canvas.height = Math.floor(viewport.height * outputScale);
      canvas.style.width = Math.floor(viewport.width) + "px";
      canvas.style.height =  Math.floor(viewport.height) + "px";

      var transform = outputScale !== 1
        ? [outputScale, 0, 0, outputScale, 0, 0]
        : null;

      // Render PDF page into canvas context
      var renderContext = {
        canvasContext: ctx,
        transform: transform,
        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
   * finished. 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.
   */
  var loadingTask = pdfjsLib.getDocument(url);
  pdfDoc = await loadingTask.promise;
  document.getElementById('page_count').textContent = pdfDoc.numPages;

  // Initial/first page rendering
  renderPage(pageNum);
</script>

</body>
</html>
Removes examples from jsbin.com 2014-09-16 23:24:48 +09:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<meta charset="UTF-8">`
			`<title>Previous/Next example</title>`
			`</head>`
			`<body>`

			`<h1>'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>`

			`<div>`
Add `direction: ltr;` to the canvases used in `examples/learning`, to ensure correct text rendering (issue 11457) This is currently the only possible way of addressing the issue, until https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/direction becomes generally available in browsers. Note: This will also require manually updating https://mozilla.github.io/pdf.js/examples/#interactive-examples 2020-01-12 20:25:23 +09:00			`<canvas id="the-canvas" style="border: 1px solid black; direction: ltr;"></canvas>`
Removes examples from jsbin.com 2014-09-16 23:24:48 +09:00			`</div>`

Update the `examples/`-folder to account for outputting of JavaScript modules (PR 17055 follow-up) This patch also changes most examples to use "top level await", since that's now supported and slightly simplifies the code. 2023-10-14 18:24:56 +09:00			`<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>`
Removes examples from jsbin.com 2014-09-16 23:24:48 +09:00
Update the `examples/`-folder to account for outputting of JavaScript modules (PR 17055 follow-up) This patch also changes most examples to use "top level await", since that's now supported and slightly simplifies the code. 2023-10-14 18:24:56 +09:00			`<script id="script" type="module">`
Removes examples from jsbin.com 2014-09-16 23:24:48 +09:00			`//`
			`// If absolute URL from the remote server is provided, configure the CORS`
			`// header on that server.`
			`//`
			`var url = '../../web/compressed.tracemonkey-pldi-09.pdf';`

			`//`
Fixes examples comments. 2014-10-01 05:42:28 +09:00			`// In cases when the pdf.worker.js is located at the different folder than the`
Fix typos 2018-04-02 06:20:41 +09:00			`// PDF.js's one, or the PDF.js is executed via eval(), the workerSrc property`
Fixes examples comments. 2014-10-01 05:42:28 +09:00			`// shall be specified.`
Removes examples from jsbin.com 2014-09-16 23:24:48 +09:00			`//`
Rename the globals to shorter names. pdfjsDistBuildPdf=pdfjsLib pdfjsDistWebPdfViewer=pdfjsViewer pdfjsDistBuildPdfWorker=pdfjsWorker 2018-03-16 05:49:28 +09:00			`pdfjsLib.GlobalWorkerOptions.workerSrc =`
Update the `examples/`-folder to account for outputting of JavaScript modules (PR 17055 follow-up) This patch also changes most examples to use "top level await", since that's now supported and slightly simplifies the code. 2023-10-14 18:24:56 +09:00			`'../../node_modules/pdfjs-dist/build/pdf.worker.mjs';`
Removes examples from jsbin.com 2014-09-16 23:24:48 +09:00
			`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) {`
Update remaining examples, and docs, to utilize current API functionality (issue 10377) This contains a couple of changes that I missed elsewhere, sorry about that! 2018-12-24 20:28:20 +09:00			`var viewport = page.getViewport({ scale: scale, });`
Update the `learning/` examples with basic HiDPI-screen support This is essentially a simplified version of the code that's used in `PDFPageView`, which will hopefully reduce the number of issues opened specifically about blurry rendering. However, note that ideally users should base their implementations on the `components/` examples rather than using the API directly (the "viewer components" already support HiDPI-screens). 2021-09-07 21:43:53 +09:00			`// Support HiDPI-screens.`
			`var outputScale = window.devicePixelRatio \|\| 1;`

			`canvas.width = Math.floor(viewport.width * outputScale);`
			`canvas.height = Math.floor(viewport.height * outputScale);`
			`canvas.style.width = Math.floor(viewport.width) + "px";`
			`canvas.style.height = Math.floor(viewport.height) + "px";`

			`var transform = outputScale !== 1`
			`? [outputScale, 0, 0, outputScale, 0, 0]`
			`: null;`
Removes examples from jsbin.com 2014-09-16 23:24:48 +09:00
			`// Render PDF page into canvas context`
			`var renderContext = {`
			`canvasContext: ctx,`
Update the `learning/` examples with basic HiDPI-screen support This is essentially a simplified version of the code that's used in `PDFPageView`, which will hopefully reduce the number of issues opened specifically about blurry rendering. However, note that ideally users should base their implementations on the `components/` examples rather than using the API directly (the "viewer components" already support HiDPI-screens). 2021-09-07 21:43:53 +09:00			`transform: transform,`
Update remaining examples, and docs, to utilize current API functionality (issue 10377) This contains a couple of changes that I missed elsewhere, sorry about that! 2018-12-24 20:28:20 +09:00			`viewport: viewport,`
Removes examples from jsbin.com 2014-09-16 23:24:48 +09:00			`};`
			`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`
num(local) used instead of pageNum(global) in prevnext.html for enhancement of logic 2018-01-02 12:25:03 +09:00			`document.getElementById('page_num').textContent = num;`
Removes examples from jsbin.com 2014-09-16 23:24:48 +09:00			`}`

			`/**`
			`* If another page rendering in progress, waits until the rendering is`
Correct typos 2022-04-09 09:43:18 +09:00			`* finished. Otherwise, executes rendering immediately.`
Removes examples from jsbin.com 2014-09-16 23:24:48 +09:00			`*/`
			`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.`
			`*/`
Convert `PDFDocumentLoadingTask`, in `src/display/api.js`, to an ES6 class Also deprecates the `then` method, in favour of the `promise` getter. 2018-11-08 21:40:06 +09:00			`var loadingTask = pdfjsLib.getDocument(url);`
Update the `examples/`-folder to account for outputting of JavaScript modules (PR 17055 follow-up) This patch also changes most examples to use "top level await", since that's now supported and slightly simplifies the code. 2023-10-14 18:24:56 +09:00			`pdfDoc = await loadingTask.promise;`
			`document.getElementById('page_count').textContent = pdfDoc.numPages;`
Removes examples from jsbin.com 2014-09-16 23:24:48 +09:00
Update the `examples/`-folder to account for outputting of JavaScript modules (PR 17055 follow-up) This patch also changes most examples to use "top level await", since that's now supported and slightly simplifies the code. 2023-10-14 18:24:56 +09:00			`// Initial/first page rendering`
			`renderPage(pageNum);`
Removes examples from jsbin.com 2014-09-16 23:24:48 +09:00			`</script>`

			`</body>`
			`</html>`