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');

const flipbookElement = document.getElementById('flipbook');
const loadingMessageElement = document.getElementById('loading-message');

loadingMessageElement.innerHTML = 'Preparing document...';

const source = 'https://pdftron.s3.amazonaws.com/downloads/pl/Cheetahs.pdf';
const options = { l: window.sampleL /* license key here */ };

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

documentPromise.then(doc => {
  const info = doc.getPageInfo(1);
  const width = info.width;
  const height = info.height;
  const pageCount = doc.getPageCount();
  const promises = [];
  const canvases = [];

  const boundingRect = flipbookElement.getBoundingClientRect();
  let flipbookHeight = boundingRect.height;
  let flipbookWidth = boundingRect.width;
  if (((flipbookHeight * width) / height) * 2 < flipbookWidth) {
    flipbookWidth = ((flipbookHeight * width) / height) * 2;
  } else {
    flipbookHeight = ((flipbookWidth / width) * height) / 2;
  }

  for (let i = 0; i < pageCount; i++) {
    promises.push(
      /* eslint-disable-next-line no-loop-func */
      new Promise(resolve => {
        // Load page canvas
        const pageNumber = i + 1;
        return doc.requirePage(pageNumber).then(() => {
          return doc.loadCanvasAsync({
            pageNumber,
            drawComplete: (canvas, index) => {
              canvases.push({ index, canvas });

              loadingMessageElement.innerHTML = `Loading page canvas... (${canvases.length}/${pageCount})`;
              resolve();
            },
            isInternalRender: true,
          });
        });
      })
    );
  }

  Promise.all(promises).then(() => {
    flipbookElement.removeChild(loadingMessageElement);
    flipbookElement.style.margin = '60px 0px 0px auto';

    canvases.sort((a, b) => a.index - b.index).forEach(o => flipbookElement.appendChild(o.canvas));

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

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

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

    document.getElementById('next').onclick = () => {
      $('#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 upcoming webinar to find out about built-in, full-functioning document capabilities directly in Salesforce.

Save your seat
close