Category / Section
How to import the ReportViewer component in react application
6 mins read
Steps to integrate Syncfusion ReportViewer into Create React App (JavaScript)
- Install the Create React App package globally by using the below command.
npm install create-react-app -g
- Create react application using the below command.
create-react-app reports
- Install create-react-class and Syncfusion Reporting React package.
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)
- Install the Create React App package globally by using the below command.
npm install create-react-app -g
- Create react application using the below command.
create-react-app reports -- typescript
- Install create-react-class and Syncfusion Reporting React package.
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
