Use Power BI JavaScript SDK And Embed The Power BI Report In HTML Page - Power BI Embedded - Step By Step - Part Five

Overview

In this article, we will learn how we can embed our Power BI report in HTML Page using JavaScript SDK. I have attached the code to this article. You can directly download the HTML file.

Before we start I prefer you to read my earlier articles:

1. Overview of Power BI Embedded
2. Register the Power BI Application in Azure AD
3. Common steps to Embed Power BI report to the third party application
4. Create an Azure Function App to Generate Token

Now, let’s get started!

Step 1
Copy the Azure App function URL.

 

 

 

Step 2
Create one HTML file and paste the following code snippet.

1. <html>  
2.   
3. <head>  
4.     <meta http-equiv="Content-type" content="text/html; charset=utf-8">  
5.     <meta name="viewport" content="width=device-width,initial-scale=1">  
6.     <title>Power BI Embedded Demo</title>  
7.       
8.     <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>  
9.     <script type="text/javascript" language="javascript" src="https://rawgit.com/Microsoft/PowerBI-JavaScript/master/dist/powerbi.min.js"></script> </script>  
10. </head>  
11.   
12. <body>  
13.     <h1>Power BI Embedded Demo</h1>  
14.     <div id="reportContainer" style="width: 80%; height: 800px;"></div>  
15. </body>  
16.   
17. <script>  
18.     $(document).ready(function () {  
19.         var getEmbedToken = "ADD Your Copied URL";  
20.   
21.         $.ajax({  
22.             url: getEmbedToken,  
23.             jsonpCallback: 'callback',  
24.             contentType: 'application/javascript',  
25.             dataType: "jsonp",  
26.             success: function (json) {  
27.   
28.                 var models = window['powerbi-client'].models;  
29.   
30.                 var embedConfiguration = {  
31.                     type: 'report',  
32.                     id: json.ReportId,  
33.                     embedUrl: json.EmbedUrl,  
34.                     tokenType: models.TokenType.Embed,  
35.                     accessToken: json.EmbedToken  
36.                 };  
37.   
38.                 var $reportContainer = $('#reportContainer');  
39.                 var report = powerbi.embed($reportContainer.get(0), embedConfiguration);  
40.   
41.   
42.             },  
43.             error: function () {  
44.                 alert("Error");  
45.             }  
46.         });  
47.   
48.     });  
49. </script>  
50.   
51. </html>  

Step 3

Apply your Azure App function URL in the variable “getEmbedToken”.

Step 4
Run the code and check the result.

 

Conclusion

This is how we can embed our Power BI report in HTML Page. Hope you love this article! Stay connected with me.