Post
Ask Question

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.


Similar Articles