Integrating report in React App

talJoffeExelate

Hi,

I'm trying to embed a report in React (that's the framework we use in my firm).
I created a simple React app like so:

import React from 'react';
import jsreport from 'jsreport-browser-client-dist'
import logo from './logo.svg';
import './App.css';

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            report: "",
            reportScript: ""
        }
    }

    componentWillMount() {
        jsreport.serverUrl = 'http://localhost:5488';
        let reportRequest = {template: {shortid: 'HJH11D83ce'}}
        // let temp = "this is temp"
        jsreport.renderAsync(reportRequest)
            .then(res => {
                let htmlResponse = res.toString()
                let extractedScript = /<script>[\s\S]*<\/script>/g.exec(htmlResponse);
                // console.log('html is: ',htmlResponse)
                // console.log('script is: ',extractedScript)
                this.setState({report: htmlResponse})
                this.setState({reportScript: extractedScript})
            })
    }

    render() {
        let test = this.state.report
        return (
            <div className="App">
                <div className="App-header">
                    <img src={logo} className="App-logo" alt="logo"/>
                    <h2>Welcome to React</h2>
                </div>
                <div id="reportPlaceholder">
                    <p>there should be a report here...</p>
                    <div dangerouslySetInnerHTML={{__html: test}}/>

                </div>
            </div>
        );
    }

    componentDidUpdate() {
        // this runs the contents in script tag on a window/global scope
        let scriptToRun = this.state.reportScript[0]
        if (scriptToRun !== undefined) {
            // let cleanScript = scriptToRun.replace('<script>', '').replace('</script>','')
            let scriptLines = scriptToRun.split("\n")
            scriptLines.pop()
            scriptLines.shift()
            let cleanScript = scriptLines.join("\n")
            console.log('running script ',cleanScript)
            window.eval(cleanScript)
        }

    }
}

export default App;

it works. but the script running felt a little hacky... (I tried embedding the orders template which has script to populate a chart on a canvas)

Is there a better way to do this?

bjrmatos

hi! any reason to not use jsreport.render? in most cases you just need jsreport.render, jsreport.renderAsync is mean to be used just when your input data is large, but in most cases the input data is not very large.

here is an example using jsreport.render:

import React from 'react';
import jsreport from 'jsreport-browser-client-dist';
import logo from './logo.svg';
import './App.css';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      report: '',
      reportScript: ''
    };
  }

  componentDidMount() {
    jsreport.serverUrl = 'http://localhost:5488';
    let reportRequest = { template: { shortid: 'ByyCM_B7Z' } };
    jsreport.render(this.reportPreview, reportRequest)
  }

  render() {
    let test = this.state.report;
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <div id="reportPlaceholder">
          <p>there should be a report here...</p>
          <div style={{ height: '700px' }} ref={(el) => this.reportPreview = el} />
        </div>
      </div>
    );
  }
}

export default App;

talJoffeExelate

I actually tried using jsreport.render and couldn't get it to work. but this code works great thanks!
It is likely though that I will have requirements for larger data so I might need the async option but I'll check first how it works with render.

Thanks!