Loading and rendering documents without using WebViewer UI

It's common to use the built in WebViewer 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

You can use the Core.createDocument API to instantiate documents from different sources, for example URLs or blobs.

Below are some examples of creating commonly used documents:

Create XOD document To create a XOD document.

Create PDF document To create a PDF document.

Create an Office document To create an Office document.

Render pages

After the document has been created, use the loadCanvas 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.

_loadCanvasAsync__ is deprecated since version 8.3 and removed since version 10.0. Please use _loadCanvas_ instead._

JavaScript (SDK v8.0+)

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

JavaScript (SDK v7.0+)

doc.loadCanvasAsync({
  pageNumber: 1, // 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);
  }
})

JavaScript (SDK v6.0+)

doc.loadCanvasAsync({
  pageIndex: 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);
  }
})

Render part of a page

If you want to render just part of a page, you can define the area you want to render as explained in the API docs and pass it to the renderRect option:

JavaScript (SDK v8.0+)

doc.loadCanvas({
  pageNumber: 1 // Render the first page
  renderRect: {x1:0, y1:0, x2:200, y2:200}, // The area to render
  drawComplete: canvas => {
    // The canvas of the cropped first page
    console.log(canvas);
  }
})

JavaScript (SDK v7.0+)

doc.loadCanvasAsync({
  pageNumber: 1 // Render the first page
  renderRect: {x1:0, y1:0, x2:200, y2:200}, // The area to render
  drawComplete: canvas => {
    // The canvas of the cropped first page
    console.log(canvas);
  }
})

JavaScript (SDK v6.0+)

doc.loadCanvasAsync({
  pageIndex: 0, // Render the first page
  renderRect: {x1:0, y1:0, x2:200, y2:200}, // The area to render
  drawComplete: canvas => {
    // The canvas of the cropped first page
    console.log(canvas);
  }
})

Load page text

Text extraction To extract text in the document without rendering it using loadPageText API.

More APIs

• Document - A full list of APIs
• Page Manipulation Guide - A guide that uses Document APIs to manipulate pages
• Flipbook Sample - A sample that uses Document APIs to render pages directly and uses turn.js to flip them