JSReportViewer Class

A client object that provides access to the client-side Document Viewer API.

Declaration

export class JSReportViewer extends BaseModel

Remarks

To access the JSReportViewer object in applications based on different JS frameworks, use Knockout bindings as follows:

Angular	React	Vue
bindingSender property	the sender object in the event handler function used in callbacks binding	the sender object in the event handler function used in callbacks binding

For code examples, review the JSReportViewer class members.

Properties

previewModel Property

Declaration

previewModel: DevExpress.Reporting.Viewer.Internal.PreviewDisposableModel

Property Value

Type
PreviewDisposableModel

Methods

AdjustControlCore Method

Declaration

AdjustControlCore(): void

Close Method

Closes the document that is currently open in the Web Document Viewer.

Declaration

Close(): void

Remarks

The Close method closes the displayed document and leaves the Document Viewer empty. Call this method to release memory allocated on the server (storage and cache) when the user closes the page that contains the Document Viewer control.

The following code calls the Close method when a page (or UI region) window is about to close and unload its resources. The code uses jQuery API and handles the BeforeRender event.

JavaScript

function onBeforeRender(s, e) {
  $(window).on('beforeunload', function(e) {
    s.Close();
});

dispose Method

Declaration

dispose(): void

ExportTo(format, inlineResult) Method

Exports the document to the specified file format.

Declaration

ExportTo(
    format: any,
    inlineResult: any
): void

Parameters

Name	Type	Description
format	any	A file format identifier
inlineResult	any	If the inlineResult is true, the browser attempts to display the resulting document.

Remarks

he method performs a callback that exports a document to the specified format and sends the resulting file to the client browser.

The first method’s parameter is the DevExpress.Reporting.Viewer.ExportFormatID value. The second parameter (inlineResult) determines whether the browser attempts to display the exported document or the browser downloads the file. If the inlineResult parameter is set to true, but the browser does not handle the specified format, the resulting file is downloaded.

Tip

Handle the CustomizeExportOptions event to specify export options.

The Web Document Viewer can export a document asynchronously (export operations are run in the background). To switch to the asynchronous export mode, set the AsyncExportApproach to true. Asynchronous export action opens a new page with a progress indicator.

The code snippet below demonstrates how to hide the Export Options panel, add a button to export the report to a file in XLSX format, and specify the export options.

Angular

 

report-viewer.html

<div>
    <button (click)="exportDocument()"><span>Export Document</span></button>
</div>

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks 
                        (CustomizeExportOptions)="CustomizeExportOptions($event)"
                        (BeforeRender)="ConfigureBeforeRender($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

 

report-viewer.ts

import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer'
import { AsyncExportApproach } from 'devexpress-reporting/dx-webdocumentviewer'
import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';


@Component({
    selector: 'report-viewer',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './report-viewer.html',
    styleUrls: [
        "../../../node_modules/devextreme/dist/css/dx.light.css",
        "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
        "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
        "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
    ]
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "TestReport";
    // Use this line for the ASP.NET MVC backend.
    invokeAction: string = '/DXXRDV';
    // Use this line for the ASP.NET Core backend.
    //invokeAction: string = "/WebDocumentViewer/Invoke";

    ConfigureBeforeRender(event) {
        // Enable the asynchronous export mode.
        AsyncExportApproach(true);
    }

    CustomizeExportOptions(event) {
        event.args.HideExportOptionsPanel();
        var model = event.args.GetExportOptionsModel(ExportFormatID.XLSX);
        // Encrypt the file. Encryption is performed in asynchronous mode.
        //model.encryptionOptions.password("1234");
        model.documentOptions.author("Me");
    }

    exportDocument() {
        this.viewer.bindingSender.ExportTo('xlsx');
    }

    constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

React

import { AsyncExportApproach } from 'devexpress-reporting/dx-webdocumentviewer'
import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer'
import React from "react";

import ko from "knockout";
import './App.css';

class ReportViewer extends React.Component {
  constructor(props) {
    super(props);
    this.reportUrl = ko.observable("TestReport");
    this.previewModel = ko.observable();
    this.requestOptions = {
        // Specify the server-side application port.
        host: "https://localhost:64673/",
        invokeAction: "DXXRDV"
    };
    this.exportDocument = this.exportDocument.bind(this);

    this.callbacks = {
      CustomizeExportOptions: function(s, e){
            e.HideExportOptionsPanel();
        var model = e.GetExportOptionsModel(ExportFormatID.XLSX);
        // Encrypt the file. Encryption is performed in asynchronous mode.
        //model.encryptionOptions.password("1234");
        model.documentOptions.author("Me");
      },
      BeforeRender: function(s, e){
        // Enable the asynchronous export mode.
        AsyncExportApproach(true);
      }
    };
  };

  exportDocument() {
    this.previewModel().ExportTo('xlsx');
  };
  render() {
    return (
      <div>
        <button onClick={() => this.exportDocument()}>
          Export to XLSX
        </button>
        <div ref="viewer" data-bind="dxReportViewer: $data" style={{ width: "100%", height: "900px" }}></div>
      </div>
    );
  }
  componentDidMount() {
    ko.applyBindings({
      reportUrl: this.reportUrl,
      viewerModel: this.previewModel,
      requestOptions: this.requestOptions,
      callbacks: this.callbacks
    }, this.refs.viewer);
  }
  componentWillUnmount() {
    ko.cleanNode(this.refs.viewer);
  }
};

export default ReportViewer;

Vue

<template>
<div>
    <div>
        <button @click='exportDocument'>Export Document</button>
    </div>
    <div ref="viewer" style="position: absolute; left: 0; right: 0" data-bind="dxReportViewer: $data">
    </div>
</div>
</template>

<script>
import { AsyncExportApproach } from 'devexpress-reporting/dx-webdocumentviewer'
import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer'
import ko from "knockout";

var componentData = {
    name: "WebDocumentViewer",
    data() {
        return {
            previewModel: ko.observable(),
        }
    },
    methods: {
        exportDocument() {
            this.previewModel().ExportTo('xlsx');
        },
    },
    mounted() {
        var reportUrl = ko.observable("TestReport"); // The URL of a report.
        var requestOptions = {
                // Specify the server-side application port.
                host: "https://localhost:64673/",
                // Use this line if you use an ASP.NET MVC backend
                //invokeAction: "/WebDocumentViewer/Invoke",
                // Use this line if you use an ASP.NET Core backend
                invokeAction: "DXXRDV"
            };
        var    callbacks = {  
            CustomizeExportOptions: function(s,e){
                e.HideExportOptionsPanel();
                var model = e.GetExportOptionsModel(ExportFormatID.XLSX);
                // Encrypt the file. Encryption is performed in asynchronous mode.
                //model.encryptionOptions.password("1234");
                model.documentOptions.author("Me");
            },
            BeforeRender: function(){
                // Enable the asynchronous export mode.
                AsyncExportApproach(true);
            }
        };    
        ko.applyBindings({
            reportUrl: reportUrl,
            viewerModel: this.previewModel,
            requestOptions: requestOptions,
            callbacks: callbacks
        }, this.$refs.viewer);
    },
    beforeUnmount() {
        ko.cleanNode(this.$refs.viewer);
    }
};
export default componentData;
</script>

GetCurrentPageIndex Method

Returns the current page’s zero-based index.

Declaration

GetCurrentPageIndex(): number

Returns

Type	Description
number	A zero-based integer value that specifies the index of a current page.

Remarks

For a code sample, refer to the following help topic: JSReportViewer.GoToPage.

GetParametersModel Method

Allows you to access the report parameters’ client-side model.

Declaration

GetParametersModel(): DevExpress.Reporting.PreviewParametersViewModel

Returns

Type	Description
PreviewParametersViewModel	The report parameters’ client-side model.

Remarks

The GetParametersModel method returns the parameter model that allows you to modify report parameters on the client before the user submits them.

Note

The parameter model is available only for visible parameters (parameters with the Visible property set to true).

Example - Obtain Parameter Values for a Multi-Value Parameter

The following code obtains values that the user selects in the multi-value parameter editor:

Angular

 

report-viewer.html

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
    </dx-report-viewer>
</div>

 

report-viewer.ts

import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

@Component({
  selector: 'report-viewer',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './report-viewer.html',
  styleUrls: [
   // ...
  ]
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "XtraReport1";
    invokeAction: string = '/DXXRDV';

    GetClientParameter() {
        var parametersModel = this.viewer.bindingSender.GetParametersModel();
        var selectedValuesArray = parametersModel['MyMultiSelectParameterName']().value();  
        var firstValue = selectedValuesArray[0];
    }

  constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

React

import React from "react";
import ko from "knockout";
import './App.css';

class ReportViewer extends React.Component {
  constructor(props) {
    super(props);
    this.reportUrl = ko.observable("XtraReport1");
    this.previewModel = ko.observable();
    this.requestOptions = {
        // Specify the server-side application port.
        host: "https://localhost:52454/",
        invokeAction: "DXXRDV"
    };
    this.getClientParameter = this.getClientParameter.bind(this);
  };

  getClientParameter() {
        var parametersModel = this.previewModel().GetParametersModel();
        var selectedValuesArray = parametersModel['MyMultiSelectParameterName']().value();  
        var firstValue = selectedValuesArray[0];
  };
  render() {
    return (
      <div>
        <div ref="viewer" data-bind="dxReportViewer: $data" style={{ width: "100%", height: "900px" }}></div>
      </div>
    );
  }
  componentDidMount() {
    ko.applyBindings({
      reportUrl: this.reportUrl,
      viewerModel: this.previewModel,
      requestOptions: this.requestOptions
    }, this.refs.viewer);
  }
  componentWillUnmount() {
    ko.cleanNode(this.refs.viewer);
  }
};

export default ReportViewer;

Vue

<template>
    <div>
        <div>{{ message }}</div>
        <div>
            <button @click="getClientParameter">Build Document</button>
        </div>
        <div
            ref="viewer"
            style="position: absolute; left: 0; right: 0"
            data-bind="dxReportViewer: $data"
        ></div>
    </div>
</template>

<script>
import ko from "knockout";
import "devexpress-reporting/dx-webdocumentviewer";
export default {
name: "WebDocumentViewer",
props:["message"],
data() {
    return {
        previewModel: ko.observable(),
    }
},
methods: {
    getClientParameter() {
        var parametersModel = this.previewModel().GetParametersModel();
        var selectedValuesArray = parametersModel['MyMultiSelectParameterName']().value();  
        var firstValue = selectedValuesArray[0];
        this.message = firstValue;
        }
},
mounted() {
    var viewerOptions = {
        reportUrl: ko.observable("Products"), // The report identifier.
        requestOptions: {
        host: "http://localhost:54114/", // Change the port number if necessary.
        // This line if you use an ASP.NET MVC backend
        invokeAction: "/WebDocumentViewer/Invoke",
        // This line if you use an ASP.NET Core backend
        //invokeAction: "DXXRDV" 
        },
        callbacks: {  
            DocumentReady: function(s, e) {
                s.GoToPage(e.PageCount - 1);
            }
        },
        viewerModel: this.previewModel        
    };
    ko.applyBindings(viewerOptions, this.$refs.viewer);
},
beforeUnmount() {
    ko.cleanNode(this.$refs.viewer);
}
};
</script>

Example: Pass Parameter to the Report

The following code creates a button that passes a parameter to the report and rebuilds the document. When the document is created, the Document Viewer navigates to the last page:

Angular

 

report-viewer.html

<div>
    <button (click)="BuildOnClick()"><span>Build Document</span></button>
</div>

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (DocumentReady)="GoToLastPage($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

 

report-viewer.ts

import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

@Component({
  selector: 'report-viewer',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './report-viewer.html',
  styleUrls: [
   // ...
  ]
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "XtraReport1";
    invokeAction: string = '/DXXRDV';

    BuildOnClick() {
        var parameterValue = 1;
        this.viewer.bindingSender.GetParametersModel()["parameter1"](parameterValue);
        this.viewer.bindingSender.StartBuild();
    }
    GoToLastPage(event) {
        this.viewer.bindingSender.GoToPage(event.args.PageCount - 1);
    }

  constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

React

import React from "react";
import ko from "knockout";
import './App.css';

class ReportViewer extends React.Component {
  constructor(props) {
    super(props);
    this.reportUrl = ko.observable("XtraReport1");
    this.previewModel = ko.observable();
    this.requestOptions = {
        // Specify the server-side application port.
        host: "https://localhost:52454/",
        invokeAction: "DXXRDV"
    };
    this.buildDocument = this.buildDocument.bind(this);

    this.callbacks = {
      DocumentReady: function(s, e){
                          s.GoToPage(e.PageCount - 1);
      }
    };
  };

  buildDocument() {
            var parameterValue = 1;
            this.previewModel()
                .GetParametersModel()
                ["parameter1"](parameterValue);
            this.previewModel().StartBuild();
  };
  render() {
    return (
      <div>
        <button onClick={() => this.buildDocument()}>
          Build Document
        </button>
        <div ref="viewer" data-bind="dxReportViewer: $data" style={{ width: "100%", height: "900px" }}></div>
      </div>
    );
  }
  componentDidMount() {
    ko.applyBindings({
      reportUrl: this.reportUrl,
      viewerModel: this.previewModel,
      requestOptions: this.requestOptions,
      callbacks: this.callbacks
    }, this.refs.viewer);
  }
  componentWillUnmount() {
    ko.cleanNode(this.refs.viewer);
  }
};

export default ReportViewer;

Vue

<template>
    <div>
        <div>
            <button @click="buildDocument">Build Document</button>
        </div>
        <div
            ref="viewer"
            style="position: absolute; left: 0; right: 0"
            data-bind="dxReportViewer: $data"
        ></div>
    </div>
</template>

<script>
import ko from "knockout";
import "devexpress-reporting/dx-webdocumentviewer";
export default {
name: "WebDocumentViewer",
data() {
    return {
        previewModel: ko.observable(),
    }
},
methods: {
    buildDocument() {
        var parameterValue = 1;
        this.previewModel().GetParametersModel()["param1"](parameterValue);
        this.previewModel().StartBuild();
    }
},
mounted() {
    var viewerOptions = {
        reportUrl: ko.observable("Products"), // The report identifier.
        requestOptions: {
        host: "http://localhost:54114/", // Change the port number if necessary.
        // This line if you use an ASP.NET MVC backend
        invokeAction: "/WebDocumentViewer/Invoke",
        // This line if you use an ASP.NET Core backend
        //invokeAction: "DXXRDV" 
        },
        callbacks: {  
            DocumentReady: function(s, e) {
                s.GoToPage(e.PageCount - 1);
            }
        },
        viewerModel: this.previewModel        
    };
    ko.applyBindings(viewerOptions, this.$refs.viewer);
},
beforeUnmount() {
    ko.cleanNode(this.$refs.viewer);
}
};
</script>

GetPreviewModel Method

Provides access to the Document Viewer’s client-side model.

Declaration

GetPreviewModel(): DevExpress.Reporting.Viewer.Internal.PreviewDisposableModel

Returns

Type	Description
PreviewDisposableModel	An object that is the client-side preview model.’

Remarks

Call the GetPreviewModel method to obtain the Document Viewer’s client-side model and adjust settings for the Document Viewer UI and the current document.

The following code snippet collapses the Parameters panel after the user resets parameter values.

ASP.NET Core

<script type="text/javascript" id="script" >
    function onParametersReset(s, e) {
        var preview = s.GetPreviewModel();
        if (preview) {
            preview.tabPanel.collapsed(true);
        }
    }
</script>

@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .Height("1000px")
        .ClientSideEvents(configure => configure.ParametersReset("onParametersReset"))
        .Bind("TestReport");
    @viewerRender.RenderHtml()

Angular

  report-viewer.html

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (ParametersReset)="onParametersReset($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

 

report-viewer.ts

import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

@Component({
    selector: 'report-viewer',
    encapsulation: ViewEncapsulation.None,
//...
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "TestReport";
    invokeAction: string = '/DXXRDV';

    onParametersReset(event) {
        var self = this;
        var preview = self.viewer.bindingSender.GetPreviewModel();
        if (preview) {
            preview.tabPanel.collapsed(true);
        }

    constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

React

import React from 'react';
import ko from 'knockout';
import 'devexpress-reporting/dx-webdocumentviewer';
import './App.css';

class ReportViewer extends React.Component {
    constructor(props) {
            super(props);
            this.reportUrl = ko.observable("TestReport");
            this.previewModel = ko.observable();
            this.requestOptions = {
            // Specify the backend ASP.NET Core application URL.
            host: "https://localhost:44370",
            invokeAction: "/DXXRDV"
        };

        this.callbacks = {
        ParametersReset(s, e) {
          var preview = s.GetPreviewModel();
          if (preview) {
            preview.tabPanel.collapsed(true);
          }
        }
            }
        };
    };

    render() {
        return (
          <div>
            <div ref="viewer" data-bind="dxReportViewer: $data" style={{ width: "100%", height: "900px" }}></div>
          </div>
        );
    }
    componentDidMount() {
        ko.applyBindings({
            reportUrl: this.reportUrl,
            viewerModel: this.previewModel,
            requestOptions: this.requestOptions,
            callbacks: this.callbacks
        }, this.refs.viewer);
    }
    componentWillUnmount() {
        ko.cleanNode(this.refs.viewer);
    }
};

function App() {
return (<div style={{ width: "100%", height: "1000px" }}>
    <ReportViewer />
</div>);
}

export default App;

Vue

<template>
<div>
    <div ref="viewer" style="position: absolute; left: 0; right: 0" data-bind="dxReportViewer: $data">
    </div>
</div>
</template>

<script>
import ko from "knockout";
import 'devexpress-reporting/dx-webdocumentviewer';


export default {
name: "WebDocumentViewer",
data() {
    return {
        previewModel: ko.observable(),
    }
},
    mounted() {
        var reportUrl = ko.observable("TestReport");
        var requestOptions = {
                // Specify the backend application URL.
                host: "https://localhost:44370/",
                // Use this line if you use an ASP.NET MVC backend
                //invokeAction: "/WebDocumentViewer/Invoke",
                // Use this line if you use an ASP.NET Core backend
                invokeAction: "DXXRDV"
            };
        var    callbacks = {  
            ParametersReset(s, e) {
                var preview = s.GetPreviewModel();
                if (preview) {
                    preview.tabPanel.collapsed(true);
                }
            }
        };    
        ko.applyBindings({
            reportUrl: reportUrl,
            viewerModel: this.previewModel,
            requestOptions: requestOptions,
            callbacks: callbacks
        }, this.$refs.viewer);
    },
beforeUnmount() {
    ko.cleanNode(this.$refs.viewer);
}
};

</script>

GetReportPreview Method

Allows you to access the report preview.

Declaration

GetReportPreview(): DevExpress.Reporting.ReportPreview

Returns

Type
ReportPreview

Remarks

The following code sets the report preview’s zoom level to 25%.

ASP.NET Core

<script type="text/javascript" id="script" >
    function onDocumentReady(s, e) {
        s.GetReportPreview().zoom = 0.25;
    }
</script>

@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .Height("1000px")
        .ClientSideEvents(configure => configure.DocumentReady("onDocumentReady"))
        .Bind("TestReport");
    @viewerRender.RenderHtml()

Angular

  report-viewer.html

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (DocumentReady)="onDocumentReady($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

 

report-viewer.ts

import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

@Component({
    selector: 'report-viewer',
    encapsulation: ViewEncapsulation.None,
//...
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "TestReport";
    invokeAction: string = '/DXXRDV';

    onDocumentReady(event) {
        var self = this;
        var reportPreview = self.viewer.bindingSender.GetReportPreview();
        reportPreview.zoom = 0.25;
    }

    constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

React

import React from 'react';
import ko from 'knockout';
import 'devexpress-reporting/dx-webdocumentviewer';
import './App.css';

class ReportViewer extends React.Component {
    constructor(props) {
            super(props);
            this.reportUrl = ko.observable("TestReport");
            this.previewModel = ko.observable();
            this.requestOptions = {
            // Specify the backend ASP.NET Core application URL.
            host: "https://localhost:5001",
            invokeAction: "/DXXRDV"
        };

        this.callbacks = {
            DocumentReady(s,e){
                s.GetReportPreview().zoom = 0.25;
            }
        }
    };
};

    render() {
        return (
          <div>
            <div ref="viewer" data-bind="dxReportViewer: $data" style={{ width: "100%", height: "900px" }}></div>
          </div>
        );
    }
    componentDidMount() {
        ko.applyBindings({
            reportUrl: this.reportUrl,
            viewerModel: this.previewModel,
            requestOptions: this.requestOptions,
            callbacks: this.callbacks
        }, this.refs.viewer);
    }
    componentWillUnmount() {
        ko.cleanNode(this.refs.viewer);
    }
};

function App() {
return (<div style={{ width: "100%", height: "1000px" }}>
    <ReportViewer />
</div>);
}

export default App;

Vue

<template>
<div>
    <div ref="viewer" style="position: absolute; left: 0; right: 0" data-bind="dxReportViewer: $data">
    </div>
</div>
</template>

<script>
import ko from "knockout";
import 'devexpress-reporting/dx-webdocumentviewer';


export default {
name: "WebDocumentViewer",
data() {
    return {
        previewModel: ko.observable(),
    }
},
    mounted() {
        var reportUrl = ko.observable("TestReport");
        var requestOptions = {
                // Specify the backend application URL.
                host: "https://localhost:5001/",
                // Use this line if you use an ASP.NET MVC backend
                //invokeAction: "/WebDocumentViewer/Invoke",
                // Use this line if you use an ASP.NET Core backend
                invokeAction: "DXXRDV"
            };
        var    callbacks = {  
            DocumentReady(s){
                s.GetReportPreview().zoom = 0.25;
            }
        };    
        ko.applyBindings({
            reportUrl: reportUrl,
            viewerModel: this.previewModel,
            requestOptions: requestOptions,
            callbacks: callbacks
        }, this.$refs.viewer);
    },
beforeUnmount() {
    ko.cleanNode(this.$refs.viewer);
}
};

</script>

GoToPage(pageIndex) Method

Displays the report page with the specified page index.

Declaration

GoToPage(
    pageIndex: any
): void

Parameters

Name	Type
pageIndex	any

Remarks

The code snippet below demonstrates how to automatically navigate pages of a document when it is created.

React

import React from 'react';
import ko from 'knockout';
import 'devexpress-reporting/dx-webdocumentviewer';
import './App.css';

class ReportViewer extends React.Component {
constructor(props) {
    super(props);
    this.reportUrl = ko.observable("TestReport");
    this.requestOptions = {
    host: "https://localhost:52454/",
    // Use this line for the ASP.NET MVC backend.
    //invokeAction: "/WebDocumentViewer/Invoke"
    // Use this line for the ASP.NET Core backend.
    invokeAction: "DXXRDV"
    };

    this.callbacks = {
      DocumentReady: function(s, e){
        var goToNextPage = function () {
            var pageIndex = s.GetCurrentPageIndex();
            if (e.PageCount <= pageIndex)
                return;
            s.GoToPage(pageIndex + 1);
            setTimeout(function () { goToNextPage(); }, 3000);
        }
        goToNextPage();
      }
};
}
render() {
    return (<div ref="viewer" data-bind="dxReportViewer: $data"></div>);
}
componentDidMount() {
    ko.applyBindings({
    reportUrl: this.reportUrl,
    requestOptions: this.requestOptions,
    callbacks: this.callbacks
    }, this.refs.viewer);
}
componentWillUnmount() {
    ko.cleanNode(this.refs.viewer);
}
};

function App() {
return (<div style={{ width: "100%", height: "1000px" }}>
    <ReportViewer />
</div>);
}

export default App;

Vue

<template>
<div ref="viewer" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0" data-bind="dxReportViewer: $data"></div>
</template>

<script>
import ko from "knockout";
import 'devexpress-reporting/dx-webdocumentviewer';

export default {
name: "WebDocumentViewer",
mounted() {
    var viewerOptions = {
        reportUrl: ko.observable("TestReport"), // The URL of a report.
        requestOptions: {
        host: "https://localhost:52454/",
            // Use this line for the ASP.NET MVC backend
            //invokeAction: "/WebDocumentViewer/Invoke"
            // Use this line for the ASP.NET Core backend
            invokeAction: "DXXRDV"
        },
        callbacks: {
            DocumentReady: function(s, e){
                var goToNextPage = function () {
                    var pageIndex = s.GetCurrentPageIndex();
                    if (e.PageCount <= pageIndex)
                        return;
                    s.GoToPage(pageIndex + 1);
                    setTimeout(function () { goToNextPage(); }, 3000);
                }
                goToNextPage();
            }
        }
    };
    ko.applyBindings(viewerOptions, this.$refs.viewer);
},
beforeUnmount() {
    ko.cleanNode(this.$refs.viewer);
}
};
</script>

onPropertyChanged(args) Method

Declaration

onPropertyChanged(
    args: DevExpress.Analytics.Serializer.Native.PropertyChangedEventArgs<any> | DevExpress.Analytics.Serializer.Native.ArrayPropertyChangedEventArgs<any>
): void

Parameters

Name	Type
args	PropertyChangedEventArgs<any> | ArrayPropertyChangedEventArgs<any>

OpenReport(reportName) Method

Opens the specified report on the Web Document Viewer’s client side. Allows you to refresh preview for the loaded report.

Declaration

OpenReport(
    reportName: any
): void

Parameters

Name	Type	Description
reportName	any	A string that specifies the report’s URL.

Remarks

The client-side OpenReport method uses the report name resolution services to translate a report name to a report instance. For more information review the following help topic: Open a Report in ASP.NET Core Application.

Tip

You can call the OpenReport method with the current report name passed as the parameter to update the displayed report.

The following code creates a button that loads the “XtraReport1” report:

Angular

 

report-viewer.html

<div>  
  <button (click)="openReport()"><span>Open Report</span></button>  
</div> 

 <div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
    </dx-report-viewer>
</div>

 

report-viewer.ts

import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

@Component({
  selector: 'report-viewer',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './report-viewer.html',
  styleUrls: [
    "../../../node_modules/devextreme/dist/css/dx.light.css",
    "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
    "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
    "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
  ]
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "TestReport";
    invokeAction: string = '/DXXRDV';

    openReport() {
        var t = this.viewer.bindingSender.OpenReport("XtraReport1");
    }

  constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

React

import React from "react";
import ko from "knockout";
import './App.css';

class ReportViewer extends React.Component {
  constructor(props) {
    super(props);
    this.reportUrl = ko.observable("TestReport");
    this.previewModel = ko.observable();
    this.requestOptions = {
      // Specify the server-side application port.
      host: "https://localhost:52454/",
      invokeAction: "DXXRDV"
    };
    this.openReport = this.openReport.bind(this);

  };

  openReport() {
    this.previewModel().OpenReport("XtraReport1");
  };
  render() {
    return (
      <div>
        <button onClick={() => this.openReport()}>
          Open Report
        </button>
        <div ref="viewer" data-bind="dxReportViewer: $data" style={{ width: "100%", height: "900px" }}></div>
      </div>
    );
  }
  componentDidMount() {
    ko.applyBindings({
      reportUrl: this.reportUrl,
      viewerModel: this.previewModel,
      requestOptions: this.requestOptions,
    }, this.refs.viewer);
  }
  componentWillUnmount() {
    ko.cleanNode(this.refs.viewer);
  }
};

export default ReportViewer;

Vue

<template>
<div>
    <div>
        <button @click='openReport'>Open Report</button>
    </div>
    <div ref="viewer" style="position: absolute; left: 0; right: 0" data-bind="dxReportViewer: $data">
    </div>
</div>
</template>

<script>
import ko from "knockout";
var componentData = {
    name: "WebDocumentViewer",
    data() {
        return {
            previewModel: ko.observable(),
        }
    },
    methods: {
        openReport() {
            this.previewModel().OpenReport("XtraReport1");
        },
    },
    mounted() {
        var reportUrl = ko.observable("TestReport"); // The URL of a report.
        var requestOptions = {
        // Specify the server-side application port.
                host: "https://localhost:52454/",
                // Use this line for an ASP.NET MVC backend
                //invokeAction: "/WebDocumentViewer/Invoke",
                // Use this line for an ASP.NET Core backend
                invokeAction: "DXXRDV"
            };  
        ko.applyBindings({
            reportUrl: reportUrl,
            viewerModel: this.previewModel,
            requestOptions: requestOptions,
        }, this.$refs.viewer);
    },
    beforeUnmount() {
        ko.cleanNode(this.$refs.viewer);
    }
};
export default componentData;
</script>

PerformCustomDocumentOperation(customData, hideMessageFromUser) Method

Sends data to the server to execute a custom operation on a currently opened document.

Declaration

PerformCustomDocumentOperation(
    customData: any,
    hideMessageFromUser: any
): JQueryPromise<DevExpress.Reporting.Designer.Utils.IDocumentOperationResult>

Parameters

Name	Type	Description
customData	any	Custom data required to perform an operation.
hideMessageFromUser	any	true, to hide a message with the operation result from the user; otherwise, false.

Returns

Type
JQueryPromise<IDocumentOperationResult>

Remarks

Call the PerformCustomDocumentOperation method on the client side to perform the required operation with the current report document. The customData parameter contains data associated with a target operation.

The client-side PerformCustomDocumentOperation method initiates a custom operation on the server with the current report document. The customData parameter contains data passed to the server.

The following code snippet creates a menu command that calls the PerformCustomDocumentOperation method to pass an email address to the server to send the document by email.

ASP.NET Core

<script type="text/html" id="email_icon">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
         x="0px" y="0px" viewBox="0 0 26 26" style="enable-background:new 0 0 26 26;" xml:space="preserve">
    <g><path class="st0" d="M25,7c0-0.2-0.1-0.6-0.3-0.7C24.6,6.1,24.4,6,24.2,6H16v5.7l1.9,1.7L25,7z" />
        <path class="st0" d="M1,22l14,3V1L1,4V22z M8,10c1.7,0,3,1.8,3,4c0,2.2-1.3,4-3,4s-3-1.8-3-4C5,11.8,6.3,10,8,10z" />
        <path class="st0" d="M18,15l-2-2l0,8l8.2,0c0.2,0,0.4-0.1,0.6-0.3c0.2-0.2,0.2-0.4,0.2-0.6L25,9L18,15L18,15z" />
        <ellipse class="st0" cx="8" cy="14" rx="2" ry="3" /></g>
    </svg>
</script>

<script type="text/javascript" id="script">
    function onCustomizeMenuActions(s, e) {
        var sendViaEmailItem = {
            id: 'sendViaEmailId',
            imageTemplateName: 'email_icon',
            text: 'Send via Email',
            visible: true,
            disabled: false,
            clickAction: function () {
                s.PerformCustomDocumentOperation('[e-mail]');
            }
        };
        e.Actions.push(sendViaEmailItem);
    }
</script>

@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .Height("1000px")
        .ClientSideEvents(configure => configure.CustomizeMenuActions("onCustomizeMenuActions"))
        .Bind("TestReport");
    @viewerRender.RenderHtml()
}

Angular

  style.css

.custom-image-item {
    background-image: url(".\email.svg");
    background-repeat: no-repeat;
}

  report-viewer.html

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (CustomizeMenuActions)="onCustomizeMenuActions($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

 

report-viewer.ts

import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

@Component({
    selector: 'report-viewer',
    encapsulation: ViewEncapsulation.None,
//...
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "TestReport";
    invokeAction: string = '/DXXRDV';

    onCustomizeMenuActions(event) {  
        var self = this;
        var sendViaEmailItem = {
            id: 'emailCommandId',
            imageTemplateName: 'custom-image-item',
            text: 'Send via Email',
            visible: true,
            disabled: false,
            clickAction: function () {              
                self.viewer.bindingSender.PerformCustomDocumentOperation('[e-mail]');                
            }
        };
        event.args.Actions.push(sendViaEmailItem);
    }

    constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

On the sever side you should implement a DocumentOperationService class descendant, and override its DocumentOperationService.CanPerformOperation and DocumentOperationService.PerformOperation methods.

Register the custom DocumentOperationService as described in the following help topic: Register Services in the Document Viewer in ASP.NET Core Application.

View Example: Reporting for Web - How to Email a Report from the Document Viewer

previewExists Method

Declaration

previewExists(): DevExpress.Reporting.ReportPreview

Returns

Type
ReportPreview

Print(pageIndex) Method

Prints the entire document or the specified page.

Declaration

Print(
    pageIndex: any
): void

Parameters

Name	Type	Description
pageIndex	any	The index of a page to be printed. If the page index is not specified, the entire document is printed.

Remarks

The method renders the report in PDF server side and returns PDF data to the browser. If the PDF plug-in is installed, the Print dialog displays the following:

If the PDF plug-in is unavailable, the Document Viewer exports the report document as a PDF file, and initiates the download instead of printing. The resulting PDF file contains a script that starts printing when the PDF viewer opens the file.

The following code demonstrates how to create a button that prints the Document Viewer’s report:

Angular

 

report-viewer.html

<div>  
  <button (click)="printDocument()"><span>Print Document</span></button>  
</div> 

 <div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
    </dx-report-viewer>
</div>

 

report-viewer.ts

import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

@Component({
  selector: 'report-viewer',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './report-viewer.html',
  styleUrls: [
    "../../../node_modules/devextreme/dist/css/dx.light.css",
    "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
    "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
    "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
  ]
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, {static: false}) viewer: DxReportViewerComponent;
  reportUrl: string = "TestReport";
    // Use this line for an ASP.NET MVC backend.
    invokeAction: string = '/DXXRDV';
    // Use this line for an ASP.NET Core backend.
    //invokeAction: string = "/WebDocumentViewer/Invoke";

    printDocument() {
        this.viewer.bindingSender.Print();
    }

  constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

React

import React from "react";
import ko from "knockout";
import './App.css';

class ReportViewer extends React.Component {
  constructor(props) {
    super(props);
    this.reportUrl = ko.observable("TestReport");
    this.previewModel = ko.observable();
    this.requestOptions = {
      // Specify the server-side application port.
      host: "https://localhost:51856/",
      invokeAction: "DXXRDV"
    };
    this.printDocument = this.printDocument.bind(this);

  };

  printDocument() {
    this.previewModel().Print();
  };
  render() {
    return (
      <div>
        <button onClick={() => this.printDocument()}>
          Print Document
        </button>
        <div ref="viewer" data-bind="dxReportViewer: $data" style={{ width: "100%", height: "900px" }}></div>
      </div>
    );
  }
  componentDidMount() {
    ko.applyBindings({
      reportUrl: this.reportUrl,
      viewerModel: this.previewModel,
      requestOptions: this.requestOptions,
    }, this.refs.viewer);
  }
  componentWillUnmount() {
    ko.cleanNode(this.refs.viewer);
  }
};

export default ReportViewer;

Vue

<template>
<div>
    <div>
        <button @click='printDocument'>Print Document</button>
    </div>
    <div ref="viewer" style="position: absolute; left: 0; right: 0" data-bind="dxReportViewer: $data">
    </div>
</div>
</template>

<script>
import ko from "knockout";
import 'devexpress-reporting/dx-webdocumentviewer';
var componentData = {
    name: "WebDocumentViewer",
    data() {
        return {
            previewModel: ko.observable(),
        }
    },
    methods: {
        printDocument() {
            this.previewModel().Print();
        },
    },
    mounted() {
        var reportUrl = ko.observable("TestReport"); // The URL of a report.
        var requestOptions = {
        // Specify the server-side application port.
                host: "https://localhost:64673/",
                // Use this line for an ASP.NET MVC backend
                //invokeAction: "/WebDocumentViewer/Invoke",
                // Use this line for an ASP.NET Core backend
                invokeAction: "DXXRDV"
            };    
        ko.applyBindings({
            reportUrl: reportUrl,
            viewerModel: this.previewModel,
            requestOptions: requestOptions,
        }, this.$refs.viewer);
    },
    beforeUnmount() {
        ko.cleanNode(this.$refs.viewer);
    }
};
export default componentData;
</script>

ResetParameters Method

Resets the report parameter values to the default values.

Declaration

ResetParameters(): void

Remarks

The method restores the default report parameter values and raises the ParametersReset event.

The following code creates a button that resets the report parameters. The ParametersReset event handler displays the parameter name and value.

Angular

 

report-viewer.html

<div>
    <button (click)="btnOnClick()"><span>TEST</span></button>
</div>

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (ParametersReset)="onParametersReset($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

 

report-viewer.ts

import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

@Component({
  selector: 'report-viewer',
  encapsulation: ViewEncapsulation.None,

  templateUrl: './report-viewer.html',
  styleUrls: [
    "../../../node_modules/devextreme/dist/css/dx.light.css",
    "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
    "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
    "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
  ]
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "TestReport";
    invokeAction: string = '/DXXRDV';

    btnOnClick() {
        this.viewer.bindingSender.ResetParameters();
    }
    onParametersReset(event) {
        alert("Parameter " + event.args.Parameters[0].path + " is reset to " + event.args.Parameters[0].value);
    }

  constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

React

import React from 'react';
import ko from 'knockout';
import 'devexpress-reporting/dx-webdocumentviewer';
import './App.css';

class ReportViewer extends React.Component {
    constructor(props) {
            super(props);
            this.reportUrl = ko.observable("TestReport");
            this.previewModel = ko.observable();
            this.requestOptions = {
            // Specify the backend application URL.
            host: "https://localhost:44370/",
            // Use this line for the ASP.NET MVC backend.
            //invokeAction: "/WebDocumentViewer/Invoke"
            // Use this line for the ASP.NET Core backend
            invokeAction: "DXXRDV"
        };

        this.doResetParameters = this.doResetParameters.bind(this);

        this.callbacks = {
          ParametersReset: function(s, e){
            alert("Parameter " + e.Parameters[0].path + " is reset to " + e.Parameters[0].value);
          }
        };
    };

  doResetParameters() {
    this.previewModel().ResetParameters();
  };

    render() {
        return (
          <div>
            <button onClick={() => this.doResetParameters()}>
              TEST
            </button>
            <div ref="viewer" data-bind="dxReportViewer: $data" style={{ width: "100%", height: "900px" }}></div>
          </div>
        );
    }
    componentDidMount() {
        ko.applyBindings({
            reportUrl: this.reportUrl,
            viewerModel: this.previewModel,
            requestOptions: this.requestOptions,
            callbacks: this.callbacks
        }, this.refs.viewer);
    }
    componentWillUnmount() {
        ko.cleanNode(this.refs.viewer);
    }
};

function App() {
return (<div style={{ width: "100%", height: "1000px" }}>
    <ReportViewer />
</div>);
}

export default App;

Vue

<template>
<div>
    <div>
        <button @click='doResetParameters'>TEST</button>
    </div>
    <div ref="viewer" style="position: absolute; left: 0; right: 0" data-bind="dxReportViewer: $data">
    </div>
</div>
</template>

<script>
import ko from "knockout";
import 'devexpress-reporting/dx-webdocumentviewer';

export default {
name: "WebDocumentViewer",
data() {
    return {
        previewModel: ko.observable(),
    }
},
methods: {
    doResetParameters() {
        this.previewModel().ResetParameters();
    },
},
    mounted() {
        var reportUrl = ko.observable("TestReport");
        var requestOptions = {
                // Specify the backend application URL.
                host: "https://localhost:44370/",
                // Use this line if you use an ASP.NET MVC backend
                //invokeAction: "/WebDocumentViewer/Invoke",
                // Use this line if you use an ASP.NET Core backend
                invokeAction: "DXXRDV"
            };
        var    callbacks = {  
            ParametersReset: function(s,e){
                alert("Parameter " + e.Parameters[0].path + " is reset to " + e.Parameters[0].value);
            }
        };    
        ko.applyBindings({
            reportUrl: reportUrl,
            viewerModel: this.previewModel,
            requestOptions: requestOptions,
            callbacks: callbacks
        }, this.$refs.viewer);
    },
beforeUnmount() {
    ko.cleanNode(this.$refs.viewer);
}
};
</script>

StartBuild Method

Starts building a report document.

Declaration

StartBuild(): void

Remarks

The following code creates a button that passes a parameter to the report and rebuilds the document. When the document is created, the Document Viewer navigates to the last page:

Angular

 

report-viewer.html

<div>
    <button (click)="BuildOnClick()"><span>Build Document</span></button>
</div>

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (DocumentReady)="GoToLastPage($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

 

report-viewer.ts

import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';

@Component({
  selector: 'report-viewer',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './report-viewer.html',
  styleUrls: [
   // ...
  ]
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "XtraReport1";
    invokeAction: string = '/DXXRDV';

    BuildOnClick() {
        var parameterValue = 1;
        this.viewer.bindingSender.GetParametersModel()["parameter1"](parameterValue);
        this.viewer.bindingSender.StartBuild();
    }
    GoToLastPage(event) {
        this.viewer.bindingSender.GoToPage(event.args.PageCount - 1);
    }

  constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

React

import React from "react";
import ko from "knockout";
import './App.css';

class ReportViewer extends React.Component {
  constructor(props) {
    super(props);
    this.reportUrl = ko.observable("XtraReport1");
    this.previewModel = ko.observable();
    this.requestOptions = {
        // Specify the server-side application port.
        host: "https://localhost:52454/",
        invokeAction: "DXXRDV"
    };
    this.buildDocument = this.buildDocument.bind(this);

    this.callbacks = {
      DocumentReady: function(s, e){
                          s.GoToPage(e.PageCount - 1);
      }
    };
  };

  buildDocument() {
            var parameterValue = 1;
            this.previewModel()
                .GetParametersModel()
                ["parameter1"](parameterValue);
            this.previewModel().StartBuild();
  };
  render() {
    return (
      <div>
        <button onClick={() => this.buildDocument()}>
          Build Document
        </button>
        <div ref="viewer" data-bind="dxReportViewer: $data" style={{ width: "100%", height: "900px" }}></div>
      </div>
    );
  }
  componentDidMount() {
    ko.applyBindings({
      reportUrl: this.reportUrl,
      viewerModel: this.previewModel,
      requestOptions: this.requestOptions,
      callbacks: this.callbacks
    }, this.refs.viewer);
  }
  componentWillUnmount() {
    ko.cleanNode(this.refs.viewer);
  }
};

export default ReportViewer;

Vue

<template>
    <div>
        <div>
            <button @click="buildDocument">Build Document</button>
        </div>
        <div
            ref="viewer"
            style="position: absolute; left: 0; right: 0"
            data-bind="dxReportViewer: $data"
        ></div>
    </div>
</template>

<script>
import ko from "knockout";
import "devexpress-reporting/dx-webdocumentviewer";
export default {
name: "WebDocumentViewer",
data() {
    return {
        previewModel: ko.observable(),
    }
},
methods: {
    buildDocument() {
        var parameterValue = 1;
        this.previewModel().GetParametersModel()["param1"](parameterValue);
        this.previewModel().StartBuild();
    }
},
mounted() {
    var viewerOptions = {
        reportUrl: ko.observable("Products"), // The report identifier.
        requestOptions: {
        host: "http://localhost:54114/", // Change the port number if necessary.
        // This line if you use an ASP.NET MVC backend
        invokeAction: "/WebDocumentViewer/Invoke",
        // This line if you use an ASP.NET Core backend
        //invokeAction: "DXXRDV" 
        },
        callbacks: {  
            DocumentReady: function(s, e) {
                s.GoToPage(e.PageCount - 1);
            }
        },
        viewerModel: this.previewModel        
    };
    ko.applyBindings(viewerOptions, this.$refs.viewer);
},
beforeUnmount() {
    ko.cleanNode(this.$refs.viewer);
}
};
</script>

UpdateLocalization(localization) Method

Substitutes the specified localizable strings with translations.

Declaration

UpdateLocalization(
    localization: any
): void

Parameters

Name	Type
localization	any

Remarks

For a code sample, review the following help topics:

• Localize Reporting Components for Web
• Localization in Reporting for React
• Localization in Reporting for Vue