Viewer.Viewer-1

Class: Viewer

Viewer.Viewer

Report viewer component.

Constructors

constructor

Accessors

Methods

Constructors

constructor

• new Viewer(element, options?)

Creates the viewer within container element (div) with id='viewer' and sets the language:

var options = { language: 'ru' };
var viewer = new ActiveReports.Viewer('#viewer', options );
viewer.open('report.json');

Parameters

Name	Type	Description
`element`	`any`	Where to render the viewer control. Accepts on of the following values: - string: DOM selector of the element to render viewer to. E.g. '#viewer' - DOM Element. E.g. document.getElementById('viewer') - JQuery object. E.g. $('#viewer')
`options?`	`ViewerOptions`	Control settings.

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:149

Accessors

availableExports

• get availableExports(): string[]

Set exports which should be displayed in export panel when export plugins attached to viewer.

viewer.availableExports = [''] //disable all loaded export modules
viewer.availableExports = ['pdf'] //filters out any export formats other than PDF
viewer.availableExports = [] //enable all loaded export modules

Returns

string[]

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:357

• set availableExports(formatKeys): void

Set exports which should be displayed in export panel when export plugins attached to viewer.

viewer.availableExports = [''] //disable all loaded export modules
viewer.availableExports = ['pdf'] //filters out any export formats other than PDF
viewer.availableExports = [] //enable all loaded export modules

Parameters

Name	Type
`formatKeys`	`string`[]

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:358

currentPage

• get currentPage(): number

Gets current page number (1-based). Returns 0 if no document loaded.

var pageNumber = viewer.currentPage;

Returns

number

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:337

documentLoaded

• get documentLoaded(): EventFan<DocumentLoadEventArgs>

Set and register documentLoaded event which occurs once document is fully rendered in viewer. Also works on refresh.

type DocumentLoadedEventArgs = {
    pageCount: number;
    cancelled?: boolean;
}

viewer.documentLoaded.register(args => console.log('Report was fully rendered ', args));

Returns

EventFan<DocumentLoadEventArgs>

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:455

errorHandler

• get errorHandler(): ErrorHandler

Gets or sets error handler for viewer. Allow user to override existing and not to show error pane if user wants to customize error output.

type ErrorMessage = {
    severity: "error" | "warn" | "info" | "debug";
    message: string,
    details: string);

function handler(error: ErrorMessage){
    console.log(error.message);
    return true; // return true if you don't want to show this error in viewer's error pane
}

viewer.errorHandler = handler;

Returns

ErrorHandler

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:265

• set errorHandler(handler): void

Gets or sets error handler for viewer. Allow user to override existing and not to show error pane if user wants to customize error output.

type ErrorMessage = {
    severity: "error" | "warn" | "info" | "debug";
    message: string,
    details: string);

function handler(error: ErrorMessage){
    console.log(error.message);
    return true; // return true if you don't want to show this error in viewer's error pane
}

viewer.errorHandler = handler;

Parameters

Name	Type
`handler`	`ErrorHandler`

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:266

history

• get history(): HistoryApi

Provides access to the "history" API.

Returns

HistoryApi

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:347

mouseMode

• get mouseMode(): ViewerMouseMode

Gets or sets mouse mode in viewer. Available values are: Pan | Selection.

viewer.mouseMode = "pan";

Returns

ViewerMouseMode

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:245

• set mouseMode(value): void

Gets or sets mouse mode in viewer. Available values are: Pan | Selection.

viewer.mouseMode = "pan";

Parameters

Name	Type
`value`	`ViewerMouseMode`

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:246

pageCount

• get pageCount(): number

Gets the total number of pages available in report.

var totalPages = viewer.pageCount;

Returns

number

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:345

renderMode

• get renderMode(): ViewerRenderMode

Gets or sets viewer render mode. Available values are: Galley | Paginated

viewer.renderMode = 'Galley';

Returns

ViewerRenderMode

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:205

• set renderMode(mode): void

Gets or sets viewer render mode. Available values are: Galley | Paginated

viewer.renderMode = 'Galley';

Parameters

Name	Type
`mode`	`ViewerRenderMode`

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:206

reportLoaded

• get reportLoaded(): EventFan<ReportLoadEventArgs>

Set and register reportLoaded event which occurs once report is loaded in viewer. Doesn't account for drill through reports.

 type ReportLoadedEventArgs = {
    reportSource: string | RDLReportDefinition;
    parameters: ParameterDescriptor[];
}

viewer.reportLoaded.register(args => console.log('Report just loaded ', args));

Returns

EventFan<ReportLoadEventArgs>

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:442

stateChanged

• get stateChanged(): EventFan<ChangedEventArgs>

