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

Question

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

Answer 1

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

我更喜欢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>