How To Display SSRS Report In Angular 2 Application

Question

I have been combing the internet for some clue as to how to display reports in angular 2. So far I haven't been able to find anything I could rely on. I will appreciate it very much if any one can help me out here.

Chymotrypsin

blog.chrisbriggsy.com/the-first-step-towards-integration dotnetspeak.com/angular/… – Periodic

Answer 1

I can't be sure, but now my answer is we can't able to show SSRS report in angular 2. But you can convert and render your SSRS report as PDF using webapi and show it in your angular app using Iframe, popwindow and ng2-pdf-viewer.

I prefer popwindow and ng2-pdf-viewer bcz Iframe not working on ios and mac browsers like safari etc.

Now Here is my sample api to convert ssrs report as pdf

    [HttpGet]
    [Route("ShowReport/PDF")]
    [AllowAnonymous]
    [ResponseType(typeof(ServerResponse))]

    public HttpResponseMessage ShowReport(string ReponseType)
    {
        using (blBaseCore bl = new blBaseCore(AppConfig.DefaultConnectionString, 1, 1))
        {
            List prms = new List();
            prms.Add(new ReportParameter("PARAM1_NAME", "PARAM1_VALUE"));
            prms.Add(new ReportParameter("PARAM2_NAME", "PARAM2_VALUE"));
            return this.GenrateReport("SSRS_REPORT_NAME", "PDF_FILE_NAME", ReponseType, prms);
        }

    }
    /// 
    /// Genrates the report.
    /// 
    /// Name of the report.
    /// Name of the export file.
    /// Type of the export file.
    /// The PRMS.
    /// HttpResponseMessage.
    public HttpResponseMessage GenrateReport(string reportName, string ExportFileName, string ExportFileType, List prms)
    {

        var result = new HttpResponseMessage(HttpStatusCode.OK);
        try
        {
            if (!(new string[] { "pdf", "excel" }).Contains(ExportFileType.ToLower()))
                throw new Exception("Invalid file format");
            string ServerPath = AppConfig.AppSettings("Systemic.ReportServer.BaseUrl");
            string ReportFolder = AppConfig.AppSettings("Systemic.ReportServer.FolderPath");
            byte[] bytes = null;
            using (var reportViewer = new ReportViewer())
            {
                //reportViewer.ServerReport.ReportServerCredentials = new ReportServerCredentials("Prabakaran", "LooserNo1", "SERVER");
                reportViewer.ShowPrintButton = false;
                reportViewer.ShowZoomControl = false;
                reportViewer.PageCountMode = PageCountMode.Actual;
                reportViewer.ProcessingMode = ProcessingMode.Remote;
                reportViewer.ServerReport.ReportServerUrl = new System.Uri(ServerPath);
                reportViewer.ServerReport.ReportPath = "/" + ReportFolder + "/" + reportName;

                if (prms.Count > 0)
                {
                    reportViewer.ServerReport.SetParameters(prms);
                }
                reportViewer.ServerReport.Refresh();


                if (reportViewer.ServerReport.IsReadyForRendering && ExportFileType.ToLower() == "pdf")
                {
                    bytes = reportViewer.ServerReport.Render("PDF", DeviceInfo(reportViewer));
                    //bytes = reportViewer.ServerReport.Render("PDF");


                    if (bytes != null)
                    {
                        Stream stream = new MemoryStream(bytes);
                        result.Content = new StreamContent(stream);
                        result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
                    }
                }
                else if (reportViewer.ServerReport.IsReadyForRendering && ExportFileType.ToLower() == "excel")
                {
                    bytes = reportViewer.ServerReport.Render("excel");
                    if (bytes != null)
                    {
                        Stream stream = new MemoryStream(bytes);
                        result.Content = new StreamContent(stream);
                        result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/vnd.ms-excel");
                        result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
                        result.Content.Headers.ContentDisposition.FileName = $"{ExportFileName}.xls";
                    }
                }
            }
            return result;
        }
        catch (Exception ex)
        {
            var res = Request.CreateResponse(HttpStatusCode.OK, ServerResponse.Error(ex, 501));
            res.Content.Headers.ContentType = new MediaTypeHeaderValue("application/json");
            AppLog.Write(ex.Message, LogName.Report, LogType.Error);
            return res;
        }
    }


    protected string DeviceInfo(ReportViewer rv)
    {
        ReportPageSettings rps = rv.ServerReport.GetDefaultPageSettings();
        //PageSettings ps = rv.GetPageSettings();
        PaperSize paperSize = rps.PaperSize;
        Margins margins = rps.Margins;

        // The device info string defines the page range to print as well as the size of the page.
        // A start and end page of 0 means generate all pages.
        if (!rps.IsLandscape)
        {
            return string.Format(
                CultureInfo.InvariantCulture,
                "emf00{0}{1}{2}{3}{4}{5}",
                ToInches(margins.Top),
                ToInches(margins.Left),
                ToInches(margins.Right),
                ToInches(margins.Bottom),
                ToInches(paperSize.Height),
                ToInches(paperSize.Width));
        }
        else
        {
            return string.Format(
                CultureInfo.InvariantCulture,
                "emf00{0}{1}{2}{3}{4}{5}",
                ToInches(margins.Top),
                ToInches(margins.Left),
                ToInches(margins.Right),
                ToInches(margins.Bottom),
                ToInches(paperSize.Width),
                ToInches(paperSize.Height));
        }
    }

    protected string ToInches(int hundrethsOfInch)
    {
        double inches = hundrethsOfInch / 100.0;
        return inches.ToString(CultureInfo.InvariantCulture) + "in";
    }

