Document View Element

The ui.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();

Highlighting Page Regions

Highlight zones draw attention to regions of a page — for example, the passages a search, an AI answer or a review comment refers to. They are an overlay drawn by the viewer, not annotations: nothing is written to the PDF, and the reader can keep scrolling, zooming and selecting while they are shown.

Activate the HIGHLIGHT_ZONE tool on the document model with the regions to show. The view scrolls to the first region.

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

const documentModel = editor.ui.pdfWebService.getActiveDocumentViewElement()?.documentView;

documentModel?.setActiveTool(ToolTypes.HIGHLIGHT_ZONE, {
  locations: [
    { page: 1, bbox: [72, 100, 540, 160] },
    {
      page: 2,
      rects: [
        [72, 300, 300, 318],
        [72, 320, 250, 338],
      ],
    },
  ],
  strokeColor: '#4F46E5',
  label: 'Referenced in answer',
});

To show several independent groups at once, each with its own label, pass items instead of locations. items takes priority when both are given.

documentModel?.setActiveTool(ToolTypes.HIGHLIGHT_ZONE, {
  items: [
    { locations: [{ page: 1, bbox: [72, 100, 540, 160] }], label: 'Source 1' },
    { locations: [{ page: 3, bbox: [72, 420, 540, 470] }], label: 'Source 2' },
  ],
  strokeColor: '#4F46E5',
  showLabelOnHover: true,
});

Calling it again replaces the current highlights. To remove them, switch back to the View tool:

documentModel?.setActiveTool(ToolTypes.VIEW);

Locations

Each entry in locations (or in an item's locations) describes one region. Entries without coordinates are skipped.

Field	Type	Description
`page`	`number`	Required. 1-based page number.
`bbox`	`[x0, y0, x1, y1]`	One rectangle, in PDF points from the page's top-left corner (Y grows downward).
`rects`	`[x0, y0, x1, y1][]`	Several rectangles in the same space — e.g. one per text line. Takes priority over `bbox`.
`nativeRect`	`{ left: number; top: number; right: number; bottom: number }`	One rectangle in native PDF page space (origin bottom-left, Y grows upward). Takes priority over `rects` and `bbox`.

Appearance options

Sizes marked "CSS pixels" are at 100% zoom and scale with the zoom level.

Option	Type	Default	Description
`items`	`{ locations; label?: string }[]`	—	Several groups of regions, each with its own label. Takes priority over `locations` and `label`.
`fillColor`	`string`	Theme text-selection color	Fill of the regions. `'transparent'` for outline only.
`strokeColor`	`string`	—	Border color. No border when omitted.
`strokeWidth`	`number`	`1`	Border thickness in device pixels (not scaled by `devicePixelRatio`).
`strokeStyle`	`'solid' \| 'dashed'`	`'solid'`	Border line style.
`borderRadius`	`number`	`3`	Corner radius of the regions, in device pixels. `0` for square corners.
`padding`	`number`	`10`	Space added around each region, in device pixels (not scaled by `devicePixelRatio`).
`label`	`string`	—	Text shown in a pill above the first region (with `locations`). No label when omitted.
`showLabelOnHover`	`boolean`	`false`	Show each label only while the pointer is over its regions.
`labelGap`	`number`	`0`	Space between the label pill and the region below it, in CSS pixels.
`labelColor`	`string`	`strokeColor`, else `#000000`	Label text color.
`labelBackgroundColor`	`string`	`--pwv-ai-chat-mark-label-background-default`	Label pill background.
`borderRadiusTopLeft`	`number`	`0`	Label pill top-left corner radius, in CSS pixels. Same for `TopRight`, `BottomRight`, `BottomLeft`.
`fontSize`	`number`	`12`	Label font size in CSS pixels.
`horizontalLabelPadding`	`number`	`4`	Horizontal padding inside the pill, in CSS pixels.
`verticalLabelPadding`	`number`	`2`	Vertical padding inside the pill, in CSS pixels.
`showIcon`	`boolean`	`true`	Show an icon before the label text. `false` for a text-only pill.
`iconSize`	`number`	`12`	Icon size in CSS pixels.
`iconColor`	`string`	`labelColor`	Icon color.
`iconChar`	`string`	Built-in sparkle icon	A character drawn with `iconFontFamily` instead of the sparkle.
`iconFontFamily`	`string`	`'pwv-icons'`	Font used for `iconChar`.
`iconSvg`	`string`	—	SVG markup drawn as the icon. Loaded asynchronously, so the first frame may show no icon.
`iconRenderer`	`(target, iconSize: number, color: string) => void`	—	Custom drawing callback. Takes priority over `iconChar` and `iconSvg`.

Icon sources are used in this order: iconRenderer, iconChar, iconSvg, then the built-in sparkle.

Events

New Document Event

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

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

API Reference

Properties

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

Methods

Method	Description
`openFile(file: File, layout?: DocumentViewModeEnum, pageView?: PdfPageView, claims?: readonly string[]): Promise<` ui.IDocumentViewModel`>`	Opens a PDF file in this view.
`openBlank(data?:` sdk.ICreateNewDocumentData`, layout?: DocumentViewModeEnum, pageView?: PdfPageView): Promise<` ui.IDocumentViewModel`>`	Opens a new blank document.
`exportFile(exportFileAs?:` sdk.ExportFileAs`): Promise<` sdk.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.

PDF Web SDK Documentation