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: 'http://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.1.301/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.blueopal.min.css" rel="stylesheet" />
    

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

  7. Run the application:

    npm start
    

See Also

In this article