Some test text!

menu
Create a thumbnailkeyboard_arrow_down

Generate PDF page thumbnails using JavaScript

Page thumbnails are rendered image representations of the page they are generated from.

The SDK API has the flexibility to alter the resolution or size of the thumbnail output and whether to include annotations or not.

linkCreate a basic page thumbnail

To create a basic PDF page thumbnail where the result is a HTMLCanvasElement or HTMLImageElement.

WebViewer(...)
  .then(instance => {
    const { docViewer } = instance;
    docViewer.on('documentLoaded', () => {
      const doc = docViewer.getDocument();
      const pageNum = 1;
      doc.loadThumbnailAsync(pageNum, (thumbnail) => {
        // thumbnail is a HTMLCanvasElement or HTMLImageElement
        console.log(thumbnail);
      });
    });
  });

linkCreate a High resolution page image (png or jpg) with annotations

To create a high resolution page thumnbails and optionally with annotations where the result is a HTMLCanvasElement or HTMLImageElement.

WebViewer(...)
  .then(instance => {
    const { docViewer } = instance;
    docViewer.on('annotationsLoaded', () => {
      const doc = docViewer.getDocument();
      const pageIdx = 0;
      doc.loadCanvasAsync(({
        pageIndex: pageIdx,
        zoom: 2, // render at twice the resolution
        drawComplete: async (thumbnail) => {
          const pageNumber = 1;
          // optionally comment out "drawAnnotations" below to exclude annotations
          await instance.docViewer.getAnnotationManager().drawAnnotations(pageNumber, thumbnail);
          // thumbnail is a HTMLCanvasElement or HTMLImageElement
          console.log(thumbnail);
        }
      }));
    });
  });

Get the answers you need: Support

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