我一直在搜索关于如何在Angular 2中显示报表的线索，但目前为止我还没有找到可靠的信息。 如果有人能帮助我解决这个问题，我将非常感激。
如何在Angular 2应用程序中显示SSRS报表
10
- Tee-Jay
1
http://blog.chrisbriggsy.com/the-first-step-towards-integration/
第一步走向集成http://www.dotnetspeak.com/angular/using-ssrs-in-angular-asp-net-mvc-application/
在Angular ASP.NET MVC应用程序中使用SSRS - rook
5个回答
5
我不能确定，但我的答案是我们无法在Angular 2中展示SSRS报告。
不过，您可以使用WebApi将SSRS报告转换并呈现为PDF，并使用Iframe、popwindow和ng2-pdf-viewer在Angular应用程序中显示它。
我更喜欢popwindow和ng2-pdf-viewer，因为像Safari等iOS和Mac浏览器上的Iframe无法工作。
现在，这是我的样本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("文件格式无效");
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 hundrethsOfIn- Prabakaran
1
有人能否建议这是否是一个有效的解决方案。如果是，请解释以下问题：1）ServerResponse变量来自哪里，类型是什么。2）ShowReport函数中的ReponseType是什么。3）AppConfig.AppSettings("Systemic.ReportServer.BaseUrl"); AppConfig.AppSettings的目的是什么。 - Sathiya Vasagam S
4
这个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>
- int-i
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 ############
- Raju Senthil
2
我也做了同样的事情，但是出现了错误[因为它将“X-Frame-Options”设置为“sameorigin”，所以拒绝在框架中显示]。 - Virender Thakur
在报告URL的末尾使用?rs:Embed=true来修复X-Frame-Options。 - kiran
0
Bold Reports 提供了端到端的报告解决方案。使用嵌入式报告工具将SSRS报告显示在您的Angular应用程序中。
https://documentation.boldreports.com/angular/report-viewer/ssrs-report/
这些组件还支持最新版本的Angular v9。
https://www.boldreports.com/blog/angular-9-reporting-components
注意：我在Syncfusion工作。
- Karthick
1
我发现了Bold Reports，但是我并没有找到一个简单的设置示例。是否有一个纯Angular解决方案可以在从SSRS Rest接口获取数据的同时显示报告？这就是我正在寻找的。 - msfriese
0
### App.component.ts
### App.component.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.component.ts
// 注意：Parameters: 是可选的；我的示例报告没有参数；但是如果需要，您可以发送单个或多个参数到您的报告。
###（App.component.ts）//注意：参数：是可选的;我的示例报告没有参数, 但是如果有需要，您可以发送单个或多个参数到您的报告。
- Raju Senthil
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接