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:

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.