# JSViewer

## Content

# Interface: JSViewer

## Properties

### backToParent

```ts
backToParent: () => void;
```

Makes the viewer to display the parent report of the drill-down report.

#### Returns

`void`

#### Examples

```javascript
// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
viewer.backToParent()
```

```javascript
// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
viewer.backToParent()
```

***

### currentPage

```ts
currentPage: () => number;
```

Gets the currently displayed page number.

#### Returns

`number`

An integer representing currently displayed page number.

#### Examples

```javascript
// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
console.log(viewer.currentPage())
```

```javascript
// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
console.log(viewer.currentPage())
```

***

### destroy

```ts
destroy: () => void;
```

Removes the viewer content from the element.

#### Returns

`void`

#### Examples

```javascript
// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
element: '#root'
});
viewer.destroy()
```

```javascript
// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root'
});
viewer.destroy()
```

***

### export

```ts
export: (exportType, callback, saveAsDialog, settings, isCancelRequested?) => void;
```

Exports the currently displayed report.

#### Parameters

##### exportType

[`ExportTypes`](../type-aliases/ExportTypes)

Specifies export format.

##### callback

[`ExportCallback`](../type-aliases/ExportCallback)

Function that is invoked once the export result is available (its Url is passed in the callback).

##### saveAsDialog

`boolean`

Indicates whether the save as dialog should be shown immediately once the export result is ready.

##### settings

`any`

The export settings are available for RenderingExtensions.

##### isCancelRequested?

() => `boolean` \| `Promise`<`boolean`>

The function is periodically called with a check to cancel the export task.

#### Returns

`void`

#### Examples

```javascript
// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
element: '#root',
reportID: 'AnnualReport.rdlx',
availableExports: ['Pdf']
});
viewer.export('Pdf', downloadReport, true, { Title: '1997 Annual Report' })

// function fetches the report from uri(callback function)
var downloadReport = function (uri) {
		var newWin = null;
		// open uri in new window
		try {
			newWin = window.open(uri);
		} catch (e) { }
		// if browser rejects opening new window, open uri in current window
		if (!newWin) {
			window.location = uri;
		}
	};
```

```javascript
// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root',
reportID: 'AnnualReport.rdlx',
availableExports: ['Pdf']
});
viewer.export('Pdf', downloadReport, true, { Title: '1997 Annual Report' })

// function fetches the report from uri(callback function)
var downloadReport = function (uri) {
		var newWin = null;
		// open uri in new window
		try {
			newWin = window.open(uri);
		} catch (e) { }
		// if browser rejects opening new window, open uri in current window
		if (!newWin) {
			window.location = uri;
		}
	};
```

***

### getToc

```ts
getToc: () => any;
```

Obtains the report TOC.

#### Returns

`any`

TOC tree.

#### Examples

```javascript
// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
console.log(viewer.getToc())
```

```javascript
// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
console.log(viewer.getToc())
```

***

### goToPage

```ts
goToPage: (pageNumber) => void;
```

Makes the viewer to display the specific page. Page numeration starts with 1.

#### Parameters

##### pageNumber

`number`

The number of pages to go to.

#### Returns

`void`

#### Examples

```javascript
// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
viewer.goToPage(1)
```

```javascript
// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
viewer.goToPage(1)
```

***

### openReport

```ts
openReport: (reportID, reportParameters?) => void;
```

Open report.

#### Parameters

##### reportID

`string`

The id of the report.

##### reportParameters?

[`Parameter`](Parameter)[]

The array of the parameters values.

#### Returns

`void`

#### Examples

```javascript
// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
element: '#root'
});
viewer.openReport('Invoice.rdlx')
```

```javascript
// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root'
});
viewer.openReport('Invoice.rdlx')
```

***

### pageCount

```ts
pageCount: () => number;
```

Gets the page count of the currently displayed report.

#### Returns

`number`

An integer representing page count.

#### Examples

```javascript
// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
console.log(viewer.pageCount())
```

```javascript
// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
console.log(viewer.pageCount())
```

***

### print

```ts
print: () => void;
```

Prints the currently displayed report if any.

#### Returns

`void`

#### Examples

```javascript
// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
viewer.print()
```

```javascript
// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
viewer.print()
```

***

### refresh

```ts
refresh: () => void;
```

Refreshes the report preview.

#### Returns

`void`

#### Examples

```javascript
// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
element: '#root'
});
viewer.refresh()
```

```javascript
// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root'
});
viewer.refresh()
```

***

### search

```ts
search: (searchTerm, searchOptions, callback) => void;
```

Performs the search of a specific term with specific search options (match case, whole word)
and invokes the specific callback with the search result passed.

#### Parameters

##### searchTerm

`string`

String to find.

##### searchOptions

[`SearchOptions`](SearchOptions)

The object optionally defines the search options.

##### callback

(`searchResult`) => `void`

The function to call after performing search.

#### Returns

`void`

#### Examples

```javascript
// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
viewer.search('a', { matchCase: true, wholePhrase: false }, (results) => console.log(results))
```

```javascript
// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root',
reportID: 'AnnualReport.rdlx'
});
viewer.search('a', { matchCase: true, wholePhrase: false }, (results) => console.log(results))
```

***

### sidebar

```ts
sidebar: Sidebar;
```

The viewer's sidebar instance. The developer may use it to toggle the sidebar visibility.

#### Examples

```javascript
// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
element: '#root'
});
viewer.sidebar.toggle(false); // hide sidebar
```

```javascript
// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root'
});
viewer.sidebar.toggle(false); // hide sidebar
```

***

### theme?

```ts
optional theme?: string | ColorTheme;
```

Gets or sets the viewer UI theme.

#### Examples

```javascript
import {createViewer, ColorThemes} from './jsViewer.min.js';
const viewer = createViewer({
    element: '#root',
});

viewer.theme = ColorThemes.defaultDark;
```

```javascript
var viewer = GrapeCity.ActiveReports.JSViewer.create({
    element: '#root'
});
 viewer.theme: ActiveReports.ColorThemes.defaultDark
```

***

### toolbar

```ts
toolbar: Toolbar;
```

The viewer's toolbar instance. The developer may use it to add the custom elements or remove the existing ones.

#### Examples

```javascript
// ESM usage
import { createViewer } from './jsViewer.min.js';
const viewer = createViewer({
element: '#root'
});
viewer.toolbar.toggle(false); // hide toolbar
```

```javascript
// UMD usage
var viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#root'
});
viewer.toolbar.toggle(false); // hide toolbar
```