CODEWITHSUNDEEP
javascriptreactjsstimulsoft
Amir
Amir

Reputation: 121

Error in using Stimulsoft reports.js in react project

I use react. for add stimulsoft reports.js, first add necessary link to css and javascript files in my Index.html file :

<link href="Css/stimulsoft.viewer.office2013.whiteblue.css" rel="stylesheet" />

 <script src="Scripts/stimulsoft.reports.js"></script>
  <script src="Scripts/stimulsoft.reports.maps.js"></script>
  <script src="Scripts/stimulsoft.viewer.js"></script>

After that i create a Component with this code :

 import React from 'react';
    class Viewer extends React.Component {
        render() {
            return <div id="viewerContent"></div>;
        }

        componentWillMount() {
            var report = new window.Stimulsoft.Report.StiReport();
            //create error
            report.loadFile("MyReportFile.mrt");

            var options = new window.Stimulsoft.Viewer.StiViewerOptions();

            this.viewer = new window.Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
            this.viewer.report = report;
        }

        componentDidMount() {
            this.viewer.renderHtml("viewerContent");
        }

    }

    export default Viewer;

and loadFile method caused below error in console : 

 stimulsoft.reports.js:73 [Deprecation] Synchronous XMLHttpRequest on the main thread is 
        deprecated because of its detrimental effects to the end user's experience. For more help, check 
        https://xhr.spec.whatwg.org/.

    Unexpected token < in JSON at position 0

    Uncaught TypeError: Cannot read property 'isDashboard' of undefined
    at stimulsoft.viewer.js:11

How to fix this error?

Upvotes: 3

Views: 2137

Answers (1)

Ali Ahmadi
Ali Ahmadi

Reputation: 670

I reached the Stimulsoft report in reactjs by this two steps :

First step - Add Stimulsoft report Js files in HTML file in the public folder :

Index.html

<!DOCTYPE HTML>
<html lang="fa" dir="rtl">
<head>
<!-- Title -->

<!-- Favicon & Manifest -->

<link href="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.viewer.office2013.whiteblue.css"
  rel="stylesheet"
/>

<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.reports.engine.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.reports.export.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.reports.import.xlsx.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.reports.chart.js" type="text/javascript"></script>
<!-- <script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.dashboards.js" type="text/javascript"></script> -->
<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.blockly.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/reports/stimulsoft/stimulsoft.viewer.js" type="text/javascript"></script>
   </head>
   <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
   </body>
</html>

Second step - create jsx component and copy this code to the component :

Viewer.jsx:

import React, { useEffect } from "react";
export default (props) => {
useEffect(() => {
if (props.show == true) {

  var options = new window.Stimulsoft.Viewer.StiViewerOptions();

  // options.appearance.fullScreenMode = true;
  // options.height = "100%";
  // options.appearance.scrollbarsMode = true;
  // options.toolbar.showDesignButton = true;

  var viewer = new window.Stimulsoft.Viewer.StiViewer(
    options,
    "StiViewer",
    false
  );

  var report = new window.Stimulsoft.Report.StiReport();
  report.licenseKey = "licenseKey ";

  report.loadFile(props.templateFile);
  var dataSet = new window.Stimulsoft.System.Data.DataSet("Demo");
  dataSet.readJson(props.dataSet);
  report.dictionary.databases.clear();

  report.regData("Demo", "Demo", dataSet);
  viewer.report = report;

  viewer.renderHtml("viewer");
}
}),
[]; 
return (
<>
  <div id="viewer"></div>
</>
);
};

Upvotes: 1

Related Questions