Use the following method to embed a report hosted on Power BI Report Server into a web application through the Power BI JavaScript API:
Prerequisites:
Power BI Report Server: The required report must be published onto the Power BI Report Server before embedding.
Web Application Hosting: A web server or environment for hosting your application.
Authentication: Use the appropriate authentication method, such as Kerberos or NTLM, because the Power BI Report Server uses Windows Authentication by default.
Power BI JavaScript API Library: To include the Power BI JavaScript API library in your web application.
Embedding Steps:
Construct a URL for a report.
Obtain the URL of your report hosted on the Power BI Report Server. The URL should include parameters such as rs: Embed=true in order to enable its embedding.
Example:
https://your-report-server/reports/powerbi/MyReport?rs:Embed=true
Embed the Report in an IFrame:
- Use an HTML <iframe> to display the report in your application.
- Include the authentication headers or configure server settings to handle credentials.
Example HTML:
<iframe id="reportContainer" width="100%" height="600px" src=""></iframe>
Use JavaScript API:
- Include the Power BI JavaScript library in your project.
<script src="https://cdn.powerbi.com/libs/powerbi-client/2.19.0/powerbi.min.js"></script>
Initialize and Embed the Report:
- Use JavaScript to initialize the Power BI client and load the report dynamically.
Example JavaScript:
const models = window['powerbi-client'].models;
// Report configuration
const embedConfig = {
embedUrl: 'https://your-report-server/reports/powerbi/MyReport?rs:Embed=true',
tokenType: models.TokenType.None, // For Power BI Report Servertype: 'report',
};
/ Get the HTML container element
const reportContainer = document.getElementById('reportContainer');
// Embed the report
const powerbi = new window['powerbi-client'].service.Service();
powerbi.embed(reportContainer, embedConfig);
Authentication Mechanism:
Power BI Report Server uses local Windows accounts and does not use Azure AD as in Power BI Service. Ensure:
The users are endowed with proper Windows credentials to log into the report.
Configure proper cross-origin resource sharing (CORS) if it is being hosted on another server with a web application.
