我一直在梳理互联网，以获得如何以角度2显示报告的一些线索。到目前为止，我还没能找到任何我可以依赖的东西。 如果有人可以帮助我，我将非常感激。
答案 0 :(得分：4)
我无法确定，但现在我的回答是我们无法以角度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";
}
答案 1 :(得分：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>
答案 2 :(得分：0)
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";
}
//注意：参数：是可选的；我的样本报告没有参数；但是，您可以根据需要将单个或多个参数发送到报告中。
答案 3 :(得分：0)
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工作。
答案 4 :(得分：-1)
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 ############