Document View Element

The index.IDocumentView interface represents a single document view instance. It is responsible for rendering the PDF, handling user interactions (scrolling, zooming, tools), and managing the lifecycle of the loaded document.

In a side-by-side configuration, there are two IDocumentView instances (primary and secondary).

Accessing the View

You can access the active IDocumentView from the IDocumentViewService or the IDocumentViewerWrapperElement.

// From the service
const activeView = editor.ui.pdfWebService.getActiveDocumentViewElement();

// From the wrapper
const wrapperView = editor.ui.pdfWebElement.documentView;

Document Operations

Opening a File

Open a PDF file directly in this view instance:

const file = new File(['...'], 'document.pdf', { type: 'application/pdf' });
await activeView.openFile(file);

Opening a Blank Document

Create and open a new blank document:

await activeView.openBlank();

Exporting the Document

Export the currently loaded document to a file, blob, or buffer:

// Export as a File object (default)
const file = await activeView.exportFile('file');

// Export as a Blob
const blob = await activeView.exportFile('blob');

// Export as Uint8Array
const uint8Array = await activeView.exportFile('uint8array');

Closing the Document

Close the currently open document in this view:

await activeView.closeDocument();

Events

New Document Event

Subscribe to be notified when a new document model is loaded into this view:

activeView.newDocumentEvent.subscribe((documentModel) => {
  if (documentModel) {
    console.log('New document loaded:', documentModel.documentId);
  } else {
    console.log('Document closed or view reset');
  }
});

API Reference

Properties

Property	Type	Description
`documentView`	index.IDocumentViewModel `\| null`	The current document model associated with this view.
`newDocumentEvent`	`Observable<` index.IDocumentViewModel`>`	Observable that emits when a new document is loaded.

Methods

Method	Description
`openFile(file?: File): Promise<` index.IDocumentViewModel`>`	Opens a PDF file in this view.
`openBlank(): Promise<` index.IDocumentViewModel`>`	Opens a new blank document.
`exportFile(exportFileAs?:` index.ExportFileAs`): Promise<` index.IExportFileResponse`>`	Exports the current document.
`closeDocument(): Promise<boolean>`	Closes the current document.
`mount(container: HTMLElement, shadowRoot: ShadowRoot): void`	Mounts the view into a DOM container.
`destroy(): void`	Destroys the view and releases resources.
`getContainer(): HTMLElement \| null`	Returns the container element where the view is mounted.
`getFileInputElement(): HTMLInputElement`	Returns the hidden file input element used for opening files.