Document View Service

The index.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
• Control sidebar state

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

Accessing the Service

You can access the index.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',
  },
  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 index.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	index.HeaderTab | string	Gets or sets the currently active toolbar tab.
activeTab$	Observable< index.HeaderTab | string>	Observable that emits when the active tab changes.
documentViewElements	index.DocumentsViewArray	Read-only array of current document view elements.

Methods

Method	Description
openDocument(file: File, options?: UploadInputsData): Promise<void>	Opens a PDF file.
openBlankDocument(data?: sdk.ICreateNewDocumentData, mode?: index.ToolTypes): Promise<void>	Creates and opens a new blank document.
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: index.ActiveSideBySideWindow): void	Sets the active window in side-by-side mode.
getActiveSideBySideWindow(): index.ActiveSideBySideWindow	Returns the currently active side-by-side window.
listenForActiveSideBySideWindowChange(): Observable< index.ActiveSideBySideWindow>	Returns an observable that emits when the active window changes.
getActiveDocumentViewElement(): index.IDocumentView | null	Returns the currently active document view element.
getNonActiveDocumentViewElement(): index.IDocumentView | null	Returns the non-active document view element.
getPrimaryDocumentViewElement(): index.IDocumentView | null	Returns the primary (left) document view element.
getSecondaryDocumentViewElement(): index.IDocumentView | null	Returns the secondary (right) document view element.
setPrimaryDocumentViewElement(el: index.IDocumentView | null): void	Sets the primary document view element.
setSecondaryDocumentViewElement(el: index.IDocumentView | null): void	Sets the secondary document view element.
hasSecondaryDocumentView(): boolean	Checks if a secondary document view exists.
clearDocumentView(index: number): Promise<boolean>	Clears the document view at the specified index.
isSidebarOpen(): boolean	Checks if the sidebar is currently open.
setSidebarOpen(value: boolean): void	Opens or closes the sidebar.
listenForSidebarOpenChange(): Observable<boolean>	Returns an observable that emits when the sidebar open state changes.
documentViewElementsChange(): Observable< index.DocumentsViewArray>	Returns an observable that emits when the document view elements array changes.
sideBySideSynchronizationChange(): Observable<boolean>	Returns an observable that emits when synchronization changes.