Articles in this section
Category / Section

How to import the ReportViewer component in react application

6 mins read

Steps to integrate Syncfusion ReportViewer into Create React App (JavaScript)

 

 

npm install create-react-app -g

 

 

  • Create react application using the below command.

 

create-react-app reports

 

 

npm install create-react-class –save
npm install @syncfusion/reporting-react --save

 

  • Import the required files in App.js.

 

[App.js]

/* eslint-disable */ //Add this command to avoiding the lint error in application
import React from 'react';
import logo from './logo.svg';
import './App.css';
//Report viewer source
import '@syncfusion/reporting-javascript/Scripts/reports/ej.report-viewer.min';
import '@syncfusion/reporting-javascript/Content/reports/material/ej.reports.all.min.css';
//Reports react base
import '@syncfusion/reporting-react/Scripts/reports/ej.reporting.react.min';
 
function App() {
    return (
        <div className="App">
            <EJ.ReportViewer id="reportviewer-container"
                reportServiceUrl={'https://reports.syncfusion.com/demos/services/api/SamplesReportViewer'}
                reportPath={"company-sales"}
                processingMode={"remote"}
            >
            </EJ.ReportViewer>
        </div>
    );
}
 
export default App;

 

  • To render our components, we need jQuery, React, ReactDOM, CreateReactClass instances in browser window. We achieved this, by injecting these values into window object in globals.js file and referred this file in index.js

 

[globals.js]

import jquery from 'jquery';
import React from 'react';
import createReactClass from 'create-react-class';
import ReactDOM from 'react-dom';
 
window.React = React;
window.createReactClass = createReactClass;
window.ReactDOM = ReactDOM;
window.$ = window.jQuery = jquery;

 

  • Build and run the application using the below command.

 

npm run build

 

  • The application will be launched into default 3000 port.

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/js-sample1986940918.zip

 

Steps to integrate Syncfusion ReportViewer into Create React App (TypeScript)

 

 

npm install create-react-app -g

 

 

  • Create react application using the below command.

 

create-react-app reports -- typescript

 

 

npm install create-react-class –save
 
npm install @syncfusion/reporting-react --save
 
npm install @types/create-react-class --save
 
npm install @types/ej.web.all --save
 
npm install @types/jquery --save

 

  • Import the required files and declare EJ in App.tsx.

 

[App.tsx]

//Report viewer source
import ‘@syncfusion/reporting-javascript/Scripts/reports/ej.report-viewer.min’;
import ‘../node_modules/@syncfusion/reporting-javascript/Content/reports/material/ej.reports.all.min.css’;
 
//Reports react base
import '@syncfusion/reporting-react/Scripts/reports/ej.reporting.react.min';
declare let EJ: any;

    

  • To render our components, we need jQuery, React, ReactDOM, CreateReactClass instances in browser window. We achieved this, by injecting these values into window object in globals.ts file and referred this file in index.tsx

 

[globals.ts]

import jquery from 'jquery';
import React from 'react';
import createReactClass from 'create-react-class';
import ReactDOM from 'react-dom';
 
(window as any).React = React;
(window as any).createReactClass = createReactClass;
(window as any).ReactDOM = ReactDOM;
(window as any).$ = (window as any).jQuery = jquery;

 

  • Build and run the application using the below command.

 

npm run build

 

  • The application will be launched into default 3000 port.

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ts-sample-1934195325.zip

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied