JSReportViewer Class

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

Declaration

export class JSReportViewer extends JSReportViewerBase<DevExpress.Reporting.Viewer.Internal.PreviewDisposableModel>

Remarks

To access the JSReportViewer object in applications based on different JS frameworks, use different techniques shown in the following code snippets. Note that snippets for different frameworks perform different actions:

Angular
React
Vue

report-viewer.html

cshtml

<div>
    <input #paramValue type="text" />
    <button (click)="submitParameter()"><span>Submit</span></button>
</div>

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

report-viewer.ts

import { Component, Inject, ViewEncapsulation, ViewChild, ElementRef } 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;
    @ViewChild('paramValue', { static: false })
    public paramValue!: ElementRef;
    reportUrl: string = "XtraReport1";
    invokeAction: string = '/DXXRDV';

    submitParameter() {
        var parameterValue = this.paramValue.nativeElement.value;
        this.viewer.bindingSender.OpenReport(this.reportUrl + "?strParam=" + parameterValue);
    }

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

typescript

'use client';
import React from 'react'
import ReportViewer, { RequestOptions, Callbacks, DxReportViewerRef } from 'devexpress-reporting-react/dx-report-viewer';

function App() {
  const viewerRef = React.useRef<DxReportViewerRef>();
  const onClick = () => viewerRef.current?.instance().ResetParameters();
  const onParametersReset = ({ args }: { args: any }) => {
    console.log("ParametersReset");
    console.log("Parameter " + args.Parameters[0].path + " is reset to " + args.Parameters[0].value);
  };
  const onParametersSubmitted = ({ args }: { args: any }) => {
    console.log("ParametersSubmitted");
    args.Parameters.forEach((parameter: any) => {
      console.log("Parameter " + parameter.Key + " value " + JSON.stringify(parameter.Value));
    });
  };
  const onParametersInitialized = ({ args }: { args: any }) => {
    console.log("ParametersInitialized");
    args.ActualParametersInfo.forEach((parameterModel: any) => {
      console.log("Parameter " + parameterModel.parameterDescriptor.name + " value " + JSON.stringify(parameterModel.parameterDescriptor.value));
    });
    args.ParametersModel['parameter1'] = 10;
    args.ShouldRequestParameters = false;
  };

  return (
    <>
      <button onClick={onClick}>Reset parameters</button>
      <ReportViewer ref={viewerRef} reportUrl="TestExportReport">
        <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
        <Callbacks ParametersReset={onParametersReset} ParametersSubmitted={onParametersSubmitted} ParametersInitialized={onParametersInitialized} />
      </ReportViewer>
    </>
  )
}

export default App

vue

<template>
    <div ref="viewer" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0"></div>
</template>

<script>
import 'devexpress-reporting/dx-webdocumentviewer';
import { DxReportViewer } from 'devexpress-reporting/dx-webdocumentviewer';
import * as ko from 'knockout';

export default {
    name: "WebDocumentViewer",
    mounted() {
        const reportUrl = ko.observable("TestReport");
        const viewerRef = this.$refs.viewer;
        const requestOptions = {
            host: "https://localhost:5000/",
            invokeAction: "DXXRDV"
        };
        const callbacks = {
            BeforeRender: function (s, e) {
                e.reportPreview.zoom = 0.25;
                e.reportPreview.showMultipagePreview = true;
                alert("Page load starts...");
                //Subscribe to property change. 
                e.reportPreview.events.on('propertyChanged', (args) => {
                    if (args.propertyName === 'pages') {
                        const newValue = args.newValue;
                        if (newValue.length > 0) {
                            alert("First page is loaded.");
                        }
                    }
                });
            }
        };
        const viewer = new DxReportViewer(viewerRef, { reportUrl, requestOptions, callbacks });
        viewer.render();
    },
    beforeUnmount() {
        ko.cleanNode(this.$refs.viewer);
    }
};
</script>

Inherited Members

GetParametersModel

GetPreviewModel

OpenReport(reportName)

ResetParameters

dispose

onPropertyChanged(args)

previewExists

Inheritance

JSReportViewerBase<T> JSReportViewer

Properties

previewModel Property

Declaration

previewModel: DevExpress.Reporting.Viewer.Internal.PreviewDisposableModel

Property Value

Type
PreviewDisposableModel

Methods

AdjustControlCore Method

Declaration

AdjustControlCore(): void

ExportTo(format) Method

Exports the document to the specified file format.

Declaration

ExportTo(
    format: string,
    inlineResult?: boolean
): void

Parameters

Name	Type	Description
format	string

A file format identifier.

| | inlineResult | boolean |

If the inlineResult is true, the browser attempts to display the resulting document.

Remarks

The 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 following code snippet hides the Export Options panel, add a button to export the report to a file in XLSX format, and specify the export options.

Angular
React
Vue

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

typescript

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',
    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) { }
}

typescript

'use client';
import React from 'react';
import ReportViewer, { Callbacks, DxReportViewerRef, RequestOptions } from 'devexpress-reporting-react/dx-report-viewer';
import { ExportFormatID, AsyncExportApproach } from 'devexpress-reporting/dx-webdocumentviewer'

