[]
DEMO DOCS API
DOWNLOAD
(Showing Draft Content)

ReportViewer.Viewer

Class: Viewer

ReportViewer.Viewer

Report viewer component.

Table of contents

Constructors

Properties

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.

Properties

availableExports

• availableExports: string[]

currentPage

• Readonly currentPage: number

diag

• Readonly diag: Object

Type declaration

Name Type
fetchPages (startPageIndex?: number, count?: number) => void
processCommand (cmd: ReportViewerCmd) => void

documentLoaded

• Readonly documentLoaded: Event<DocumentLoadEventArgs>

errorHandler

• errorHandler: ErrorHandler

history

• Readonly history: HistoryApi

mouseMode

• mouseMode: ViewerMouseMode

pageCount

• Readonly pageCount: number

renderMode

• renderMode: ViewerRenderMode

reportLoaded

• Readonly reportLoaded: Event<ReportLoadEventArgs>

showParametersOnOpen

• showParametersOnOpen: ShowParametersOnOpen

stateChanged

• Readonly stateChanged: Event<ChangedEventArgs>

toolbar

• Readonly toolbar: Toolbar

viewMode

• viewMode: ViewerViewMode | ViewMode

zoom

• zoom: ViewerZoomMode

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

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>

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

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