[{"id":"0916473b-83fc-4a60-8609-02f91e8b1c34","tags":[]},{"id":"7132754a-4c4c-4ff9-a430-06e21c266171","tags":[]},{"id":"f07e4430-8605-4a45-8f8d-0853dbbf0b67","tags":[]},{"id":"66d528a4-f9c5-4684-9488-0a2a0169bf50","tags":[]},{"id":"52374753-a491-4926-80e3-1114a5aadc44","tags":[]},{"id":"787341a3-d970-4540-84ac-19ee64f0dbe2","tags":[]},{"id":"d44deed9-eae7-4df6-9fe8-1a114f316cdc","tags":[]},{"id":"db162604-9c16-4513-bd1b-1fff9790fcb2","tags":[]},{"id":"aa4305c5-df80-44b2-8a02-278524f919c1","tags":[]},{"id":"e16a581c-44c0-45af-99d3-3d54fc371d1d","tags":[]},{"id":"7c8ea105-1d11-46ff-9a56-3eb70dfd5958","tags":[]},{"id":"1dc18e5f-ddec-48d3-a6dc-4906881cf537","tags":[]},{"id":"3dbcc70b-09a5-4814-983e-4fcaf3a84ece","tags":[]},{"id":"e393d03d-1603-455b-9f38-52ea7b3934a6","tags":[]},{"id":"ddb7b27e-e503-474b-a5c4-5fd4b9f92f58","tags":[]},{"id":"f6ef6590-5d1e-483d-99da-6f7615b96065","tags":[]},{"id":"9d7dceaa-bfdb-4865-bd6e-7c8dfcec2d61","tags":[]},{"id":"16796d76-24d8-4ace-b4ad-84838fc00ae0","tags":[]},{"id":"c01d715e-e359-4a3d-9f68-8ff89deaaa97","tags":[]},{"id":"a47419f2-f009-4931-9b67-99399c32dfef","tags":[]},{"id":"131eb4bf-5169-4136-92b3-9b62db0052dd","tags":[]},{"id":"afed2c6f-a981-4b65-8198-9d554775cc58","tags":[]},{"id":"1a97d9a4-f978-413e-9f4d-a90139ac8e4f","tags":[]},{"id":"a98b4526-e99f-4060-895b-aa61baf20f13","tags":[]},{"id":"2f38c0ec-cd81-428f-81a5-abbd06a66196","tags":[]},{"id":"93b7867e-ec84-4f9e-b8bb-acbee73dc50c","tags":[]},{"id":"c8ea308b-fa39-4c39-9f43-b934f3cb8747","tags":[]},{"id":"ed51f39d-4ede-48d5-8632-bec35012c0fe","tags":[]},{"id":"d2fbaa32-1e7f-4281-aefd-c263009fa347","tags":[]},{"id":"a592e7dd-928d-4842-a48e-c30463d382bd","tags":[]},{"id":"142944fe-13da-4bc1-bf72-da37bd7f5cbd","tags":[]},{"id":"ee3085a1-3b3b-4569-89f8-dbc5404ede96","tags":[]},{"id":"7ede5633-cdbc-4ba2-a7ca-dfe5881dcaf3","tags":[]},{"id":"042d12e3-6361-430d-aa43-ee0366b5df1f","tags":[]},{"id":"8fb0ecc0-92a7-4865-b5ea-fac9f79ec715","tags":[]}]
        
(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: EventFan<DocumentLoadEventArgs>


errorHandler

errorHandler: ErrorHandler


history

Readonly history: HistoryApi


mouseMode

mouseMode: ViewerMouseMode


pageCount

Readonly pageCount: number


renderMode

renderMode: ViewerRenderMode


reportLoaded

Readonly reportLoaded: EventFan<ReportLoadEventArgs>


stateChanged

Readonly stateChanged: EventFan<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