Viewer ActiveReportsJS API Class

Viewer 类

Report viewer component.

继承关系

  • Viewer

Accessors

availableExports

  • get availableExports(): string[]
  • set availableExports(formatKeys: string[]): any
  • 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 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

    参数

    • formatKeys: string[]

    返回值 any

currentPage

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

    var pageNumber = viewer.currentPage;

    返回值 number

documentLoaded

  • 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));

    返回值 EventFan<DocumentLoadEventArgs>

errorHandler

  • get errorHandler(): PluginModel.ErrorHandler
  • set errorHandler(handler: PluginModel.ErrorHandler): any
  • 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;

    返回值 PluginModel.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;

    参数

    • handler: PluginModel.ErrorHandler

    返回值 any

history

  • Provides access to the "history" API.

    返回值 HistoryApi

mouseMode

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

    viewer.mouseMode = "pan";

    返回值 ViewerMouseMode

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

    viewer.mouseMode = "pan";

    参数

    返回值 any

pageCount

  • get pageCount(): number
  • Gets the total number of pages available in report.

    var totalPages = viewer.pageCount;

    返回值 number

renderMode

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

    viewer.renderMode = 'Galley';

    返回值 ViewerRenderMode

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

    viewer.renderMode = 'Galley';

    参数

    返回值 any

reportLoaded

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

     type ReportLoadedEventArgs = {
        reportSource: string | RDLReportDefinition;
        parameters: ParameterDescriptor[];
    }
    
    
    viewer.reportLoaded.register(args => console.log('Report just loaded ', args));

    返回值 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.

    返回值 EventFan<ChangedEventArgs>

toolbar

  • Gets the viewer toolbar component.

    返回值 Toolbar

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;

    返回值 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;

    参数

    返回值 any

zoom

  • 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

    返回值 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

    参数

    返回值 any

构造方法

constructor

  • 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');

    参数

    • 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.

    返回值 Viewer

方法

backToParent

  • backToParent(): void
  • Performs backToParent action which will return user to parent report.

    viewer.backToParent();

    返回值 void

canBackToParent

  • canBackToParent(): boolean
  • Gets true if backToParent command is applicable to current document.

    返回值 boolean

dispose

  • dispose(): void
  • Removes the control from the DOM and disposes any resources (internal).

    返回值 void

export

  • export(format: string, settings: any[], params?: undefined | object): 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'));

    参数

    • format: string

      Export format identifier. One of 'pdf', 'xlsx' or 'html'.

    • settings: any[]

      Format specific export settings.

    • 可选 params: undefined | object

      Additional export customization.

    返回值 Promise<ExportResult>

goToFirstPage

  • goToFirstPage(): void
  • Navigates to the first page.

    viewer.goToFirstPage();

    返回值 void

goToLastPage

  • goToLastPage(): void
  • Navigates to the last page.

    viewer.goToLastPage();

    返回值 void

goToNextPage

  • goToNextPage(): void
  • Navigates to the next page.

    viewer.goToNextPage();

    返回值 void

goToPage

  • goToPage(pageNumber: number): void
  • Navigates to the specified page (starting from 1).

    viewer.goToPage(3); //will navigate to 3d page

    参数

    • pageNumber: number

    返回值 void

goToPrevPage

  • goToPrevPage(): void
  • Navigates to the previous page.

    viewer.goToPrevPage();

    返回值 void

highlight

  • 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]);
    }

    参数

    返回值 Promise<void>

open

  • Opens report from file or as definition (json string)).

    var viewer = new ActiveReports.Viewer(#viewerPlace);
    viewer.open('report.json');

    参数

    • report: string | RDLReportDefinition | PageReport

      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

  • print(): void
  • Prints currently displayed report.

    viewer.print();

    返回值 void

refresh

  • refresh(): void
  • Performs refresh operation in report (re-render report).

    viewer.refresh();

    返回值 void

registerFont

  • registerFont(...fonts: FontDescriptor[]): Promise<void>
  • registerFont(configUri: string): Promise<void>
  • 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);

    参数

    • Rest ...fonts: FontDescriptor[]

    返回值 Promise<void>

  • Register specified fonts in CSS and pdf export. Helps display export correctly on machines where fonts can be missed.

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

    参数

    • configUri: string

    返回值 Promise<void>

resetDocument

  • resetDocument(): Promise<void>
  • Resets current viewer document

    返回值 Promise<void>

search

  • 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)
    })

    参数

    返回值 Promise<SearchStatus>

toggleFullScreen

  • toggleFullScreen(enabled?: undefined | false | true): void
  • Change viewer mode to fullscreen.

    viewer.toggleFullScreen();

    参数

    • 可选 enabled: undefined | false | true

    返回值 void

toggleSidebar

  • toggleSidebar(visible?: undefined | false | true): 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

    参数

    • 可选 visible: undefined | false | true

      New visibility status. If value is not passed, the function will toggle current state.

    返回值 void

toggleToolbar

  • toggleToolbar(show?: undefined | false | true): void
  • Toggle toolbar (hide or show it).

    viewer.toggleToolbar(); // toggles toolbar visibility
    viewer.toggleToolbar(true); //will show it

    参数

    • 可选 show: undefined | false | true

      Pass true to switch toolbar ON, and vise-versa. Do not pass any value to toggle visibility.

    返回值 void