[]
        
(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 string | object | Element 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.

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[]

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


currentPage

get currentPage(): number

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

var pageNumber = viewer.currentPage;

Returns

number


documentLoaded

get documentLoaded(): Event<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

Event<DocumentLoadEventArgs>


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

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


history

get history(): HistoryApi

Provides access to the "history" API.

Returns

HistoryApi


mouseMode

get mouseMode(): ViewerMouseMode

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

viewer.mouseMode = "pan";

Returns

ViewerMouseMode

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


pageCount

get pageCount(): number

Gets the total number of pages available in report.

var totalPages = viewer.pageCount;

Returns

number


renderMode

get renderMode(): ViewerRenderMode

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

viewer.renderMode = 'Galley';

Returns

ViewerRenderMode

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


reportLoaded

get reportLoaded(): Event<ReportLoadEventArgs>

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

 type ReportLoadEventArgs = {
    report: PageReport;
}

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

Returns

Event<ReportLoadEventArgs>


showParametersOnOpen

get showParametersOnOpen(): ShowParametersOnOpen

Gets or sets behaviour of parameter panel.

viewer.showParametersOnOpen = 'always';

Returns

ShowParametersOnOpen

set showParametersOnOpen(mode): void

Gets or sets behaviour of parameter panel.

viewer.showParametersOnOpen = 'always';

Parameters

Name Type
mode ShowParametersOnOpen

Returns

void


stateChanged

get stateChanged(): Event<ChangedEventArgs>

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

Returns

Event<ChangedEventArgs>


theme

get theme(): undefined | BuiltInUITheme

Gets UI theme

Returns

undefined | BuiltInUITheme

set theme(value): void

Sets UI theme

Parameters

Name Type
value undefined | BuiltInUITheme

Returns

void


toolbar

get toolbar(): Toolbar

Gets the viewer toolbar component.

Returns

Toolbar


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

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


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

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

Methods

backToParent

backToParent(): void

Performs backToParent action which will return user to parent report.

viewer.backToParent();

Returns

void


canBackToParent

canBackToParent(): boolean

Gets true if backToParent command is applicable to current document.

Returns

boolean


dispose

dispose(): void

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

Returns

void


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>


goToFirstPage

goToFirstPage(): void

Navigates to the first page.

viewer.goToFirstPage();

Returns

void


goToLastPage

goToLastPage(): void

Navigates to the last page.

viewer.goToLastPage();

Returns

void


goToNextPage

goToNextPage(): void

Navigates to the next page.

viewer.goToNextPage();

Returns

void


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


goToPrevPage

goToPrevPage(): void

Navigates to the previous page.

viewer.goToPrevPage();

Returns

void


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>


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 | Report 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>


print

print(): void

Prints currently displayed report.

viewer.print();

Returns

void


refresh

refresh(): void

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

viewer.refresh();

Returns

void


resetDocument

resetDocument(): Promise<void>

Resets current viewer document

Returns

Promise<void>


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>


toggleFullScreen

toggleFullScreen(enabled?): void

Change viewer mode to fullscreen.

viewer.toggleFullScreen();

Parameters

Name Type
enabled? boolean

Returns

void


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


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