import jsreport from "jsreport-browser-client-dist";

componentDidMount() {
    jsreport.serverUrl = "http://localhost:5488";
    let reportRequest = {
      template: {
        shortid: "rkJTnK2ce",
        recipe: "html"
      },
      data: {
        lines: [
          {
            "Employee Id": 1,
            "First Name": "Eric",
            "Last Name": "Lastname",
            "Record Category": "Earning",
            "Record Amount": "$100.00",
            "Record Hours": "10"
          },
         {
            "Employee Id": 2,
            "First Name": "Jack",
            "Last Name": "Lastname",
            "Record Category": "Earning",
            "Record Amount": "$100.00",
            "Record Hours": "12"
          }
        ]
      }
    };
    jsreport.render(this.reportPreview, reportRequest);
}  

--

render() {
    return (
        <div
            style={{ height: "700px" }}
            ref={el => (this.reportPreview = el)}
       ></div>
   )
}

This works well the data gets displayed in the page, however if I change recipe: "html" to recipe: "html-to-xlsx" it doesn't display the report in the page but it downloads it, is there a way to display the xlsx report in the page?

let reportRequest = {
      template: {
        shortid: "rkJTnK2ce",
        recipe: "html"
      },
     data: ....,
     options: { preview: true }
}

Thanks for your quick response.