Class: Viewer

ReportViewer.Viewer

Report viewer component.

Table of contents

Constructors

• constructor

Accessors

• availableExports
• currentPage
• documentLoaded
• errorHandler
• history
• mouseMode
• pageCount
• renderMode
• reportLoaded
• stateChanged
• toolbar
• viewMode
• zoom

Methods

• backToParent
• canBackToParent
• dispose
• export
• goToFirstPage
• goToLastPage
• goToNextPage
• goToPage
• goToPrevPage
• highlight
• open
• print
• refresh
• registerFont
• resetDocument
• search
• toggleFullScreen
• toggleSidebar
• toggleToolbar

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:989

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:1199

• 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:1200

---

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:1178

---

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:1301

---

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:1105

• 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:1106

---

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:1188

---

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:1085

• 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:1086

---

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:1186

---

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:1045

• 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:1046

---

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:1288

---

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:1111

---

toolbar

• get toolbar(): Toolbar

Gets the viewer toolbar component.

Returns

Toolbar

Defined in

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

---

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:1060

• 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:1061

---

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:1076

• 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:1077

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:1160

---

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:1170

---

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:1347

---

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	Record<string, string | number | boolean>	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:1218

---

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:1120

---

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:1144

---

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:1136

---

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:1152

---

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:1128

---

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:1345

---

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; DataElementName?: string | undefined; DataElementStyle?: DataElementStyle | undefined; ... 17 more ...; Value?: RDLExpr<...> | undefined; }) | ... 20 more ... | ( & ))[] | undefined; Style?: ( & ) | undefin... ; ConsumeContainerWhitespace: undefined | boolean ; CustomProperties: undefined | { Name: string } & { Value?: RDLExpr<Variant> | undefined; }[] ; DataElementName: undefined | string ; DataElementStyle: undefined | "Attribute" | "Element" ; DataSets: undefined | { Name: string } & { Filters?: ( & { FilterExpression?: RDLExpr<Variant> | undefined; Operator?: FilterOperator | undefined; FilterValues?: RDLExpr<Variant>[] | undefined; })[] | undefined; ... 6 more ...; WidthSensitivity?: ThreeStateBool | undefined; }[] ; DataSources: undefined | { Name: string } & { Transaction?: boolean | undefined; DataSourceReference?: string | undefined; ConnectionProperties?: ( & { Prompt?: string | undefined; DataProvider?: string | undefined; ConnectString?: string | undefined; IntegratedSecurity?: boolean | 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" } & { DataElementName?: string | undefined; Pages?: ({ Type: "fixedpagesection"; } & { ReportItems?: (({ Type: "textbox"; Name: string; } & { Width?: string | undefined; DataElementName?: string | undefined; ... 18 more ...; Value?: RDLExpr<...> | undefined; }) | ... 20 more ... | ( & ))[] | undefined; S... ; Language: undefined | string ; Layers: undefined | { Name: string ; Type: "layer" } & { DesignerLock?: boolean | undefined; DesignerTransparency?: number | undefined; DesignerVisible?: boolean | undefined; TargetDevice?: string | undefined; }[] ; LocalizationResources: undefined | & { Language?: string | undefined; Data?: ({ Name: string; } & { Value?: RDLExpr<Variant> | undefined; })[] | undefined; }[] ; Page: undefined | & { BottomMargin?: string | undefined; Columns?: number | undefined; ColumnSpacing?: string | undefined; LeftMargin?: string | undefined; PageHeight?: string | undefined; PageWidth?: string | undefined; RightMargin?: string | undefined; TopMargin?: string | undefined; } ; PageFooter: undefined | null | { Name: string ; Type: "pagesection" } & { ReportItems?: (({ Type: "textbox"; Name: string; } & { Width?: string | undefined; DataElementName?: string | undefined; DataElementStyle?: DataElementStyle | undefined; ... 17 more ...; Value?: RDLExpr<...> | undefined; }) | ... 20 more ... | ( & ))[] | undefined; Style?: ( & ) | undefin... ; PageHeader: undefined | null | { Name: string ; Type: "pagesection" } & { ReportItems?: (({ Type: "textbox"; Name: string; } & { Width?: string | undefined; DataElementName?: string | undefined; DataElementStyle?: DataElementStyle | undefined; ... 17 more ...; Value?: RDLExpr<...> | undefined; }) | ... 20 more ... | ( & ))[] | undefined; Style?: ( & ) | undefin... ; ReportParameters: undefined | { Name: string } & { Multiline?: boolean | undefined; AllowBlank?: boolean | undefined; DataType?: ReportParameterType | undefined; DateOnly?: boolean | undefined; DefaultValue?: ( & ) | ... 1 more ... | undefined; ... 6 more ...; ValidValues?: ( & ) | ... 1 more ... | 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:1005

---

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:1274

---

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:1168

---

registerFont

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

deprecated Use FontStore.registerFonts instead.

Register specified fonts in CSS and pdf export. Helps display export correctly on machines where fonts can be missed.

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:1256

▸ registerFont(configUri): Promise<void>

deprecated Use FontStore.registerFonts instead.

Register specified fonts in CSS and pdf export. Helps display export correctly on machines where fonts can be missed.

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:1266

---

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:993

---

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:1316

---

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:1037

---

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:1018

---

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:1029