CODEWITHSUNDEEP
javascriptasp.netjsreport
Mahbub
Mahbub

Reputation: 339

JSReport error: Failed to load resource: the server responded with a status of 404 ()

I am working in JS report for the first time. I have created my JS report tamplate in JS report studio. Now, I am trying to call it from my asp.net application from the client side. But I am getting an error in my client side which is "Cannot POST /studio/templates/xyz/api/report" when I am rendering it. I have checked it in the browser console and it shows that "The server responded with a status of 404 ()".

Here is my client side code,

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="jsReportTesting.aspx.vb" Inherits="TraceMate.jsReportTesting" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>JS Report Testing</h1>
            
            <input type="button" title="test" onclick="generateReport();" value="Get PDF Report" />
            <div id="placeholder" style="height: 900px;"></div>

        </div>
    </form>

    <script src="script/jsreport/jsreport.js"></script>
    <script type="text/javascript">
        jsreport.headers['Authorization'] = "Basic " + btoa("myusername:mypasword")
        jsreport.serverUrl = 'https://reports.myapp.de/studio/templates/xYZas';
        //URL path in which jsreport server runs    
        /* For the sample purpose, the below JSON can be used. But in real time this data should come from Web API calls */

        var json_data = {
            "employees": [{
                "name": "A",
                "team": "X"
            },
            {
                "name": "B",
                "team": "Y"
            },
            {
                "name": "C",
                "team": "Z"
            }
            ]
        }

        function generateReport() {
            var request = {
                template: {
                    "name": "samplereport",
                    "recipe": "phantom-pdf",
                    "engine": "handlebars",
                    "chrome": {
                        "landscape": true
                    }
                },
                data: json_data,
                "options": { "reports": { "save": true } }
            };
            jsreport.render(document.getElementById("placeholder"), request);
            // here ”placeholder” is div tag name in html page    
        }
    </script>
</body>
</html>

Can somebody show me where am I doing wrong in my code? Thanks in advance!

Upvotes: 0

Views: 1244

Answers (1)

Jan Blaha
Jan Blaha

Reputation: 3095

  • The serverUrl should look like this
jsreport.serverUrl = 'https://reports.myapp.de';

  • The jsreport.render doesn't work with the authorization, you need to use the renderAsync in case your jsreport server is authenticated. See the documentation https://jsreport.net/learn/browser-client

  • You seem to use phantom-pdf recipe that is old. It is recommended to use chrome-pdf these days.

  • In case your application is public, you probably don't want to expose the jsreport server credentials in the <script> tags. In this case, it is better to call jsreport from your server side.

Upvotes: 1

Related Questions