Gets the event indicating the viewer state is changed. The changes include visual settings and content change such as rendering document.

Returns

EventFan<ChangedEventArgs>

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:271

• get toolbar(): Toolbar

Gets the viewer toolbar component.

Returns

Toolbar

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:167

viewMode

• get viewMode(): ViewerViewMode | ViewMode

Gets or sets viewer viewMode.

enum ViewMode {
    SinglePage = 0,
    ContinousPage = 1
}
var viewMode = viewer.viewMode //by default SinglePage
//set to continous
viewer.viewMode = 'continuous' // or viewer.viewMode = 1;

Returns

ViewerViewMode | ViewMode

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:220

• set viewMode(value): void

Gets or sets viewer viewMode.

enum ViewMode {
    SinglePage = 0,
    ContinousPage = 1
}
var viewMode = viewer.viewMode //by default SinglePage
//set to continous
viewer.viewMode = 'continuous' // or viewer.viewMode = 1;

Parameters

Name	Type
`value`	`ViewerViewMode` \| `ViewMode`

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:221

zoom

• get zoom(): ViewerZoomMode

Gets or sets current zoom value. Zoom value could be specified as factor. Valid values:

from 0 up to 3 where 0.5 indicate 50% and 3 = 300%;
const values 'FitToWidth' | 'FitPage' (case insensitive)

var currentZoom = viewer.zoom; //by default 1 (100%)
//now set mode to Fit to Width
viewer.zoom = 'FitToWidth';
//now verify value
var newValue = viewer.zoom;
//newValue will be equal to FitToWidth

Returns

ViewerZoomMode

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:236

• set zoom(value): void

Gets or sets current zoom value. Zoom value could be specified as factor. Valid values:

from 0 up to 3 where 0.5 indicate 50% and 3 = 300%;
const values 'FitToWidth' | 'FitPage' (case insensitive)

var currentZoom = viewer.zoom; //by default 1 (100%)
//now set mode to Fit to Width
viewer.zoom = 'FitToWidth';
//now verify value
var newValue = viewer.zoom;
//newValue will be equal to FitToWidth

Parameters

Name	Type
`value`	`ViewerZoomMode`

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:237

Methods

backToParent

▸ backToParent(): void

Performs backToParent action which will return user to parent report.

viewer.backToParent();

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:319

canBackToParent

▸ canBackToParent(): boolean

Gets true if backToParent command is applicable to current document.

Returns

boolean

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:329

dispose

▸ dispose(): void

Removes the control from the DOM and disposes any resources (internal).

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:501

export

▸ export(format, settings, params?): Promise<ExportResult>

Exports currently displayed report to specified output format. Returns object which contains result data as blob object | string and download function. So you could either use this blob object or download file immediately. Please note that you can specify settings in PDF export as plain list (like {title: 'Title', author: 'Author Name', ownerPassword: '1'} etc...

var options = {filename:"Invoice List"};
var cancelCallback = function(){
    return false; // continue export. Return true to cancel export process
}
viewer.export('pdf', options, {cancel: cancelCallback }).then(result => doSmthWithBlob(result.data));
//or you can download file
viewer.export('pdf', options, {cancel: cancelCallback }).then(result => result.download('Invoice List'));

Parameters

Name	Type	Description
`format`	`string`	Export format identifier. One of 'pdf', 'xlsx' or 'html'.
`settings`	`any`[]	Format specific export settings.
`params?`	`Object`	Additional export customization.
`params.cancel?`	() => `boolean`	-

Returns

Promise<ExportResult>

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:376

goToFirstPage

▸ goToFirstPage(): void

Navigates to the first page.

viewer.goToFirstPage();

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:279

goToLastPage

▸ goToLastPage(): void

Navigates to the last page.

viewer.goToLastPage();

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:303

goToNextPage

▸ goToNextPage(): void

Navigates to the next page.

viewer.goToNextPage();

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:295

goToPage

▸ goToPage(pageNumber): void

Navigates to the specified page (starting from 1).

viewer.goToPage(3); //will navigate to 3d page

Parameters

Name	Type
`pageNumber`	`number`

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:311

goToPrevPage

▸ goToPrevPage(): void

Navigates to the previous page.

viewer.goToPrevPage();

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:287

highlight

▸ highlight(result): Promise<void>

Highlights the search result returned by a search method.

results = [];

function search(text){
    viewer.search({text}, function(result){
        results.push(result)
    }).then(function(status){
        console.log(status)
    })
}

function nextSearchResult(index){
    if(results.length == 0){
        viewer.highlight(null);
        return;
    }
    viewer.hightlight(resutls[index]);
}

Parameters

Name	Type
`result`	`null` \| `SearchResult`

Returns

Promise<void>

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:499

open

▸ open(report, settings?): Promise<LoadResult>

Opens report from file or as definition (json string)).

