[]
ReportViewer.Viewer
Report viewer component.
• 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');
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. |
• 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
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
Name | Type |
---|---|
formatKeys |
string [] |
void
• get
currentPage(): number
Gets current page number (1-based). Returns 0 if no document loaded.
var pageNumber = viewer.currentPage;
number
• 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));
• 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;
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;
Name | Type |
---|---|
handler |
ErrorHandler |
void
• get
history(): HistoryApi
Provides access to the "history" API.
• get
mouseMode(): ViewerMouseMode
Gets or sets mouse mode in viewer. Available values are: Pan | Selection.
viewer.mouseMode = "pan";
• set
mouseMode(value
): void
Gets or sets mouse mode in viewer. Available values are: Pan | Selection.
viewer.mouseMode = "pan";
Name | Type |
---|---|
value |
ViewerMouseMode |
void
• get
pageCount(): number
Gets the total number of pages available in report.
var totalPages = viewer.pageCount;
number
• get
renderMode(): ViewerRenderMode
Gets or sets viewer render mode. Available values are: Galley | Paginated
viewer.renderMode = 'Galley';
• set
renderMode(mode
): void
Gets or sets viewer render mode. Available values are: Galley | Paginated
viewer.renderMode = 'Galley';
Name | Type |
---|---|
mode |
ViewerRenderMode |
void
• 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));
• get
showParametersOnOpen(): ShowParametersOnOpen
Gets or sets behaviour of parameter panel.
viewer.showParametersOnOpen = 'always';
• set
showParametersOnOpen(mode
): void
Gets or sets behaviour of parameter panel.
viewer.showParametersOnOpen = 'always';
Name | Type |
---|---|
mode |
ShowParametersOnOpen |
void
• 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.
Event
<ChangedEventArgs
>
• get
theme(): undefined
| BuiltInUITheme
Gets UI theme
undefined
| BuiltInUITheme
• set
theme(value
): void
Sets UI theme
Name | Type |
---|---|
value |
undefined | BuiltInUITheme |
void
• get
toolbar(): Toolbar
Gets the viewer toolbar component.
• 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;
• 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;
Name | Type |
---|---|
value |
ViewerViewMode | ViewMode |
void
• get
zoom(): ViewerZoomMode
Gets or sets current zoom value. Zoom value could be specified as factor. Valid values:
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
• set
zoom(value
): void
Gets or sets current zoom value. Zoom value could be specified as factor. Valid values:
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
Name | Type |
---|---|
value |
ViewerZoomMode |
void
▸ backToParent(): void
Performs backToParent action which will return user to parent report.
viewer.backToParent();
void
▸ canBackToParent(): boolean
Gets true if backToParent command is applicable to current document.
boolean
▸ dispose(): void
Removes the control from the DOM and disposes any resources (internal).
void
▸ 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'));
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 |
- |
Promise
<ExportResult
>
▸ goToFirstPage(): void
Navigates to the first page.
viewer.goToFirstPage();
void
▸ goToLastPage(): void
Navigates to the last page.
viewer.goToLastPage();
void
▸ goToNextPage(): void
Navigates to the next page.
viewer.goToNextPage();
void
▸ goToPage(pageNumber
): void
Navigates to the specified page (starting from 1).
viewer.goToPage(3); //will navigate to 3d page
Name | Type |
---|---|
pageNumber |
number |
void
▸ goToPrevPage(): void
Navigates to the previous page.
viewer.goToPrevPage();
void
▸ 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]);
}
Name | Type |
---|---|
result |
null | SearchResult |
Promise
<void
>
▸ open(report
, settings?
): Promise
<LoadResult
>
Opens report from file or as definition (json string)).
var viewer = new ActiveReports.Viewer(#viewerPlace);
viewer.open('report.json');
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). |
Promise
<LoadResult
>
▸ print(): void
Prints currently displayed report.
viewer.print();
void
▸ refresh(): void
Performs refresh operation in report (re-render report).
viewer.refresh();
void
▸ resetDocument(): Promise
<void
>
Resets current viewer document
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)
})
Name | Type |
---|---|
options |
SearchOptions |
resultFn |
(result : SearchResult ) => void |
progressFn? |
(progress : { pageCount : null | number ; pageIndex : number }) => void |
cancel? |
CancellationToken |
Promise
<SearchStatus
>
▸ toggleFullScreen(enabled?
): void
Change viewer mode to fullscreen.
viewer.toggleFullScreen();
Name | Type |
---|---|
enabled? |
boolean |
void
▸ 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
Name | Type | Description |
---|---|---|
visible? |
boolean |
New visibility status. If value is not passed, the function will toggle current state. |
void
▸ toggleToolbar(show?
): void
Toggle toolbar (hide or show it).
viewer.toggleToolbar(); // toggles toolbar visibility
viewer.toggleToolbar(true); //will show it
Name | Type | Description |
---|---|---|
show? |
boolean |
Pass true to switch toolbar ON, and vise-versa. Do not pass any value to toggle visibility. |
void