function App() {
  const viewerRef = React.useRef<DxReportViewerRef>();
  const onCustomizeExportOptions = (event: any): void => {
    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";
  };
  const onBeforeRender = (event: any): void => {
    AsyncExportApproach(true);
  };
  const exportDocument = () => viewerRef.current?.instance().ExportTo('xlsx');
  return (
    <>
      <button onClick={exportDocument}>Export to XLSX</button>
      <ReportViewer ref={viewerRef} reportUrl="TestReport">
        <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
        <Callbacks CustomizeExportOptions={onCustomizeExportOptions} BeforeRender={onBeforeRender} />
      </ReportViewer>
    </>
  )
}

export default App

javascript

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

GetReportPreview Method

Allows you to access the report preview.

Declaration

GetReportPreview(): DevExpress.Reporting.Viewer.ReportHolder

Returns

Type
ReportHolder

Remarks

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

ASP.NET Core
Angular
React
Vue

cshtml

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

report-viewer.html

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

typescript

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

typescript

'use client';
import ReportViewer, { Callbacks, RequestOptions } from 'devexpress-reporting-react/dx-report-viewer';

function App() {
  const onDocumentReady = (event: any): void => {
    event.sender.GetReportPreview().zoom = 0.25;
  };
  return (
    <>
      <ReportViewer reportUrl="TestReport">
        <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
        <Callbacks DocumentReady={onDocumentReady} />
      </ReportViewer>
    </>
  )
}

export default App

javascript

<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: number
): void

Parameters

Name	Type
pageIndex	number

Remarks

The code snippet below automatically navigates pages of a document when it is created.

React
Vue

typescript

'use client';
import ReportViewer, { Callbacks, RequestOptions } from 'devexpress-reporting-react/dx-report-viewer';

function App() {
  const onDocumentReady = (event: any): void => {
    var goToNextPage = function () {
      var pageIndex = event.sender.GetCurrentPageIndex();
      if (event.args.PageCount <= pageIndex)
          return;
      event.sender.GoToPage(pageIndex + 1);
      setTimeout(function () { goToNextPage(); }, 3000);
  }
  goToNextPage();
  };  
  return (
    <ReportViewer reportUrl="TestExportReport">
        <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
        <Callbacks DocumentReady={onDocumentReady} />
    </ReportViewer>
  )
}

export default App

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

PerformCustomDocumentOperation(customData, hideMessageFromUser) Method

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

Declaration

PerformCustomDocumentOperation(
    customData: string,
    hideMessageFromUser: boolean
): DevExpress.Analytics.Internal.DxPromise<IDocumentOperationResult>

Parameters

Name	Type	Description
customData	string

Custom data required to perform an operation.

| | hideMessageFromUser | boolean |

true, to hide a message with the operation result from the user; otherwise, false.

Returns

Type
DxPromise<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
Angular

cshtml

<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('[email protected]');
            }
        };
        e.Actions.push(sendViaEmailItem);
    }
</script>

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

style.css

css

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

report-viewer.html

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

typescript

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('[email protected]');                
            }
        };
        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

Print Method

Prints the entire document or the specified page.

Declaration

Print(
    pageIndex?: number
): void

Parameters

Name	Type	Description
pageIndex	number

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 creates a button that prints the Document Viewer’s report:

Angular
React
Vue

report-viewer.html

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

typescript

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

typescript

'use client';
import React from 'react';
import ReportViewer, { DxReportViewerRef, RequestOptions } from 'devexpress-reporting-react/dx-report-viewer';

function App() {
    const viewerRef = React.useRef<DxReportViewerRef>();
    const onClick = () => viewerRef.current?.instance().Print();
    return (
        <>
            <button onClick={onClick}>Print Document</button>
            <ReportViewer ref={viewerRef} reportUrl="TestReport">
                <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
            </ReportViewer>
        </>
    )
}

export default App

javascript

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

View Example: Reporting for React - Customize a Web Document Viewer in a React App (Next.js)

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
React
Vue

report-viewer.html

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

typescript

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

typescript

'use client';
import React from 'react';
import ReportViewer, { Callbacks, DxReportViewerRef, RequestOptions } from 'devexpress-reporting-react/dx-report-viewer';

function App() {
  const viewerRef = React.useRef<DxReportViewerRef>();
  const onDocumentReady = (event: any): void => {
    event.sender.GoToPage(event.args.PageCount - 1);
  };
  const buildDocument = () => {
    var parameterValue = "2";
    if (viewerRef.current) {
      viewerRef.current.instance().GetParametersModel().parameters[0].value = parameterValue;
      viewerRef.current.instance().previewModel.StartBuild();
    }
  }

  return (
    <>
      <button onClick={buildDocument}>Build Document</button>
      <ReportViewer ref={viewerRef} reportUrl="TestExportReport">
        <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
        <Callbacks DocumentReady={onDocumentReady} />
      </ReportViewer>
    </>
  )
}

export default App

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: {
    [key: string]: string;
}): void

Parameters

Name	Type
localization	{[key: string]: string}

Remarks

For a code sample, review the following help topics: