Trying to get an API call to work using JSReport Online

bjrmatos

ah ok, it seems i forgot that the serverUrl should be the root url not the one with /api/report, internally the .render() know what http url to call in the end.

so please change the serverUrl to just this:

jsreport.serverUrl = 'https://[our-unique-code].jsreportonline.net';

if that does not work please show what is the error message, it should be available in the browser console.

John Backer

The console is saying that jsreport is not defined.

bjrmatos

jsreport (browser sdk) is not defined in your html page by default, you need to add it, the quickly way to do it is by adding this to your html at the head tag

<head>
    <script src="https://unpkg.com/jsreport-browser-client-dist@1.3.0/jsreport.min.js"></script>
</head>

John Backer

Ok, getting further, but now I'm getting an error that the $ is undefined...
jsreport.render($("#placeholder"), request);

bjrmatos

it seems your code assumes that jQuery is loaded too, to avoid loading that extra lib you can update your code to this:

jsreport.render(document.getElementById('placeholder'), request)

John Backer

This thread will give all newbies all they need :)

That worked, but when it presented an authentication dialog and I provided my admin credentials from my admin account I get:

Error: Unable to find specified template or user doesnt have permissions to read it: TimeSheet
at module.exports (/usr/src/app/node_modules/jsreport-core/lib/util/createError.js:11:13)
at Reporter.createError (/usr/src/app/node_modules/jsreport-core/lib/reporter.js:332:12)
at AsyncFunction.<anonymous> (/usr/src/app/node_modules/jsreport-templates/lib/templates.js:134:20)

I imagine I need to clear my browser cache because it isn't give me a chance to enter new credentials...

John Backer

I cleared by browser cache and added a new user with read access to the template...

Error: Unable to find specified template or user doesnt have permissions to read it: TimeSheet
at module.exports (/usr/src/app/node_modules/jsreport-core/lib/util/createError.js:11:13)
at Reporter.createError (/usr/src/app/node_modules/jsreport-core/lib/reporter.js:332:12)
at AsyncFunction.<anonymous> (/usr/src/app/node_modules/jsreport-templates/lib/templates.js:134:20)

It looks like I have a folder of TimeSheet and inside that there is another TimeSheet with all the parts of the project...but it won't let me copy all the components up to the first level...

bjrmatos

my bad, please ignore that authentication dialog because is not going to work correctly, I did not remember that using the .render method does not work against servers with authentication enabled.

you can find the relevant mention to that in the docs here:

the relevant information there is this:

it can send only small amount of the input data
doesn't support sending headers and it won't work with jsreport server with enabled authentication
the boolen values in the input data are serialized as strings

so to solve the issue you need to use the .renderAsync, update your generateReport function to this:

function generateReport() {    
  var request = {    
        template: {    
              name: 'TimeSheet'    
             },     
                   data: outputJSON    
        };    
  } 

  jsreport.renderAsync(request).then(function(res) {
            var reportUrl = res.toObjectURL()
            var iframe = document.createElement('iframe')
            var placeholder = document.getElementById('placeholder')

            iframe.src = reportUrl
            iframe.style.width = '100%'
            iframe.style.height = '100%'

            // clear previous iframe content     
            while (placeholder.firstChild) {
                placeholder.removeChild(placeholder.firstChild);
            }

            placeholder.appendChild(iframe)
        }).catch(function (err) {
            console.error('Error while executing render request', err)
        })

John Backer

Thanks, I really appreciate all the help.

I believe I made the changes you indicated, but I'm getting this in the console:

https://qtis.jsreportonline.net/api/report 404 (Not Found)
(anonymous) @ VM292:1
(anonymous) @ jsreport.min.js:2
_renderAsync @ jsreport.min.js:2
renderAsync @ jsreport.min.js:2
generateReport @ TestJSReport.html:123
onclick @ TestJSReport.html:6
TestJSReport.html:139 Error while executing render request

John Backer

ok, I figured that one out - it was my directory structure. I think my last error is:

Mixed Content: The page at '.......' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://jsreportonline.net/sign'. This request has been blocked; the content must be served over HTTPS. Was I supposed to remove the login lines?

bjrmatos

Was I supposed to remove the login lines

no, everything else mentioned should stay the same, but just to be sure you can also paste here the full code that you have, of course omitting the real username and password of your account

what is the exact serverUrl are you using?

i am testing the same code with my account it works ok, without issues

bjrmatos

you should use this at serverUrl:

jsreport.serverUrl = 'https://qtis.jsreportonline.net'
// this should be also present, pass your correct credentials
jsreport.headers['Authorization'] = "Basic " + btoa("<yourjsreportonlineemail>:<yourjsreportonlinepassword>")

and because your template is inside folders, your template name parameter should look like this (notice that it acceps a path to the template)

var request = {    
        template: {    
              name: '/TimeSheet/TimeSheet/timesheet'    
             },     
                   data: outputJSON    
        };    
  }

John Backer

Thank you so much - it is working now!

ronaldhiggins22

The code you've provided appears to be an HTML page with JavaScript that attempts to generate a PDF report using the jsreport library. Based on the code you've shared, here are a few things to check and consider:

jsreport Configuration: Ensure that you have properly configured the jsreport.serverUrl variable with the correct URL of your jsreport server. The URL should point to the jsreport server API endpoint.

Authentication: You mentioned the need for authentication to access the report. If your jsreport server requires authentication, you should handle authentication either through the server itself (using authentication plugins or middleware) or by sending authentication credentials (e.g., API keys or tokens) along with your API request. Make sure your server is set up to authenticate requests properly.

Template Name: The code specifies a template name 'TimeSheet'. You should make sure that a template with this name exists in your jsreport server. Templates in jsreport are used to define the structure and layout of the generated reports. Ensure that the template name is correct and that it matches an existing template on your jsreport server.

jsreport.render: The jsreport.render function is used to render the report. Ensure that the generateReport function is being called when you click the "Get PDF Report" button. You can add console.log statements or use browser developer tools to check if the function is being triggered and if any errors are being logged in the console.

HTML Structure: Ensure that the HTML structure is valid. The generateReport function seems to be using $("#placeholder") to target a <div> element with the id "placeholder" to render the report. Make sure this <div> element exists on your page.

JavaScript Errors: Check your browser's developer console for any JavaScript errors. Any errors in your JavaScript code can prevent the report from being generated.

Cross-Origin Requests: If your jsreport server is hosted on a different domain or subdomain, you might encounter cross-origin issues. Make sure that your server allows cross-origin requests from the subdomain where this code is hosted. You may need to configure CORS (Cross-Origin Resource Sharing) settings on your jsreport server.

Network Requests: Use your browser's network tab in the developer tools to inspect the network requests being made when you click the button. Check if the API request to the jsreport server is being sent and if there are any error responses.