Some test text!

menu

PDF to flipbook using JavaScript

Create a Flipbook using JavaScript by extracting the canvas of each page in your PDF, Word, or PowerPoint file and utilize the turn.js library to render them (no servers or other external dependencies required). Users can navigate between pages by clicking and dragging the corners of a page. This sample works on all browsers (including IE10) and mobile devices without using plug-ins. To see an example launch our flipbook demo. Learn more about our JavaScript PDF Library.

Get StartedSamplesDownload

To run this sample, get started with a free trial of PDFTron SDK.

JavaScript

HTML

CoreControls.setWorkerPath('../../../lib/core');

var flipbookElement = document.getElementById('flipbook');

flipbookElement.innerHTML = 'Preparing document...';

var source = '../../../samples/files/cheetahs.pdf';
var options = { l: window.sampleL /* license key here */ };

var documentPromise = CoreControls.createDocument(source, options);

documentPromise.then(function(doc) {
  var info = doc.getPageInfo(0);
  var width = info.width;
  var height = info.height;
  var pageCount = doc.getPageCount();
  var promises = [];
  var canvases = [];

  var headerHeight = document.querySelector('header').offsetHeight;
  flipbookElement.style.marginTop = headerHeight;
  var flipbookHeight = window.innerHeight - headerHeight - 20;
  var flipbookWidth = window.innerWidth - 340;
  if (((flipbookHeight * width) / height) * 2 < flipbookWidth) {
    flipbookWidth = ((flipbookHeight * width) / height) * 2;
  } else {
    flipbookHeight = ((flipbookWidth / width) * height) / 2;
  }

  for (var i = 0; i < pageCount; i++) {
    promises.push(
      /* eslint-disable-next-line no-loop-func */
      new Promise(function(resolve) {
        // Load page canvas
        /* eslint-disable-line no-loop-func */
        doc.loadCanvasAsync({
          pageIndex: i,
          drawComplete: function(canvas, index) {
            canvases.push({
              index: index,
              canvas: canvas,
            });
            // eslint-disable-next-line prefer-template
            flipbookElement.innerHTML = 'Loading page canvas... (' + (index + 1) + '/' + pageCount + ')';
            resolve();
          },
        });
      })
    );
  }

  Promise.all(promises).then(function() {
    flipbookElement.innerHTML = '';
    flipbookElement.style.padding = 0;
    flipbookElement.style.margin = '60px 0 0 auto';

    canvases
      .sort(function(a, b) {
        return a.index - b.index;
      })
      .forEach(function(o) {
        flipbookElement.appendChild(o.canvas);
      });

    $('#flipbook').turn({
      width: flipbookWidth,
      height: flipbookHeight,
    });

    setTimeout(function() {
      $('#flipbook').turn('next');
    }, 500);

    document.getElementById('previous').onclick = function() {
      $('#flipbook').turn('previous');
    };

    document.getElementById('next').onclick = function() {
      $('#flipbook').turn('next');
    };
  });
});
close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close