# ReportViewer.Viewer

## Content

# Class: Viewer

[ReportViewer](../modules/ReportViewer).Viewer

Represents the report viewer component.

**`remarks`**
Use this class to render and interact with reports in the browser.

**`example`**
```ts
const viewer = new Viewer('#viewer');
```

## Table of contents

### Constructors

- [constructor](ReportViewer.Viewer#constructor)

### Accessors

- [availableExports](ReportViewer.Viewer#availableexports)
- [currentPage](ReportViewer.Viewer#currentpage)
- [documentLoaded](ReportViewer.Viewer#documentloaded)
- [errorHandler](ReportViewer.Viewer#errorhandler)
- [history](ReportViewer.Viewer#history)
- [mouseMode](ReportViewer.Viewer#mousemode)
- [pageCount](ReportViewer.Viewer#pagecount)
- [renderMode](ReportViewer.Viewer#rendermode)
- [reportLoaded](ReportViewer.Viewer#reportloaded)
- [showParametersOnOpen](ReportViewer.Viewer#showparametersonopen)
- [stateChanged](ReportViewer.Viewer#statechanged)
- [theme](ReportViewer.Viewer#theme)
- [toolbar](ReportViewer.Viewer#toolbar)
- [viewMode](ReportViewer.Viewer#viewmode)
- [zoom](ReportViewer.Viewer#zoom)

### Methods

- [backToParent](ReportViewer.Viewer#backtoparent)
- [canBackToParent](ReportViewer.Viewer#canbacktoparent)
- [dispose](ReportViewer.Viewer#dispose)
- [export](ReportViewer.Viewer#export)
- [goToFirstPage](ReportViewer.Viewer#gotofirstpage)
- [goToLastPage](ReportViewer.Viewer#gotolastpage)
- [goToNextPage](ReportViewer.Viewer#gotonextpage)
- [goToPage](ReportViewer.Viewer#gotopage)
- [goToPrevPage](ReportViewer.Viewer#gotoprevpage)
- [highlight](ReportViewer.Viewer#highlight)
- [open](ReportViewer.Viewer#open)
- [print](ReportViewer.Viewer#print)
- [refresh](ReportViewer.Viewer#refresh)
- [resetDocument](ReportViewer.Viewer#resetdocument)
- [search](ReportViewer.Viewer#search)
- [toggleFullScreen](ReportViewer.Viewer#togglefullscreen)
- [toggleSidebar](ReportViewer.Viewer#togglesidebar)
- [toggleToolbar](ReportViewer.Viewer#toggletoolbar)

## Constructors

### <a id="constructor" name="constructor"></a> constructor

• **new Viewer**(`element`, `options?`)

Initializes a new instance of the [Viewer](ReportViewer.Viewer) class.

**`example`**
```ts
const viewer = new ActiveReports.Viewer('#viewer', { language: 'en' });
await viewer.open('report.json');
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `element` | `string` \| `object` \| `Element` | The host element for the viewer. |
| `options?` | [`ViewerOptions`](../interfaces/ReportViewer.ViewerOptions) | Optional viewer configuration settings. |

## Accessors

### <a id="availableexports" name="availableexports"></a> availableExports

• `get` **availableExports**(): `string`[]

Gets or sets the export formats shown in the export panel.

#### Returns

`string`[]

• `set` **availableExports**(`formatKeys`): `void`

Gets or sets the export formats shown in the export panel.

#### Parameters

| Name | Type |
| :------ | :------ |
| `formatKeys` | `string`[] |

#### Returns

`void`

___

### <a id="currentpage" name="currentpage"></a> currentPage

• `get` **currentPage**(): `number`

Gets the current page number (1-based).

#### Returns

`number`

___

### <a id="documentloaded" name="documentloaded"></a> documentLoaded

• `get` **documentLoaded**(): [`Event`](../interfaces/Core.Event)<[`DocumentLoadEventArgs`](../modules/ReportViewer#documentloadeventargs)\>

Gets the event fired after the document is fully rendered.

#### Returns

[`Event`](../interfaces/Core.Event)<[`DocumentLoadEventArgs`](../modules/ReportViewer#documentloadeventargs)\>

___

### <a id="errorhandler" name="errorhandler"></a> errorHandler

• `get` **errorHandler**(): `ErrorHandler`

Gets or sets the viewer error handler.

#### Returns

`ErrorHandler`

• `set` **errorHandler**(`handler`): `void`

Gets or sets the viewer error handler.

#### Parameters

| Name | Type |
| :------ | :------ |
| `handler` | `ErrorHandler` |

#### Returns

`void`

___

### <a id="history" name="history"></a> history

• `get` **history**(): [`HistoryApi`](../interfaces/ReportViewer.HistoryApi)

Gets the history API.

#### Returns

[`HistoryApi`](../interfaces/ReportViewer.HistoryApi)

___

### <a id="mousemode" name="mousemode"></a> mouseMode

• `get` **mouseMode**(): [`ViewerMouseMode`](../modules/ReportViewer#viewermousemode)

Gets or sets the mouse interaction mode.

#### Returns

[`ViewerMouseMode`](../modules/ReportViewer#viewermousemode)

• `set` **mouseMode**(`value`): `void`

Gets or sets the mouse interaction mode.

#### Parameters

| Name | Type |
| :------ | :------ |
| `value` | [`ViewerMouseMode`](../modules/ReportViewer#viewermousemode) |

#### Returns

`void`

___

### <a id="pagecount" name="pagecount"></a> pageCount

• `get` **pageCount**(): `number`

Gets the total number of pages in the current report.

#### Returns

`number`

___

### <a id="rendermode" name="rendermode"></a> renderMode

• `get` **renderMode**(): [`ViewerRenderMode`](../modules/ReportViewer#viewerrendermode)

Gets or sets the viewer render mode.

#### Returns

[`ViewerRenderMode`](../modules/ReportViewer#viewerrendermode)

• `set` **renderMode**(`mode`): `void`

Gets or sets the viewer render mode.

#### Parameters

| Name | Type |
| :------ | :------ |
| `mode` | [`ViewerRenderMode`](../modules/ReportViewer#viewerrendermode) |

#### Returns

`void`

___

### <a id="reportloaded" name="reportloaded"></a> reportLoaded

• `get` **reportLoaded**(): [`Event`](../interfaces/Core.Event)<[`ReportLoadEventArgs`](../modules/ReportViewer#reportloadeventargs)\>

Gets the event fired after a report is loaded.

#### Returns

[`Event`](../interfaces/Core.Event)<[`ReportLoadEventArgs`](../modules/ReportViewer#reportloadeventargs)\>

___

### <a id="showparametersonopen" name="showparametersonopen"></a> showParametersOnOpen

• `get` **showParametersOnOpen**(): [`ShowParametersOnOpen`](../modules/ReportViewer#showparametersonopen)

Gets or sets when the parameters panel is shown.

#### Returns

[`ShowParametersOnOpen`](../modules/ReportViewer#showparametersonopen)

• `set` **showParametersOnOpen**(`mode`): `void`

Gets or sets when the parameters panel is shown.

#### Parameters

| Name | Type |
| :------ | :------ |
| `mode` | [`ShowParametersOnOpen`](../modules/ReportViewer#showparametersonopen) |

#### Returns

`void`

___

### <a id="statechanged" name="statechanged"></a> stateChanged

• `get` **stateChanged**(): [`Event`](../interfaces/Core.Event)<`ChangedEventArgs`\>

Gets the event that indicates viewer state changes.

#### Returns

[`Event`](../interfaces/Core.Event)<`ChangedEventArgs`\>

___

### <a id="theme" name="theme"></a> theme

• `get` **theme**(): `undefined` \| [`UITheme`](../modules/ReportViewer#uitheme)

Gets or sets the current UI theme.

#### Returns

`undefined` \| [`UITheme`](../modules/ReportViewer#uitheme)

• `set` **theme**(`value`): `void`

Gets or sets the current UI theme.

#### Parameters

| Name | Type |
| :------ | :------ |
| `value` | `undefined` \| [`UITheme`](../modules/ReportViewer#uitheme) |

#### Returns

`void`

___

### <a id="toolbar" name="toolbar"></a> toolbar

• `get` **toolbar**(): [`Toolbar`](../interfaces/ReportViewer.Toolbar)

Gets the viewer toolbar API.

#### Returns

[`Toolbar`](../interfaces/ReportViewer.Toolbar)

___

### <a id="viewmode" name="viewmode"></a> viewMode

• `get` **viewMode**(): [`ViewerViewMode`](../modules/ReportViewer#viewerviewmode) \| [`ViewMode`](../enums/ReportViewer.ViewMode)

Gets or sets the viewer view mode.

#### Returns

[`ViewerViewMode`](../modules/ReportViewer#viewerviewmode) \| [`ViewMode`](../enums/ReportViewer.ViewMode)

• `set` **viewMode**(`value`): `void`

Gets or sets the viewer view mode.

#### Parameters

| Name | Type |
| :------ | :------ |
| `value` | [`ViewerViewMode`](../modules/ReportViewer#viewerviewmode) \| [`ViewMode`](../enums/ReportViewer.ViewMode) |

#### Returns

`void`

___

### <a id="zoom" name="zoom"></a> zoom

• `get` **zoom**(): [`ViewerZoomMode`](../modules/ReportViewer#viewerzoommode)

Gets or sets the current zoom value.

#### Returns

[`ViewerZoomMode`](../modules/ReportViewer#viewerzoommode)

• `set` **zoom**(`value`): `void`

Gets or sets the current zoom value.

#### Parameters

| Name | Type |
| :------ | :------ |
| `value` | [`ViewerZoomMode`](../modules/ReportViewer#viewerzoommode) |

#### Returns

`void`

## Methods

### <a id="backtoparent" name="backtoparent"></a> backToParent

▸ **backToParent**(): `void`

Navigates back to the parent report.

**`example`**
```ts
viewer.backToParent();
```

#### Returns

`void`

___

### <a id="canbacktoparent" name="canbacktoparent"></a> canBackToParent

▸ **canBackToParent**(): `boolean`

Gets a value indicating whether back-to-parent navigation is available.

**`example`**
```ts
const canNavigate = viewer.canBackToParent();
```

#### Returns

`boolean`

`true` if back-to-parent navigation is available; otherwise, `false`.

___

### <a id="dispose" name="dispose"></a> dispose

▸ **dispose**(): `void`

Disposes the viewer and releases resources.

**`example`**
```ts
viewer.dispose();
```

#### Returns

`void`

___

### <a id="export" name="export"></a> export

▸ **export**(`format`, `settings`, `params?`): `Promise`<[`ExportResult`](../interfaces/ReportViewer.ExportResult)\>

Exports the current report to the specified format.

**`example`**
```ts
const result = await viewer.export('pdf', { title: 'Invoice' });
result.download('invoice.pdf');
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `format` | `string` | The export format identifier (for example, `pdf`, `xlsx`, or `html`). |
| `settings` | `Record`<`string`, `string` \| `number` \| `boolean`\> | The format-specific export settings. |
| `params?` | `Object` | Optional export parameters. |
| `params.cancel?` | () => `boolean` | - |

#### Returns

`Promise`<[`ExportResult`](../interfaces/ReportViewer.ExportResult)\>

A promise that resolves to the export result.

___

### <a id="gotofirstpage" name="gotofirstpage"></a> goToFirstPage

▸ **goToFirstPage**(): `void`

Navigates to the first page.

**`example`**
```ts
viewer.goToFirstPage();
```

#### Returns

`void`

___

### <a id="gotolastpage" name="gotolastpage"></a> goToLastPage

▸ **goToLastPage**(): `void`

Navigates to the last page.

**`example`**
```ts
viewer.goToLastPage();
```

#### Returns

`void`

___

### <a id="gotonextpage" name="gotonextpage"></a> goToNextPage

▸ **goToNextPage**(): `void`

Navigates to the next page.

**`example`**
```ts
viewer.goToNextPage();
```

#### Returns

`void`

___

### <a id="gotopage" name="gotopage"></a> goToPage

▸ **goToPage**(`pageNumber`): `void`

Navigates to the specified page.

**`example`**
```ts
viewer.goToPage(3);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `pageNumber` | `number` | The 1-based page number to navigate to. |

#### Returns

`void`

___

### <a id="gotoprevpage" name="gotoprevpage"></a> goToPrevPage

▸ **goToPrevPage**(): `void`

Navigates to the previous page.

**`example`**
```ts
viewer.goToPrevPage();
```

#### Returns

`void`

___

### <a id="highlight" name="highlight"></a> highlight

▸ **highlight**(`result`): `Promise`<`void`\>

Highlights a search result.

**`example`**
```ts
const result = {} as SearchFeature.SearchResult;
await viewer.highlight(result);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `result` | ``null`` \| [`SearchResult`](ReportViewer.SearchResult) | The search result to highlight, or `null` to clear. |

#### Returns

`Promise`<`void`\>

A promise that resolves when highlighting is complete.

___

### <a id="open" name="open"></a> open

▸ **open**(`report`, `settings?`): `Promise`<[`LoadResult`](../modules/ReportViewer#loadresult)\>

Opens a report from a URI, definition, or [PageReport](Core.PageReport) instance.

**`example`**
```ts
await viewer.open('report.json');
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `report` | `string` \| [`Report`](../modules/Core.Rdl#report) \| [`PageReport`](Core.PageReport) | The report source to open. |
| `settings?` | `Partial`<[`ReportSettings`](../interfaces/ReportViewer.ReportSettings)\> | Optional report settings. |

#### Returns

`Promise`<[`LoadResult`](../modules/ReportViewer#loadresult)\>

A promise that resolves to the load result.

___

### <a id="print" name="print"></a> print

▸ **print**(): `void`

Prints the current report.

**`example`**
```ts
viewer.print();
```

#### Returns

`void`

___

### <a id="refresh" name="refresh"></a> refresh

▸ **refresh**(): `void`

Refreshes the current report.

**`example`**
```ts
viewer.refresh();
```

#### Returns

`void`

___

### <a id="resetdocument" name="resetdocument"></a> resetDocument

▸ **resetDocument**(): `Promise`<`void`\>

Resets the current document state.

**`example`**
```ts
await viewer.resetDocument();
```

#### Returns

`Promise`<`void`\>

A promise that resolves when the document is reset.

___

### <a id="search" name="search"></a> search

▸ **search**(`options`, `resultFn`, `progressFn?`, `cancel?`): `Promise`<[`SearchStatus`](../enums/ReportViewer.SearchStatus)\>

Searches within the current report.

**`example`**
```ts
await viewer.search(
	{ text: 'Total' },
	(result) => console.log(result.pageIndex),
);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `options` | [`SearchOptions`](../modules/ReportViewer#searchoptions) | The search options. |
| `resultFn` | (`result`: [`SearchResult`](ReportViewer.SearchResult)) => `void` | The callback invoked for each search result. |
| `progressFn?` | (`progress`: { `pageCount`: ``null`` \| `number` ; `pageIndex`: `number`  }) => `void` | The optional callback invoked with search progress. |
| `cancel?` | [`CancellationToken`](ReportViewer.CancellationToken) | The optional cancellation token. |

#### Returns

`Promise`<[`SearchStatus`](../enums/ReportViewer.SearchStatus)\>

A promise that resolves to the search status.

___

### <a id="togglefullscreen" name="togglefullscreen"></a> toggleFullScreen

▸ **toggleFullScreen**(`enabled?`): `void`

Toggles full-screen mode.

**`example`**
```ts
viewer.toggleFullScreen(true);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `enabled?` | `boolean` | Optional full-screen override. When omitted, the current state is toggled. |

#### Returns

`void`

___

### <a id="togglesidebar" name="togglesidebar"></a> toggleSidebar

▸ **toggleSidebar**(`visible?`): `void`

Toggles the sidebar panel visibility.

**`example`**
```ts
viewer.toggleSidebar(true);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `visible?` | `boolean` | Optional visibility override. When omitted, the visibility is toggled. |

#### Returns

`void`

___

### <a id="toggletoolbar" name="toggletoolbar"></a> toggleToolbar

▸ **toggleToolbar**(`show?`): `void`

Toggles the toolbar visibility.

**`example`**
```ts
viewer.toggleToolbar(false);
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `show?` | `boolean` | Optional visibility override. When omitted, the visibility is toggled. |

#### Returns

`void`