Я расчесывал интернет, чтобы узнать, как отображать отчеты в angular 2. До сих пор я не мог найти ничего, на что я мог бы положиться. Я буду очень благодарен, если кто-нибудь может помочь мне здесь.
Как отобразить отчет SSRS в приложении Angular 2
Ответ 1
Я не могу быть уверен, но теперь мой ответ: мы не можем показать отчет SSRS в angular 2. Но вы можете конвертировать и отображать отчет SSRS в формате PDF с помощью webapi и показывать его в своем приложении angular с помощью iframe, popwindow и ng2-pdf-viewer.
Я предпочитаю popwindow и ng2-pdf-viewer bcz Iframe не работает в браузерах ios и Mac, таких как сафари и т.д.
Теперь Вот мой пример 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";
}
Ответ 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>
Ответ 3
### App.componet.tsimport { 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";
}
//Примечание: параметры: необязательны; мой образец отчета не имеет параметра; однако вы можете при необходимости отправить в отчет один или несколько параметров.
Ответ 4
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 ############