Questions for HTML5 Report Viewer in React

[SHING SHUN]

I can load the report viewer in react following this guide:

https://docs.telerik.com/reporting/knowledge-base/how-to-use-html5-viewer-in-react-js



But when I add react route, it failed when there is any input parameter.

<Route path="/test" component={ReportViewerFunction} /> // success

<Route path="/test2/:name" component={ReportViewerFunction} /> //show TypeError: window.jQuery(...).telerik_ReportViewer is not a function



And then I found this document, says that:

Such error can occur if:
jQuery is not loaded;
jQuery is loaded more than once and with different version;
jQuery is loaded at later stage in the page life cycle.

https://docs.telerik.com/reporting/knowledge-base/getting-telerik-reportviewer-is-not-a-function-console-error



I do not know how to fix this problem. Is there a better way to implement the report viewer in React?

 

Also I would like to know how to direct print the report, instead of every time preview the report before printing.

[Dimitar]

Hello Shing Shun,

Regarding the problem with the telerikReportViewer function, I was able to reproduce the issue. It seems the problem was related to how the path to the telerikReportViewer-15.0.21.120.js file was set up. If yours is set up the following way:

 <script src="./assets/telerikReportViewer-15.0.21.120.min.js"></script>

When you go to the nested route, the request for the file above will look something like the following:

"http://localhost:3000/test2/assets/telerikReportViewer-15.0.21.120.min.js" and the request for the file will fail. That can be solved by using a relative path:

 <script src="/assets/telerikReportViewer-15.0.21.120.min.js"></script>

 Regarding the printing of the report, the React Report Viewer is based on the HTML5 Report Viewer and as such it has access to its commands. This means that we can use the print command to trigger the report printing. And if you do not want to have the report viewer appear, you can simply set its display property to none in the CSS. The following code is an implementation example of triggering the printing on a button click:

const exportReport = () => {
    var reportViewer = window.jQuery("#report").data("telerik_ReportViewer");

    reportViewer.commands.print.exec();
  }

<button onClick={exportReport}>Printer</button>

I hope this information will help you in achieving the desired results, please let me know if you have any other questions.

Regards,
Dimitar
Progress Telerik

[SHING SHUN]

It works like a charm.

Thanks for your help.