var viewer = new ActiveReports.Viewer(#viewerPlace);
viewer.open('report.json');

Parameters

Name	Type	Description
`report`	`string` \| `PageReport` \| { `Name`: `string` ; `Type`: `"report"` } & { `Author`: `undefined` \| `string` ; `Body`: `undefined` \| `null` \| { `Name`: `string` ; `Type`: `"section"` } & { ReportItems?: (({ Type: "textbox"; Name: string; } & { Width?: string \| undefined; Language?: string \| undefined; DataElementName?: string \| undefined; Style?: ( & { Language?: string \| undefined; ... 30 more ...; MinCondenseRate?: RDLExpr<...> \| undefined; }) \| undefined; ... 16 more ...; UserSort?: ( & { ...... ; `ConsumeContainerWhitespace`: `undefined` \| `boolean` ; `CustomProperties`: `undefined` \| { `Name`: `string` } & { Value?: RDLExpr<RDLVariant> \| undefined; }[] ; `DataElementName`: `undefined` \| `string` ; `DataElementStyle`: `undefined` \| `RDLDataElementStyle` ; `DataSets`: `undefined` \| { `Name`: `string` } & { Filters?: ( & { FilterExpression?: RDLExpr<RDLVariant> \| undefined; Operator?: RDLFilterOperator \| undefined; FilterValues?: RDLExpr<RDLVariant>[] \| undefined; })[] \| undefined; Fields?: ( & )[] \| undefined; Query?: ( & ) \| undefined; }[] ; `DataSources`: `undefined` \| { `Name`: `string` } & { Transaction?: boolean \| undefined; DataSourceReference?: string \| undefined; ConnectionProperties?: ( & { DataProvider?: string \| undefined; ConnectString?: string \| undefined; ... 4 more ...; WidthSensivity?: "Auto" \| ... 2 more ... \| undefined; }) \| undefined; }[] ; `Description`: `undefined` \| `string` ; `DocumentMap`: `undefined` \| & { Levels?: string[] \| undefined; Source?: "None" \| "Labels" \| "Headings" \| "All" \| undefined; NumberingStyle?: string \| undefined; } ; `EmbeddedImages`: `undefined` \| { `Name`: `string` } & { MIMEType?: string \| undefined; ImageData?: string \| undefined; }[] ; `FixedPage`: `undefined` \| `null` \| { `Name`: `string` ; `Type`: `"fixedpage"` } & { Pages?: ({ Type: "fixedpagesection"; } & { ReportItems?: (({ Type: "textbox"; Name: string; } & { Width?: string \| undefined; Language?: string \| undefined; DataElementName?: string \| undefined; ... 17 more ...; UserSort?: ( & ) \| undefined; }) \| ... 18 more ... \| ( & ))[] \| undefined; St... ; `Language`: `undefined` \| `string` ; `LocalizationResources`: `undefined` \| & { Language?: string \| undefined; Data?: ({ Name: string; } & { Value?: RDLExpr<RDLVariant> \| undefined; })[] \| undefined; }[] ; `Page`: `undefined` \| & { Style?: ( & { [x: string]: any; [x: number]: any; }) \| undefined; PageHeight?: string \| undefined; PageWidth?: string \| undefined; LeftMargin?: string \| undefined; RightMargin?: string \| undefined; TopMargin?: string \| undefined; BottomMargin?: string \| undefined; Columns?: number \| undefined; ColumnSpacing?: st... ; `PageFooter`: `undefined` \| `null` \| { `Name`: `string` ; `Type`: `"pagesection"` } & { ReportItems?: (({ Type: "textbox"; Name: string; } & { Width?: string \| undefined; Language?: string \| undefined; DataElementName?: string \| undefined; Style?: ( & { Language?: string \| undefined; ... 30 more ...; MinCondenseRate?: RDLExpr<...> \| undefined; }) \| undefined; ... 16 more ...; UserSort?: ( & { ...... ; `PageHeader`: `undefined` \| `null` \| { `Name`: `string` ; `Type`: `"pagesection"` } & { ReportItems?: (({ Type: "textbox"; Name: string; } & { Width?: string \| undefined; Language?: string \| undefined; DataElementName?: string \| undefined; Style?: ( & { Language?: string \| undefined; ... 30 more ...; MinCondenseRate?: RDLExpr<...> \| undefined; }) \| undefined; ... 16 more ...; UserSort?: ( & { ...... ; `ReportParameters`: `undefined` \| { `Name`: `string` } & { Multiline?: boolean \| undefined; DataType?: RDLReportParameterType \| undefined; Nullable?: boolean \| undefined; DefaultValue?: ( & { Values?: ( & ) \| undefined; DataSetReference?: ( & ) \| undefined; }) \| undefined; ... 6 more ...; SelectAllValue?: RDLExpr<...> \| undefined; }[] ; `StartPageNumber`: `undefined` \| `number` ; `ThemeUri`: `undefined` \| `string` ; `Width`: `undefined` \| `string` }	The report template. Can be report URI, or report definition, or instance of PageReport class.
`settings?`	`Partial`<`ReportSettings`>	Additional settings for report (name, parameters).

Returns

Promise<LoadResult>

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:165

print

▸ print(): void

Prints currently displayed report.

viewer.print();

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:428

refresh

▸ refresh(): void

Performs refresh operation in report (re-render report).

viewer.refresh();

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:327

registerFont

▸ registerFont(...fonts): Promise<void>

type FontDescriptor = {
    name: string,
    source: string,
    weight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900',
    style?: 'normal' | 'italic' | 'oblique'
}

var arial = {
    name: 'Arial',
    source: 'fonts/arial.ttf',
    style: 'italic',
    weight: '700',
};

var gothic = {
    name: 'MS PGothic',
    source: 'fonts/MS-PGothic.ttf'
};

viewer.registerFont(arial);
//OR
viewer.registerFont(arial, gothic);
//OR
var fonts = [arial, gothic]; viewer.registerFont(...fonts);

Parameters

Name	Type
`...fonts`	`FontDescriptor`[]

Returns

Promise<void>

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:412

▸ registerFont(configUri): Promise<void>

viewer.registerFont('./fontsConfig.json');

Parameters

Name	Type
`configUri`	`string`

Returns

Promise<void>

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:420

resetDocument

▸ resetDocument(): Promise<void>

Resets current viewer document

Returns

Promise<void>

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:153

search

▸ search(options, resultFn, progressFn?, cancel?): Promise<SearchStatus>

Performs search operation in currently rendered report. Allows you to create your own custom search pane.

viewer.search({
    text: "Ship",
    matchCase: true
}, function(result){
    console.log(result)
}, function(progress){
    console.log(progress)
})

Parameters

Name	Type
`options`	`SearchOptions`
`resultFn`	(`result`: `SearchResult`) => `void`
`progressFn?`	(`progress`: { `pageCount`: `null` \| `number` ; `pageIndex`: `number` }) => `void`
`cancel?`	`CancellationToken`

Returns

Promise<SearchStatus>

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:470

toggleFullScreen

▸ toggleFullScreen(enabled?): void

Change viewer mode to fullscreen.

viewer.toggleFullScreen();

Parameters

Name	Type
`enabled?`	`boolean`

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:197

toggleSidebar

▸ toggleSidebar(visible?): void

Toggle sidebar panel(hide or show it). In case if no parameter passed works as toggle.

viewer.toggleSidebar(); //will hide toolbar if visible
viewer.toggleSidebar(true);//will show it regardless current state

Parameters

Name	Type	Description
`visible?`	`boolean`	New visibility status. If value is not passed, the function will toggle current state.

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:178

toggleToolbar

▸ toggleToolbar(show?): void

Toggle toolbar (hide or show it).

viewer.toggleToolbar(); // toggles toolbar visibility
viewer.toggleToolbar(true); //will show it

Parameters

Name	Type	Description
`show?`	`boolean`	Pass true to switch toolbar ON, and vise-versa. Do not pass any value to toggle visibility.

Returns

void

Defined in

node_modules/@grapecity/ar-js-viewer/dist/ar-js-viewer.d.ts:189

Viewer.Viewer-1

Class: Viewer

Table of contents

Constructors

Accessors

Methods

Constructors

constructor

Parameters

Defined in

Accessors

availableExports

Returns

Defined in

Parameters

Returns

Defined in

currentPage

Returns

Defined in

documentLoaded

Returns

Defined in

errorHandler

Returns

Defined in

Parameters

Returns

Defined in

history

Returns

Defined in

mouseMode

Returns

Defined in

Parameters

Returns

Defined in

pageCount

Returns

Defined in

renderMode

Returns

Defined in

Parameters

Returns

Defined in

reportLoaded

Returns

Defined in

stateChanged

Returns

Defined in

toolbar

Returns

Defined in

viewMode

Returns

Defined in

Parameters

Returns

Defined in

zoom

Returns

Defined in

Parameters

Returns

Defined in

Methods

backToParent

Returns

Defined in

canBackToParent

Returns

Defined in

dispose

Returns

Defined in

export

Parameters