ReportViewer.Viewer

Class: Viewer

ReportViewer.Viewer

Report viewer component.

构造函数

constructor

存取器

方法

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.

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(): 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>

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(): 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 | RDL.Report;
    parameters: ParameterDescriptor[];
}

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

Returns

EventFan<ReportLoadEventArgs>

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>

• 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

registerFont

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

deprecated Use FontStore.registerFonts instead.

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.

viewer.registerFont('./fontsConfig.json');

Parameters

Name	Type
`configUri`	`string`

Returns

Promise<void>

resetDocument

▸ resetDocument(): Promise<void>

Resets current viewer document

Returns

Promise<void>

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>

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

ReportViewer.Viewer

Class: Viewer

Table of contents

构造函数

存取器

方法

Constructors

constructor

Parameters

Accessors

availableExports

Returns

Parameters

Returns

currentPage

Returns

documentLoaded

Returns

errorHandler

Returns

Parameters

Returns

history

Returns

mouseMode

Returns

Parameters

Returns

pageCount

Returns

renderMode

Returns

Parameters

Returns

reportLoaded

Returns

stateChanged

Returns

toolbar

Returns

viewMode

Returns

Parameters

Returns

zoom

Returns

Parameters

Returns

Methods

backToParent

Returns

canBackToParent

Returns

dispose

Returns

export

Parameters

Returns

goToFirstPage

Returns

goToLastPage

Returns

goToNextPage

Returns

goToPage

Parameters

Returns

goToPrevPage

Returns

highlight

Parameters

Returns

open

Parameters

Returns

print

Returns

refresh

Returns

registerFont