How to embed/render SSRS report in a ReactJS + .Net core Web API application

user_2894149 0
Viewed 776

I have an application developed in .Net core 5 for backend and React JS for front end. I also have some existing SSRS reports which needs to be rendered in the application. How can I embed/render these SSRS reports in ReactJS application?

reactjs .net-core reporting-services
2 Answers

I have addressed this problem by generating URL Access urls and linking to them. You can also put them in iframes.

const makeReportLink = (reportPath, reportParams = {}, zoom = 100) => {
    const reportViewerUrl = 'http://report-server-host/ReportServer_SSRS/Pages/ReportViewer.aspx';
    const reportParamDefaults = {
        'rs:Command': 'Render',
        'rc:Parameters' : 'false',
        'rc:Zoom': zoom,
    };

    let reportSP = new URLSearchParams({...reportParamDefaults, ...reportParams});

    return `${reportViewerUrl}?${reportPath}&${reportSP.toString()}`;
}
user_159080450

I have done following to achieve this

  1. Created One POST API, it saves dictionary of Report params in txt file with Unique GUID.

  2. Sent Iframe request like http://servername/reportviewer.aspx?reportid= from React app to .Net Application Report Viewer aspx page (Microsoft.ReportViewer.WebForms) with unique GUID, that page gets all params from txt file , sets Authentication , Get Repprt Data from SSRS and show Report Data.

  3. Since SSRS opens in IFrame, on refresh it will look for session, which will not be found in React App, for that below web.config additon is required in .net application:

     <sessionState cookieless="true" mode="InProc" sqlConnectionString="data source=127.0.0.1;user id=sa;password=" stateConnectionString="tcpip=127.0.0.1:42424" timeout="8000"/>

cookieless="true" is important other wise you will get "asp.net session has expired or could not be found" Error.

user_39143260
Related