[]
        
(Showing Draft Content)

ReportViewer.Viewer

Class: Viewer

ReportViewer.Viewer

Report viewer component.

Table of contents

Constructors

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: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; Language?: string | undefined; DataElementName?: string | undefined; DataElementStyle?: DataElementStyle | undefined; ... 17 more ...; Value?: RDLExpr<...> | undefined; }) | ... 19 more ... | ( & ))[] | undefined; St... ; ConsumeContainerWhitespace: undefined | boolean ; CustomProperties: undefined | { Name: string } & { Value?: RDLExpr<Variant> | undefined; }[] ; DataElementName: undefined | string ; DataElementStyle: undefined | ReportDataElementStyle ; DataSets: undefined | { Name: string } & { Filters?: ( & { FilterExpression?: RDLExpr<Variant> | undefined; Operator?: FilterOperator | undefined; FilterValues?: RDLExpr<Variant>[] | 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" } & { DataElementName?: string | undefined; Pages?: ({ Type: "fixedpagesection"; } & { ReportItems?: (({ Type: "textbox"; Name: string; } & { Width?: string | undefined; Language?: string | undefined; ... 19 more ...; Value?: RDLExpr<...> | undefined; }) | ... 19 more ... | ( & ))[] | undefined; Style?: ... ; 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 | & { 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; DataElementStyle?: DataElementStyle | undefined; ... 17 more ...; Value?: RDLExpr<...> | undefined; }) | ... 19 more ... | ( & ))[] | undefined; St... ; PageHeader: undefined | null | { Name: string ; Type: "pagesection" } & { ReportItems?: (({ Type: "textbox"; Name: string; } & { Width?: string | undefined; Language?: string | undefined; DataElementName?: string | undefined; DataElementStyle?: DataElementStyle | undefined; ... 17 more ...; Value?: RDLExpr<...> | undefined; }) | ... 19 more ... | ( & ))[] | undefined; St... ; ReportParameters: undefined | { Name: string } & { Multiline?: boolean | undefined; DataType?: ReportParameterType | undefined; Nullable?: boolean | undefined; DefaultValue?: ( & { Values?: RDLExpr<Variant>[] | 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: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(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