Search results

Load Syncfusion Report Server reports

You can render the Syncfusion Report Server hosted reports in the Report Viewer easily without creating a Web API service. Syncfusion Report Server provides the built-in Web API service that helps you to display the server reports.

The Report Viewer requires the serviceAuthorizationToken to connect and download the items from the Syncfusion Report Server. To achieve this, follow these steps:

  1. Create a token for users by using the server RESTful API. The following code is used to generate the token.

    <script type="text/javascript">
            $(function () {
                var dataValue = "";
                var apiRequest = new Object();
                apiRequest.password = "demo";
                apiRequest.userid = "guest";
                $.ajax({
                    type: "POST",
                    url: "https://reportserver.syncfusion.com/api/get-user-key",
                    data: apiRequest,
                    success: function (data) {
                        dataValue = data.Token;
                        var token = JSON.parse(dataValue);
                        // Report Viewer initialization.
                    }
                });
            });
    </script>
  2. Set the Syncfusion Report Server built-in service URL to the reportServiceUrl property. Assign the created token to serviceAuthorizationToken and reportPath of a report deployed on the server. You can use the following complete code in your HTML page.

    <script type="text/javascript">
            $(function () {
                var dataValue = "";
                var apiRequest = new Object();
                apiRequest.password = "demo";
                apiRequest.userid = "guest";
                $.ajax({
                    type: "POST",
                    url: "https://reportserver.syncfusion.com/api/get-user-key",
                    data: apiRequest,
                    success: function (data) {
                        dataValue = data.Token;
                        var token = JSON.parse(dataValue);
    
                        $("#viewer").ejReportViewer(
                            {
                                reportServiceUrl: "https://reportserver.syncfusion.com/ReportService/api/Viewer",
                                serviceAuthorizationToken: token["token_type"] + " " + token["access_token"],
                                reportPath: '/Sample Reports/Company Sales'
                            });
                    }
                });
            });
    </script>

    You can also load the report using GUID instead of report location. Set the GUID of the report in the reportPath property as reportPath: ‘91f24bf1-e537-4488-b19f-b37f77481d00’.

  3. Build and run the application.