Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

The Power BI Data Visualization World Championships is back! It's time to submit your entry. Live now!

Reply
project101
Frequent Visitor

embed report using java script

i can generate html file with a report 

but i want to show 2 buttons print option and export option to pdf or excel 

i addad in my code sample with my report but nothing happen !!!??

this is my embed report html file 

i added button with click event with my function 

 

<html><head>

<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></s...>

<script type="text/javascript">
var xToken;
var xReport;
var xUrl;


window.onload = function () {

xToken =document.getElementById("TokenId").innerText;
xUrl = document.getElementById("UrlId").innerText;
xReport =document.getElementById("ReportId").innerTextToString;

var models = window['powerbi-client'].models

var config = {
type: 'report',
tokenType: models.TokenType.Embed,
accessToken: xToken,
embedUrl: xUrl,
pageView: "fitToWidth",
id: xReport
};

var reportContainer = $('#reportContainer')[0] ;
var report = powerbi.embed(reportContainer, config);

}


</script></head>

 

<body><div style="display: none;">
<p id="UrlId">https://app.powerbi.com/reportEmbed?reportId=d803075b-1d5b-45d6-9405-426448401b43&amp;groupId=df5602...>
</div>
<div style="display: none;">
<p id="ReportId">d803075b-1d5b-45d6-9405-426448401b43</p>
</div>
<div style="display: none;">
<p id="TokenId">"token..."</div>


<button onclick="myFunction()">Click me to reload</button>

<div id="reportContainer"><iframe src="https://app.powerbi.com/reportEmbed?reportId=d803075b-1d5b-45d6-9405-426448401b43&amp;groupId=df5602..." scrolling="no" allowfullscreen="true" style="width: 100%; height: 100%;"></iframe></div>


<script>
//document.getElementById("demo1").addEventListener("click", myFunction);

function myFunction() {
report.print().catch(error => { console.log(error);
report.off("loaded");
reportContainer.on("loaded", function () {
Log.logText("Loaded");
report.on("rendered", function () {
Log.logText("Rendered");
var pages = [];
//report.getPages().then(function (reportPages) {
//pages = reportPages;
//});
report.on('loaded', function () {
report.getPages().then(function (pages) {
pages[2].setActive();
});
});

}
</script>

 

 

</body></html>

 

 

 

 

1 REPLY 1
GilbertQ
Super User
Super User

Hi there

As far as I know this cannot be done via Power BI. I have not seen anyone successfully embed HTML into a Power BI report.




Did I answer your question? Mark my post as a solution!

Proud to be a Super User!







Power BI Blog

Helpful resources

Announcements
December 2025 Power BI Update Carousel

Power BI Monthly Update - December 2025

Check out the December 2025 Power BI Holiday Recap!

FabCon Atlanta 2026 carousel

FabCon Atlanta 2026

Join us at FabCon Atlanta, March 16-20, for the ultimate Fabric, Power BI, AI and SQL community-led event. Save $200 with code FABCOMM.