Free trial

Pick a framework to get started

close

Get Started

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Searching

play_arrow

Measurement

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Lower level document APIs

It's common to use the built in PDF.js Express Web Viewer UI to view and interact with documents, however it's also possible to load documents and render pages without using the UI. By using the lower level Document class, you can load documents in memory and have full control over how the pages are laid out, or use non-viewing APIs like extracting text.

Create documents

Different types of documents require different steps to be created, but in general they all share the following steps:

Create a PDF Document

Creating a PDF document requires us to initialize the PDF worker based on the backend type for the browser we are using.

// Instantiate a Document object.
const doc = new CoreControls.Document('YOUR_FILE_ID', 'pdf');

CoreControls.getDefaultBackendType().then(backendType => {
  // Determine the PartRetriever that should be used.
  // If you are loading the PDF file as a Blob, you need to use PartRetrievers.LocalPdfPartRetriever
  const partRetriever = new CoreControls.PartRetrievers.ExternalPdfPartRetriever('YOUR_PDF_FILE_PATH');
  const options = {
    workerTransportPromise: CoreControls.initPDFWorkerTransports(backendType, {}, 'YOUR_LICENSE_KEY')
  };

  doc.loadAsync(partRetriever, error => {
    // The PDF file has been created, you can call APIs of the Document class
  }, options)
});

Render pages

After the document has been created, use the loadCanvasAsync API to render a page on a canvas. You have full control of how the pages are rendered by passing different values to this API.

doc.loadCanvasAsync({
  pageNumber: 0, // Render the first page
  zoom: 1, // 100% zoom level
  pageRotation: CoreControls.PageRotation.e_0, // 0 degree rotation
  drawComplete: canvas => {
    // The canvas that contains the first page
    console.log(canvas);
  }
})

More APIs