Document View Service

The ui.IDocumentViewService interface provides programmatic control for managing document view instances. Use this service to:

• Open and close documents in the viewer
• Manage side-by-side view (split view mode)
• Control the active toolbar tab
• Access document view elements for advanced operations
• Observe documents being opened, closed and activated

Note: For headless PDF operations (without UI), use the sdk field from IPdfEditorResult or import PdfSdk directly.

Accessing the Service

You can access the ui.IDocumentViewService instance from the result of PdfEditor:

const editor = await PdfEditor({ ... });
const service = editor.ui.pdfWebService;

/* Open a document in the viewer */
await service.openDocument(file);
Copy

Document Operations

Opening Documents

Open a PDF file from a File object:

await service.openDocument(file);
Copy

Open a new blank document:

import { ToolTypes } from '@avanquest/pdf-web-viewer';

await service.openBlankDocument(
  {
    name: 'New Document.pdf',
    numPages: 1,
    Rectangle: [0, 792, 612, 0], // Letter size
    PDFVersion: '2.0',
  },
  { mode: ToolTypes.EDIT },
);
Copy

Closing Documents

Close a document by its ID:

service.closeDocument(documentId);
Copy

Side-by-Side View

Manage the side-by-side view mode (split view).

Toggle Side-by-Side

Enable or disable side-by-side view:

// Enable side-by-side view
await service.setSideBySideViewMode(true);

// Check current state
const isSideBySide = service.getSideBySideViewMode();

// Listen for changes
service.listenForSideBySideViewModeChange().subscribe((isSideBySide) => {
  console.log('Side-by-side mode:', isSideBySide);
});
Copy

Synchronization

Control whether scrolling and zooming are synchronized between the two views:

// Enable synchronization
service.sideBySideSynchronization = true;

// Listen for changes
service.sideBySideSynchronizationChange().subscribe((synced) => {
  console.log('Synchronization changed:', synced);
});
Copy

Active Window

Manage which side (left or right) is currently active:

import { ActiveSideBySideWindow } from '@avanquest/pdf-web-viewer';

// Set active window to right
service.setActiveSideBySideWindow(ActiveSideBySideWindow.RIGHT);

// Get active window
const activeWindow = service.getActiveSideBySideWindow();

// Listen for changes
service.listenForActiveSideBySideWindowChange().subscribe((window) => {
  console.log('Active window changed:', window);
});
Copy

View Elements

Access the underlying ui.IDocumentView elements.

// Get the currently active document view
const activeView = service.getActiveDocumentViewElement();

// Get the non-active document view (in side-by-side mode)
const inactiveView = service.getNonActiveDocumentViewElement();

// Get primary (left) and secondary (right) views directly
const primary = service.getPrimaryDocumentViewElement();
const secondary = service.getSecondaryDocumentViewElement();

// Listen for changes to the view elements array
service.documentViewElementsChange().subscribe((views) => {
  const [left, right] = views;
  console.log('Views updated:', left, right);
});
Copy

Active Tab

Control the active tab in the toolbar.

import { HeaderTab } from '@avanquest/pdf-web-viewer';

// Switch to the Edit tab
service.activeTab = HeaderTab.EDIT;

// Listen for tab changes
service.activeTab$.subscribe((tab) => {
  console.log('Active tab changed:', tab);
});
Copy

API Reference

Properties

Property	Type	Description
sideBySideSynchronization	boolean	Gets or sets whether side-by-side views are synchronized.
activeTab	ui.HeaderTab | string	Gets or sets the currently active toolbar tab.
activeTab$	Observable< ui.HeaderTab | string>	Observable that emits when the active tab changes.
documentViewElements	ui.DocumentsViewArray	Read-only array of current document view elements.
documentOpened$	Observable< ui.IDocumentViewModel>	Emits each document that finishes opening.
documentClosed$	Observable<string>	Emits the id of each closed document.
activeDocumentChanged$	Observable< ui.IDocumentViewModel | null>	Emits when the active document changes.

Methods

Method	Description
openDocument(file: File, options?: UploadInputsData): Promise<void>	Opens a PDF file.
openBlankDocument(data?: sdk.ICreateNewDocumentData, options?: UploadInputsData): Promise<void>	Creates and opens a new blank document.
findTabIdByFilePath(path: string): string | null	Returns the id of the tab showing the document at path, if any.
findTabIdByOrigin(providerId: string, item: ui.IFileItem): string | null	Returns the id of the tab showing the document opened from that source item, if any.
reverseViews(): void	Swaps the two side-by-side views.
separateViews(): Promise<void>	Leaves side-by-side mode, keeping both documents open in their own tabs.
closeDocument(id: string): void	Closes a document by ID.
setSideBySideViewMode(value: boolean): Promise<void>	Enables or disables side-by-side view.
getSideBySideViewMode(): boolean	Returns the current side-by-side view state.
listenForSideBySideViewModeChange(): Observable<boolean>	Returns an observable that emits when side-by-side mode changes.
setActiveSideBySideWindow(window: ui.ActiveSideBySideWindow): void	Sets the active window in side-by-side mode.
getActiveSideBySideWindow(): ui.ActiveSideBySideWindow	Returns the currently active side-by-side window.
listenForActiveSideBySideWindowChange(): Observable< ui.ActiveSideBySideWindow>	Returns an observable that emits when the active window changes.
getActiveDocumentViewElement(): ui.IDocumentView | null	Returns the currently active document view element.
getNonActiveDocumentViewElement(): ui.IDocumentView | null	Returns the non-active document view element.
getPrimaryDocumentViewElement(): ui.IDocumentView | null	Returns the primary (left) document view element.
getSecondaryDocumentViewElement(): ui.IDocumentView | null	Returns the secondary (right) document view element.
setPrimaryDocumentViewElement(el: ui.IDocumentView | null): void	Sets the primary document view element.
setSecondaryDocumentViewElement(el: ui.IDocumentView | null): void	Sets the secondary document view element.
documentViewElementsChange(): Observable< ui.DocumentsViewArray>	Returns an observable that emits when the document view elements array changes.
sideBySideSynchronizationChange(): Observable<boolean>	Returns an observable that emits when synchronization changes.