Following are the prerequisites before you start using ActiveReportsJS in React framework.
Prerequisites:
npm install create-react-app -g
or
yarn global add create-react-app
The following steps show how to view an existing report in a React application.
create-react-app arjs-react
cd arjs-react
npm install @grapecity/activereports-react
or
yarn add @grapecity/activereports-react
npm install @grapecity/activereports-localization
or
yarn add @grapecity/activereports-localization
public
' folder of the application.src/App.js
' file to import required stylesheet and scripts import React from 'react';
import '@grapecity/activereports/styles/ar-js-viewer.css';
import {} from '@grapecity/activereports-localization';
import { Viewer } from '@grapecity/activereports-react';
import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports';
class App extends React.Component {
_viewer = Viewer;
render() {
return (<div className="demo-app" style={{ height: '1000px'}} >
<Viewer
report={{ Uri: "InvoiceList.rdlx-json" }}
sidebarVisible={true}
toolbarVisible={false}
language = 'ja' />
</div>);
}
}
export default App;
Note that the export capabilities are added in viewer using the following import statement
import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports';
These modules are also required to allow export of report without using viewer. See Export topic for more information.
npm start
or
yarn start
You will get a running application in the browser (localhost:3000
).
Refer to the React Component topic for more details on using ActiveReportsJS in React applications.
Submit and view feedback for