Angular Single Page application with SSRS reports-CodePudding

There are a few posts out there but no solution to embedding SSRS reports into Angular 13:

-- Out of date Angular Single Page application and SSRS reports

I tried using ngx-ssrs-reportviewer but when added to per their instructions it was throwing errors. Perhaps it does not support Angular 13.

Any suggestions other than purchasing a product would be much appreciated.

CodePudding user response：

This is a very simple component that you can write yourself.

The SSRS report can be shown using an iframe...so...

Some inspiration taken from https://github.com/tycomo/ngx-ssrs-reportviewer/blob/master/projects/reportviewer/src/lib/reportviewer.component.ts

Create a component.

report-viewer.component.html:

<iframe width="100%" height="800" [src]="source" frameborder="0" allowfullscreen="false"></iframe>

report-viewer.component.ts:

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-report-viewer',
  templateUrl: './report-viewer.component.html',
  styleUrls: ['./report-viewer.component.css']
})
export class ReportViewerComponent implements OnInit {

  source!: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit(): void {
    this.source =
      this.sanitizer.bypassSecurityTrustResourceUrl('http://dgft-pwrbi-p01/reports/powerbi/Mortality Tracking/30DayAuditDashboard?rs:embed=true&filterPaneEnabled=False');
  }

}

And use it in a parent component, e.g.

<app-report-viewer></app-report-viewer>

Obviously, you can do something more sophisticated with input parameters and pass in various parameters to make it more reusable.

In the example above, I've hardcoded a Power BI URL, but this could be passed in as a single string from parent component and received by an input parameter in child component.

Personally, I wouldn't use a third-party component for something so simple.