Embedding Reports / Displaying Reports / Web Application / React Report Viewer

New to Telerik Reporting? Download free 30-day trial

How to Use React Report Viewer with Report Server

This tutorial demonstrates how to add the React Report Viewer component to a new React application and display a report coming from the Telerik Report Server.

Prerequisites

The following list describes the prerequisites for this tutorial:

Using React Report Viewer in React application

All paths and url links in the described steps must be adapted according to your project setup.

Steps:

  1. Create new React application using the React tutorial.

    npx create-react-app my-app-with-viewer
cd my-app-with-viewer

  2. Install jQuery by using the following command:

    npm install jquery

  3. Install the Telerik React Report Viewer NPM package by running:

    npm install @progress/telerik-react-report-viewer

  4. Once installed, import the TelerikReportViewer in the index.js file: 

    import { TelerikReportViewer } from '@progress/telerik-react-report-viewer'

  5. Add the report viewer to the page:

    let viewer;
ReactDOM.render(
    <div>
        <TelerikReportViewer
            ref={ el => viewer = el }
            reportServer={{
                url: 'https://mytelerikreportserver:83/',
                username: 'myusername',
                password: 'mypass'
            }}
            reportSource={{
                report: 'Samples/Dashboard.trdp',
                parameters: {}
            }}
            viewerContainerStyle = {{
                position: 'absolute',
                left: '5px',
                right: '5px',
                top: '40px',
                bottom: '5px',
                overflow: 'hidden',
                clear: 'both',
                fontFamily: 'ms sans serif'
            }}
            viewMode="INTERACTIVE"
            scaleMode="SPECIFIC"
            scale={1.0}
            enableAccessibility={false} />
        <button id="refresh-button" onClick={ () => viewer.refreshReport() }>Refresh</button>
        <button onClick={ () => viewer.commands.print.exec() }>Print</button>
    </div>,
    document.getElementById('root')
);

  6. Style the viewer using the desired Kendo UI theme (еither using Less-Based Themes or Sass-Based Themes): Add references to the Less-based CSS files in the <head> element of index.html:

    <!-- The required Less-based styles -->
<link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.blueopal.min.css" rel="stylesheet" />

    To get the Sass-based Kendo UI themes, you can use either the pre-build CSS files, the Kendo UI CDN, or the NPM packages (Getting the Sass-Based Themes).

  7. Run the application:

    npm start

See Also

In this article
Related articles
Not finding the help you need? Improve this article