Question

我一直在梳理互联网，以获得如何以角度2显示报告的一些线索。到目前为止，我还没能找到任何我可以依赖的东西。如果有人可以帮助我，我将非常感激。

Answer 1

我无法确定，但现在我的回答是我们无法以角度2显示SSRS报告。但您可以使用webapi将SSRS报告转换为PDF并使用iframe，popwindow和ng2-pdf-viewer在角度应用中显示。

我更喜欢popwindow和ng2-pdf-viewer bcz iframe不能在ios和mac浏览器上工作，比如safari等。

现在，我的示例api将ssrs报告转换为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";
    }

Answer 2

这个npm包应该可以提供帮助。

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

根据示例，它就像向页面添加自定义组件一样

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

Answer 3

### 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

//注意：参数：是可选的；我的样本报告没有参数；但是，您可以根据需要将单个或多个参数发送到报告中。

Answer 4

Bold Reports提供了端到端报告解决方案。使用Embedded Reporting Tools将SSRS报告显示到您的Angular应用程序中。

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

这些组件还支持最新的Angular v9。

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

注意：我为Syncfusion工作。

Answer 5

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 ############

如何在Angular 2应用程序中显示SSRS报告

5 个答案: