This example shows how to integrate the report viewer into a React application with TypeScript. First of all, load scripts:
import React from 'react';
import { Stimulsoft } from 'stimulsoft-reports-js/Scripts/stimulsoft.viewer';
import 'stimulsoft-reports-js/Css/stimulsoft.viewer.office2013.whiteblue.css';
import './App.css';

Then, create an App class which extends from React component:
class App extends React.Component {
    private viewer = new Stimulsoft.Viewer.StiViewer(undefined, 'StiViewer', false);
    private report = new Stimulsoft.Report.StiReport();

    render() {
        return (
            <div id="viewer" className="App">
            </div>
        );
    }

...

Finally, use componentDidMount() method to set viewer options, load the report and display it in the viewer:
...

	async componentDidMount() {
		console.log('Loading Viewer view');

		const response = await fetch('/reports/Report.mdc');
		const data = await response.json();
		console.log('Load report from url');
		this.report.loadDocument(data);
		this.viewer.report = this.report;

		console.log('Rendering the viewer to selected element');
		this.viewer.renderHtml('viewer');
	}

...

Auf dem Screenshot unten Sie können das Ergebnis des Beispiel-Codes ansehen:

Integrating the Report Viewer into an Application (TypeScript)

By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.