Pyo

Can anyone suggest if this is a working solution.If yes then please explain the below queries: 1) ServerResponse where this variable is coming from and what is the type for this. 2) What is ReponseType in the ShowReport function.3) AppConfig.AppSettings("Systemic.ReportServer.BaseUrl"); what is the purpose of AppConfig.AppSettings. – Scutcheon

Answer 2

This npm package should be able to help.

https://github.com/tycomo/ngx-ssrs-reportviewer

As per the sample, it is just like adding a custom component to the page

<div class="container">
        <ssrs-reportviewer
            [reportserver]="reportServer"
            [reporturl]="reportUrl"
            [showparameters]="showParameters" 
            [parameters]="parameters" 
            [language]="language" 
            [width] ="width" 
            [height]="height" 
            [toolbar]="toolbar" >
        </ssrs-reportviewer>
    </div>

Hypnos

Answer 3

worked for me; I have managed to show my ssrs reports in Angular 7 platform, 

Note: SQL Server and SSRS Server should be active.

the working code is as follows.

STEP1) app.module.ts
###################app.module.ts#################
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule , CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { ReportViewerModule } from 'ngx-ssrs-reportviewer';


    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        ReportViewerModule
      ],
      providers: [],
      bootstrap: [AppComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    export class AppModule { }

###################app.module.ts#################


STEP 2) app.componet.ts
################# App.componet.ts #############

    import { Component } from '@angular/core';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'Test2';
      reportServer: string = 'http://localhost/ReportServer';
      reportUrl: string = "ReportTest/rptTest";
      language: string = "en-us";
    //  parameters: any = {
    //    "p1": 1,
    //    "p2" : 2,
    //    };
      showparameters: string="true"
      width: number = 100;
      height: number = 100;
      toolbar: string = "true";
    }

    ################ App.componet.ts   ##################

// Note: 

1) Parameters: is optional; my sample report doesn't have parameter; however you can send single or multiple parameters to your report if needed.

2) ReportServer / ReportURL you have to get from SSRS Service.



STEP 3)
################## app.component.html ############
// add this following tag to your html file

    <div class="container">
      <ssrs-reportviewer
          [reportserver]="reportServer"
          [reporturl]="reportUrl"
          [language]="language" 
          [showparameters]="showparameters" 
          [parameters]="parameters"       
          [width] ="width" 
          [height]="height" 
          [toolbar]="toolbar" >
      </ssrs-reportviewer>
    </div>

################## app.component.html ############

Kwangju

I did same but getting error [Refused to display in a frame because it set 'X-Frame-Options' to 'sameorigin']. – Gass

Use ?rs:Embed=true at the end of report url to fix X-Frame-Options – Eschalot

Answer 4

### App.componet.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Test2';
  reportServer: string = 'http://localhost/ReportServer';
  reportUrl: string = "ReportTest/rptTest";
  language: string = "en-us";
//  parameters: any = {
//    "p1": 1,
//    "p2" : 2,
//    };
  showparameters: string="true"
  width: number = 100;
  height: number = 100;
  toolbar: string = "true";
}

### App.componet.ts

// Note: Parameters: is optional; my sample report doesn't have parameter; however you can send single or multiple parameters to your report if needed.

Kwangju

Answer 5

The Bold Reports provides the end to end reporting solutions. Use the Embedded Reporting Tools to display the SSRS reports into your Angular application.

https://documentation.boldreports.com/angular/report-viewer/ssrs-report/

The components also support the latest Angular v9.

https://www.boldreports.com/blog/angular-9-reporting-components

Note: I work for Syncfusion.

Schlock

I came across bold reports, but I couldn't really find a simple example of how to set it up. Is there a plain angular solution to show the reports while getting data from SSRS Rest interface? That is what I am looking for. – Seclusive