ReferenceError: Can't find variable: jsreport

Jerry Rodriguez

I'm using the JSReports API to retrieve the HTM for a report using html-with-browser-client handlebars. I added a button to the report to create and excel file to be created when a user clicks on it. with the following function:
<script>
function toXLS() {
jsreport.render({
template: {
name: 'SpgmJobSchedule',
engine: "handlebars",
recipe: "html-to-xlsx",
}
}).then(r => r.download('report.xls')).catch(console.error);
}
</script>

When I run the report from the studio it works fine but when I call the API to get the HTML and render the report on my application window the button does not work and it throws error: ReferenceError: Can't find variable: jsreport . Any help with this would be greatly appeciated.

syracine69

I'm not sure. But If I well understand, you try to download a report in a web browser by clicking a button on a web page? If it is right, you cannot access directly in your web browser the jsreport variable. You have to use, for example, jQuery to make an AJAX call through JS Report API like, for example:

<script type="module" src="jquery"></script>
<script type="text/javascript">
        $('#myButton').on('click', function(){
               $.ajax({
                     url: 'http://localhost:5488/jsreport/api/report',
                     data: {
                           template: {
                                  name: 'SpgmJobSchedule',
                                  engine: 'handlebars',
                                  recipe: 'html-to-xlsx'
                          }
                     },
                     
                     success: function(response) {
                                 blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    // the filename you want
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('your file has downloaded!');
                     }
               });
       });

</script>

Jerry Rodriguez

Thank you Syracine69, I saw this sample working on the deep dive demo from Jan Blaha. (https://www.youtube.com/watch?v=fhOQ0HPjK6s) I was thinking I might just be missing a script source tag with the code that defines the jsreport variable. I do see that it embeds jsreport.umd.js but It may be missing something else.

jan_blaha

What I've now tried to replicate:
jsreport 3.1.1

template :

<button id='render'>download</button>
<script>    
    document.getElementById('render').onclick = async () => {
      try {
         const report = await jsreport.render({
            template: {
               content: 'foo', engine: 'none', recipe: 'chrome-pdf',           
            }         
         }) 
         await report.download('foo.pdf')
      } catch (e) {
         console.error(e)
      }
    }
    
</script>

If I call it with API, I see in the output this like

<script src="http://localhost:5488/extension/browser-client/public/js/jsreport.umd.js"></script><button...

Opening this HTML as a static file, the button works.

However now I think that the problem will be how you put that HTML result into your application?
If you just open that to the new app, does it work?
What if you add it to iframe?
Could you check the F12 console? Is the jsrepurt.umd.js really properly downloaded? Are there no other errors?